Gerenciamento de produtos: ferramentas para melhorar a acessibilidade de produtos

1. Introdução: Quando se trata de desenvolver para a web, o que eu absolutamente amo é que é para todos. Você não precisa ter um determinado telefone celular, você não precisa ter um determinado computador ou uma conectividade gorda, basicamente, qualquer um é convidado para fazer coisas na web. Eu me apaixonei pela web quando trabalhei na rádio, e percebi que qualquer um pode se tornar um editor sem ter que gastar dinheiro com ela. Eu queria ter certeza desde o primeiro dia que a web está lá para todos, independentemente da capacidade, independentemente de onde você está no planeta, independentemente da sua configuração e do computador que você tem, eu quero ter certeza de que eu posso usar meu habilidades como engenheiro para garantir que os produtos estão disponíveis para todos lá fora. Porque quando fazemos isso, temos muito mais usuários e essa é uma ideia muito simples. Olá, sou Christian Heilmann. Sou Gerente de Programas Principal da Microsoft e meu trabalho é garantir que nossos produtos estejam acessíveis a todos, e é sobre isso que vamos falar hoje. Acessibilidade não é essa coisa assustadora, problemática que é um requisito legal, mas muitas vezes apenas senso comum e certificando-se de que o produto pode suportar mudanças que as pessoas precisam fazer para ele. Você vai descobrir que as pessoas têm necessidades diferentes e suas necessidades mudam ao longo do tempo também. Se eu tirar meus óculos, eu uso o produto de forma diferente do que quando eu tenho meus óculos . A deficiência não é um estado único. É uma escala deslizante que muda ao longo do tempo e nosso produto deve ser flexível o suficiente para realmente suportar isso. Nesta aula, vamos falar sobre acessibilidade além da conformidade e isso significa que estamos construindo coisas que são acessíveis pensando como usuários e não apenas pensando no que precisamos fazer para sermos acessíveis. Vamos dar uma olhada em alguns dos sistemas automatizados que passam por cima de seus produtos e dizer-lhe onde estão as peças problemáticas e vamos falar sobre como isso pode ser um falso positivo. Em seguida, vamos mudar de marcha e ir para o navegador e usar o produto como um usuário faria, e mudar um pouco da aparência, que você realmente saiba quais casos de borda você precisa cobrir. E vamos usar as ferramentas de desenvolvedor incorporadas no navegador para descobrir onde estão as partes mais problemáticas do seu produto e como corrigi-las. Esta aula está próxima do meu coração porque eu tenho que trabalhar diariamente com acessibilidade para os produtos da Microsoft, e às vezes é uma batalha íngreme. Às vezes é difícil de fazer. Muitas vezes é porque as pessoas não entendem que acessibilidade significa fazer coisas para os seres humanos e descobrir sobre os problemas que os seres humanos têm com o seu produto e não apenas para ser compatível. No final da aula, você vai embora com a idéia de que há muitas pessoas lá fora que vêem o produto de forma diferente do que você vê. Há coisas que você pode fazer para garantir que essas pessoas não sejam bloqueadas e se tornem possíveis clientes e usuários extras do seu produto. Você também vai descobrir que há um monte de coisas que já vem com o navegador que você está usando que permite que você teste para essas necessidades e certifique-se de que seu produto que você construiu está disponível para as pessoas lá fora. Espero que esta aula seja para qualquer um que tenha pensado em acessibilidade e tenha vindo a construir produtos acessíveis com uma equipa de desenvolvimento e com uma equipa de testes, mas ainda não tomou medidas. O que eu estou dizendo aqui é que, como um desenvolvedor, tomando as habilidades que você aprende nesta aula, você vai realmente tornar muito mais fácil trabalhar com a equipe jurídica, trabalhar com a equipe de desenvolvimento e trabalhar com o equipe de testes porque você terá feito a coisa certa antes de você realmente obter o teste de volta e ter que refazê-lo e corrigir as coisas novamente. Para nos ajudar, construí um projeto que é um site que tem alguns problemas de acessibilidade, alguns deles não são óbvios. Eu também criei uma versão fixa desse site que você também pode baixar e você pode dar uma olhada no que eu fiz para contornar esses problemas. Por favor, vá aos fóruns de discussão depois e discuta isso. Discordo de mim. Você pode encontrar uma maneira melhor de corrigir isso, ou você pode descobrir que há problemas com as soluções que você tem em seus próprios produtos e outras pessoas podem ajudá-lo. 2. Acessibilidade e porque ela importa: Nesta primeira lição, vamos falar sobre o que é acessibilidade e por que isso importa. Há muitos mitos sobre acessibilidade. Há muitos medos sobre acessibilidade. Às vezes é visto como algo que pode ser automatizado, o que não é. Queremos ter certeza de que estamos começando com o pé direito, entendendo a acessibilidade e não apenas tentando fazê-lo. Quando se trata de acessibilidade na web, as pessoas cometem erros simples que têm consequências desastrosas. Um dos maiores problemas que encontramos por aí é que continuamos tendo mídias como imagens sem textos alternativos. Parece que não é um problema. As pessoas podem ver a imagem. Mas se você é cego, você não pode ver a imagem e você não sabe o que é a imagem. Mas se tiver um texto alternativo, isso seria traduzido para você. É muito simples fazer a coisa certa. É muito fácil esquecer isso. Nossa própria experiência não é o que nossos usuários finais têm e o que ninguém mais além de nós temos. Como se eu pudesse ler o site alemão, você provavelmente não pode. Eu posso ler um site francês, provavelmente outras pessoas não podem ler isso, então eles precisam deles traduzidos para você. Essas necessidades são diferentes das suas. Você pode ver, isso é ótimo. Coloque um texto alternativo para pessoas que não podem ver. Você tem um vídeo lá fora que realmente tem um bom som e realmente tem boas imagens, mas se alguém é difícil de ouvir, eles provavelmente não sabem o que está acontecendo. Certifique-se de que os vídeos têm legendas. Você vai descobrir que isso é algo que você pode se beneficiar também. Se você está, por exemplo, em um pub e há uma televisão lá em cima e a música está gritando alto, você realmente aprecia essas legendas porque você entende o programa sem ter que dizer ao barman para virar Desligue a música e ligue a TV, que eles não farão por você. Da mesma forma quando você liga legendas em filmes estrangeiros, você provavelmente pode aprender a língua melhor dessa forma. Colocar esse pequeno esforço extra para garantir que usuários finais com habilidades diferentes das suas possam consumir seus produtos, na verdade multiplica seus usuários finais. Ele garante que todos possam usar o produto e muitas vezes é apenas uma coisa simples de colocar lá, como um texto alternativo para uma imagem, como uma legenda para um vídeo, ou certificar-se de que seu produto tem um tamanho de fonte que não é realmente minúsculo, mas realmente bom para ler mesmo em um telefone celular ao sol. Quando se trata de táticas, acho que a primeira coisa a pensar é colocar-se na pele de seus usuários finais. Não use apenas o seu produto no grande computador que você tem com uma grande resolução e a conectividade rápida à Internet, obtenha um telefone celular ruim com uma conectividade ruim, corra para fora na floresta e veja seus produtos lá. Então você vai perceber que não é tanta alegria esperar por essa animação de 50 megabytes antes de você realmente pode fazer algo. É importante que você entenda as necessidades de seus usuários desativando as imagens de tempos em tempos. Por exemplo, desligue o som de um vídeo ou de uma animação e perceba, ainda faz sentido? Você pode configurar seus ambientes de desenvolvimento para ter certeza de que quando você esquecer, por exemplo, um texto alternativo ou uma imagem, ele lhe dá uma linha sinuosa e diz que isso é um problema. É irritante ter problemas enquanto você desenvolve, mas, ao mesmo tempo, é muito menos problemático que quando se trata de seus usuários finais ou de seus testadores e você passar por mais uma rodada de construção da coisa. Para colocar você no clima certo para esta aula, eu quero que você dê uma olhada nos recursos de acessibilidade que vêm com sistemas operacionais e navegadores já lá fora, que as pessoas usam para alterar seu produto e, na verdade precisa mudar seu produto também para que eles possam consumi-lo. Isso começa com o redimensionamento de sua fonte em seus sites até 400 por cento. Parece assustador, mas é disso que as pessoas precisam. Certifique-se de que o seu produto ainda funciona dessa forma. Você também pode dar uma olhada em alguns dos novos recursos em sistemas operacionais, como modo escuro e modo de luz. Há um modo de alto contraste no Windows que é usado por até seis por cento dos usuários ou Windows, há alguns milhões de pessoas lá fora. Você verá que seu site parece completamente diferente. Você provavelmente não sabia disso, mas é algo a considerar. Outro dia, por exemplo, eu tinha um teclado que quebrou em mim. Uso a maneira de falar com o computador para começar a ditar minhas mensagens. Isso é algo que muitas pessoas precisam lá fora também. No passado, isso significava que eu tinha que comprar algum software extra que ficou desatualizado, hoje em dia só vem com sistemas operacionais e você pode experimentá-lo sozinho. Dê uma olhada em torno de seu sistema operacional e seu navegador e veja o que você pode ligar e desligar que faz a diferença para as pessoas com deficiência e faz você entender suas necessidades muito melhor também. 3. Ferramentas de acessibilidade automatizadas: Vamos dar uma olhada em uma dessas ferramentas que fornecem um relatório automatizado e ver até onde isso nos leva. Este é um produto chamado Acessibilidade Insights, que estou usando todos os dias no trabalho também. É uma extensão de navegador que você pode instalar e fornece todas as informações sobre o que está acontecendo na acessibilidade e quais problemas seu site tem. Você vai a um site que tem problemas de acessibilidade e você quer testar, você tem este pequeno ícone aqui que permite que você execute um FastPass sobre ele. Uma vez que você faz isso, você realmente recebe um relatório que mostra todos os problemas que ele encontrou e ele realmente diz onde na página eles estão também. Isso explica a você que há realmente instâncias falhadas, sete delas. Há um problema de contraste de cor. Há um problema de imagem alt onde as imagens não têm texto alternativo. Há um problema de etiqueta em que um formulário preenchido não tem uma etiqueta. Ele também mostra na tela onde esses problemas estão e o que eles realmente significam. Se você expandir as informações, você aprenderá mais informações sobre contraste de cores onde você pode aprender onde isso é um problema, quais padrões da Web realmente estão definindo-o, isso também é um requisito legal, e então realmente qual parte da página tem esse problema e como corrigi-lo. Isso é ótimo porque isso não é apenas dar um relatório, mas também dizer os próximos passos. Mas agora, é importante saber que esses testes automatizados só recebem uma parte da página. Eles veem a página ou experimentam a página uma maneira e seus usuários finais experimentam a página de várias maneiras. Isso é algo a considerar. Computadores não podem nos dizer quando algo está acessível. Você precisa interagir com a página como seus usuários finais fazem. É assim que você realmente descobre os problemas de acessibilidade. Webhint também é um projeto de código aberto que realmente testa problemas de acessibilidade, problemas desempenho e assim por diante e assim por diante. Ele tem uma extensão de navegador, mas onde eu uso é realmente mais interessante, que está dentro do meu editor. Para testar algo com Insights de Acessibilidade, você precisa implantar o site e testá-lo lá. Este diz que enquanto você está construindo algo, que algo está dando errado. Por exemplo, o elemento de entrada que não tem um rótulo aqui tem uma linha rabiscada sob ele agora. Quando eu passar isso no meu editor, ele realmente me diz que cada elemento de entrada precisa de um rótulo. Eu nem cometi os erros que eu tenho que testar mais tarde tendo essa extensão dentro do meu editor de código do Visual Studio. Instale esses dois e você está bem no caminho para realmente fazer alguns testes de acessibilidade adequados. 4. Testando a acessibilidade de cor e texto: Nesta lição, vamos falar sobre acessibilidade de texto e cores em nosso site e vamos aprender que o que vemos na tela não é o que outras pessoas veem e às vezes é bastante assustador ver como as pessoas usam nossos produtos, mas é importante que nós os construamos, que eles funcionem para esses ambientes também. Vamos dar uma olhada em nosso site e nosso site de teste agora e chutar os pneus e ver onde realmente encontramos problemas com acessibilidade de cores. A primeira coisa quando eu testo qualquer site para problemas de acessibilidade é aumentar o tamanho da fonte. Isso é facilmente feito com Command plus ou Control plus. Na maioria das vezes você provavelmente terá encontrado que, bem no passado, você vai até 125 por cento e você está feliz que tudo funciona, mas isso não é suficiente. A maioria dos usuários finais lá fora que realmente precisam de um zoom vai até 400 por cento. Isso é, na verdade, um requisito legal a partir de julho deste ano em 2021 que você tem que ser acessível com fator de zoom de 400 por cento. Isso significa que você só pode rolar em uma direção e você não precisa rolar em duas direções para entender o que está acontecendo com o site. Se você der uma olhada neste site agora, na verdade, ele é muito bem nesse fator de zoom. Mas algumas das coisas que parecem muito legais no fator de zoom normal ficam realmente irritantes nisso. Como se tivéssemos essa animação na navegação aqui que parece muito legal se eu estiver no meu modo de zoom normal, mas é realmente super irritante uma vez que eu realmente entrar neste modo 400 por cento. Também quando eu clico em todas essas coisas e suavizar esta rolagem para baixo, o que é uma coisa muito legal para fazer em CSS agora. Mas em um modo de 400 por cento, isso é realmente mais irritante do que qualquer outra coisa. Outra coisa que eu gosto de fazer é realmente redimensionar a tela e ter certeza de que tudo flui bem. Para isso, abro as ferramentas do desenvolvedor e a primeira coisa que faço é simular um dispositivo de celular. Isso é algo que é ótimo de qualquer maneira, porque a maioria dos usuários finais lá fora terá um dispositivo móvel. Então você pode ver como o seu site funciona. Você já pode ver aqui que o cabeçalho está agora em duas linhas e se sobrepõe a outros elementos. Isso já é feio, mas não é um problema de acessibilidade. Mas se eu começar a rolar a página, de repente meu cabeçalho fixo que parece legal na resolução normal agora realmente sobrepõe a caixa de pesquisa e isso significa que ele não está realmente funcionando. Experimentar seu site em diferentes resoluções também encontra isso. Você também pode colocar isso juntos se você não simular um telefone celular, mas apenas um design responsivo e aumentar o tamanho da fonte, você vai realmente descobrir que há todos os problemas diferentes nesse ambiente também. Essa é a primeira coisa a fazer para ver se o seu produto está realmente disponível para pessoas com necessidades diferentes. Neste caso, as pessoas que realmente precisam de um zoom de 400 por cento. Eles são mais pessoas do que você pensa e eles devem estar realmente usando seu site, você não deve bloqueá-los. A próxima coisa a considerar é realmente contrastar e ver se você tem contraste de cor suficiente em todos os elementos que você tem em sua página. Para fazer isso, há duas maneiras. Uma das maneiras é realmente ir para a guia Problemas e as questões aqui acima aparecem sob este pequeno ícone. Diz que são sete questões na página. Se você clicar em um, você vai descobrir sob outro que há basicamente duas coisas que não têm contraste suficiente, dois elementos. Você clica sobre eles e você pode ver que é um Li.high, que é destacado agora na tela aqui também. Ele mostra que o contraste de cor não é bom o suficiente para isso. Precisamos fazer algo para fazer o contraste de cores lá. O outro é um p, que é todo o caminho até a tela. Para ir para aquele, você pode ir para este menu aqui e dizer rolar para a vista. Assim você vê que é realmente o rodapé aqui em baixo. Se você quiser corrigir esses problemas, se você quiser corrigi-los no próprio navegador, isso é realmente incorporado também. É algo que muita gente não sabe. Se você for para o p novamente aqui, você acha que há um fundo, uma cor de primeiro plano. Se você clicar na cor do primeiro plano, você verá no seletor de cores que há um relatório de que a taxa de contraste é 365. Isso não é bom o suficiente e ele realmente tem essa pequena seta ao lado dele dizendo que não é bom o suficiente. Você pode selecionar esse agora mesmo. No seletor de cores, você obtém duas linhas para dizer o quão alto você deve ir para ter certeza de que você tem contraste suficiente. Você também pode ser preguiçoso como eu e basta clicar em uma dessas cores aqui que são realmente recomendados para você. Se você mudar esse, você verá que o rodapé agora tem uma coloração melhor e que é realmente uma cor válida com contraste suficiente. O navegador não apenas informa no relatório que algo está acontecendo, mas você pode realmente usar a ferramenta diretamente para corrigi-lo e, em seguida, voltar para o seu CSS, colocar outra cor e certificar-se de que a acessibilidade é dada para o configuração de contraste dele. O painel de questões nos mostra problemas óbvios que estão lá, mas ele só vê o site em um estado. Ele realmente não reconhece que as pessoas podem fazer coisas diferentes para o site para ter estados diferentes. É aí que entra outra ferramenta chamada de inspetor. O inspetor é uma flecha aqui em cima. Se eu me mover agora pela página, ele me dá todas as informações sobre as diferentes ferramentas. Me dá as dimensões, me diz o que é. Voltaremos a isso em outra lição. Também me mostra o layout dele. Se ele tem realmente problemas de layout legal que você pode encontrar e inspecionar lá também. Mas o mais importante, ele realmente me diz os problemas de cor de algo também. Mostra-me que o contraste deste é bom o suficiente. Mas o contraste, por exemplo, sobre o elemento que olhamos anteriormente de que também o painel de questões relatado não é bom o suficiente. Em vez de conseguir uma marca de verificação, recebo este ponto de exclamação. O problema é, porém, que o inspetor só vê novamente um estado dele. Quando você toma por exemplo, a navegação aqui, diz que este azul escuro e branco é totalmente bom, há contraste suficiente. Mas se você se lembrar de usar o site, há esse estado de rollover que realmente torna uma cor diferente. Essa cor diferente, eu não sei se está acessível agora ou se tem contraste suficiente, porque assim que eu ligar o inspetor, ele não o aciona mais. Você pode contornar isso usando a simulação de estado nas ferramentas de desenvolvedor. Em qualquer elemento você pode acionar essa simulação de estado. Você pode dizer, por exemplo, o que parece se eu passar o mouse sobre ele? Agora ele tem o estado de pairar sem que eu tenha que passar o mouse sobre ele. Assim posso usar o inspetor para descobrir se tem contraste suficiente. Se você clicar nele agora e ir para o seletor de cores, você aprenderá que a taxa de contraste não é boa o suficiente e você deve escolher uma cor diferente. Isso é interessante quando se trata de interagir com diferentes elementos no site. Mas e se os usuários realmente têm uma maneira diferente de olhar para o site? Um deles é chamado de painel de renderização. Você pode realmente ativar isso indo para o menu ponto-ponto, ir para mais ferramentas e renderização. Assim você pode realmente ligá-lo lá em baixo. Ele faz todas as coisas legais hardcore para testar o desempenho. Mas, o mais importante, se você rolar todo o caminho para baixo, você pode simular diferentes modos do site dessa maneira. Agora, eu tenho um modo escuro aqui no meu computador porque eu gosto do modo escuro como a maioria das pessoas fazem hoje em dia, mas outras pessoas têm um modo de luz. Eu normalmente iria para o sistema operacional, transformar meu sistema operacional em modo de luz e ver como as pessoas veriam o site como. Mas esta simulação na dor de renderização permite que você faça isso de uma forma mais simples. Agora você pode ir para o esquema de cores preferido e transformá-lo em luz. Claro, algumas das coisas que pensávamos que estavam bem podem não estar mais bem. Você pode ver isso aqui em baixo onde o contraste para o amarelo e o vermelho estava totalmente bem no modo escuro, mas no modo de luz não é mais ou isso é o que eu estou assumindo agora. Mas novamente, é aqui que o painel de questões pode me ajudar. Agora vou simular o modo de luz e depois recarrego a página. Você vê que temos muito mais coisas que estão realmente tendo um problema de contraste de cor do que tínhamos antes. Nós tínhamos dois elementos antes, e agora temos seis elementos porque mudamos para outro modo do site. Nosso esquema de cores, nosso tema de luz precisa ser testado para questões de acessibilidade e cor também. Este não é o fim porque os usuários têm todos os problemas com seus olhos que queremos ter certeza de que trabalhamos também. Nas Ferramentas do Desenvolvedor, você tem uma coisa chamada emular deficiências de visão, que permite que você veja o site como pessoas com deficiências de visão diferentes veriam o site agora. A primeira coisa que você quer experimentar é visão turva. Isto é como os meus óculos sujos ou o sol a brilhar no meu telemóvel. Eu posso ver imediatamente que há alguns problemas aqui, como o cabeçalho parece compatível agora, que sombra, que parece muito legal quando eu posso vê-lo corretamente. Na verdade, não está ajudando a causa, mas impedindo-a. Além disso, os tamanhos de fonte podem não ser tão grande quanto eu quero que eles sejam para ser corretamente utilizável. Isso é algo que a visão turva já te dá. Você também pode ligar diferentes emulações como, cegueira de cor diferente como protanopia, deuteranopia e assim por diante e assim por diante. De repente você percebe que verde, amarelo e vermelho não fazem sentido porque nem todo mundo os vê como verde, vermelho e amarelo. Você também pode desativar todas as cores para ver se realmente há contraste suficiente em todas as coisas quando as pessoas não conseguem ver cores. São só algumas maneiras de começar. Agora é a sua vez. Eu te mostrei algumas coisas como resolver alguns problemas. Dê uma olhada, por exemplo, naquele vermelho, verde e amarelo, o que você poderia fazer sobre esse. Faça um pouco de redimensionamento, descubra mais alguns problemas. Há mais problemas nesse site que você pode não ter pensado ainda quando se trata de cores e texto. Você agora você o que fazer, você clica na guia problemas e realmente fornece as informações sobre problemas. Você pode realmente usar o inspetor e você pode usar a simulação para experimentar as coisas. Você pode fazer isso em qualquer produto lá fora, na verdade produtos que não estão na web, isso é executado em sua máquina local. É uma maneira fácil para você começar a garantir que todas as cores que você escolheu não são apenas bonitas, mas também acessíveis. 5. Testando a acessibilidade de interação: Nesta lição, vamos falar sobre interação com um site e garantir que estamos acessíveis. Há muitas maneiras de como as pessoas interagem com seu site. O mouse é o mais comum, mas também há usuários de teclado, há pessoas que podem piscar os olhos para ir de uma seção para outra. Você tem que se certificar de que seu site faz sentido para todos eles. Vamos falar sobre como testar isso, e como descobrir sobre problemas que estão em um determinado site, e como corrigi-los. Vamos dar uma olhada em nosso site e ver como ele funciona para alguém que usa apenas um teclado, que inclui usuários de leitores de tela e apenas pessoas que não podem usar um mouse. Nós podemos testá-lo nós mesmos simplesmente não usando nosso mouse, mas realmente usando o teclado. A maneira mais fácil é usar a tecla tab para ir de um elemento para outro, porque é isso que as pessoas fazem também. Há coisas mais evoluídas como Enter Key para enviar formulários e espaço para passar por diferentes seções. Mas não precisamos falar nisso, mas isso é algo que você pode procurar mais tarde. Se eu guia através da página agora, a primeira coisa que eu faço é destacar o campo de pesquisa, e ele tem essa borda em torno dele. Muitas pessoas pensam que esta é a nossa chave. Isso é muito necessário, não desligue isso. Muita gente vai te agradecer por isso. Vá para o botão ir, e lá vou tentar retornar se isso envia do formulário. Ele envia fora do formulário, ele não vai a lugar nenhum agora que 'por isso eu apenas rolou para baixo. Mas funciona com um teclado, então devemos ser felizes lá. Quando eu pressionar tabulação novamente, a primeira coisa que eu faço é realmente passar pelos links na página, e isso é um estranho porque, em essência, isso significa que este menu aqui em cima não está no fluxo, e deve estar no fluxo porque visualmente faz sentido usar esse para ir até as seções na página. Com um teclado, já estou na página. Quando eu vou agora mais para cima, eu não sei onde eu estou porque o menu só tem um estado de foco. Não tem um estado de foco. Com um teclado, se eu acessá-lo, eu obtenho o estado de foco, com um foco, eu vou apenas obter um estado de mouse. Um usuário de teclado não saberia onde eles estão no momento, exceto por saber que eles estão em um link e um leitor de tela iria ler para você que o seu no link, mas você não tem certeza de que você está no menu agora, mas em algum lugar outra coisa. A próxima coisa a perceber aqui é que se eu passar pelo menu, estou novamente em outra caixa de pesquisa, estou na outra caixa agora, mas há chaves acima dela. O que está acontecendo aí? Estas teclas não são acessíveis pelo teclado. Com um mouse, posso clicar nos 200, 50 e 100. Com um teclado, não consigo acessá-lo. Tabbing novamente me faz não doar botão, mas na verdade me leva para a navegação principal. Você vê que há alguns problemas nesse site que têm a ver com navegação pelo teclado, e agora nós tentamos descobrir o porquê. Bem, a ferramenta para usar novamente é o inspetor, tentamos isso mais cedo para descobrir sobre problemas de cor. Agora podemos usá-lo para realmente descobrir sobre problemas de interação. Se eu ir, por exemplo, no elemento de entrada aqui, ele me diz que é um papel da caixa de pesquisa e que é focável no teclado. É por isso que eu poderia tocar nele com o teclado. Mas não tem nome. A razão é que foi algo que foi sinalizado pelos problemas anteriormente, que temos um rótulo no código-fonte, mas não está conectado ao elemento. A entrada não está dentro da caixa de pesquisa ou o rótulo não tem um atributo for e a entrada não tem um ID. Este é um rótulo que é realmente usado erroneamente e não faz nenhum sentido. Para corrigir isso, você pode fazer isso sozinho ou olhar para a parte de correção do site, é bastante fácil. Uma coisa interessante, porém, é, quando você pensa nos testes automatizados que tivemos anteriormente, que a forma aqui que acabamos de aprender como sendo completamente inacessível para usuários de teclado não é sinalizada porque aqui nós usou um rótulo, e se você clicar no rótulo, você pode realçar o campo do formulário, mas ele não faz parte de um formulário. Não sabia que esses botões são inacessíveis porque não são botões, são apenas algo. O que são eles? Novamente, estamos usando o inspetor e nós rolamos sobre ele, e nós descobrimos que o papel é genérico e que não é focável no teclado porque se você olhar para o código-fonte, nós realmente descobrimos que estes são DIFS. Estes DIFS são algo que as pessoas gostam de fazer porque eles são super estilizados e eles não têm qualquer estilo fora da caixa como este esboço, por exemplo, mas eles não significam nada. Como eu fiz com que eles realmente clicáveis para selecionar essas coisas diferentes? Você pode tentar isso também indo para os ouvintes de eventos e seguindo isso, e você pode ver que eu escrevi algum JavaScript para torná-los em botões diferentes. Mas com um usuário de teclado ou sem JavaScript, esse formulário não estaria acessível. Em vez disso, eu deveria ter usado botões ou botão de rádio. Mais uma vez, veja a versão fixa do site para ver como contornar isso. Muitas vezes você vai achar que você escreve algum JavaScript extra apenas porque você usou o HTML errado. Na maioria das vezes, não é necessário fazer isso porque JavaScript é sempre mais frágil do que HTML porque HTML lhe dá um monte de coisas grátis diretamente do navegador, e você pode descobrir isso em ferramentas de desenvolvedor também aqui. Em geral, você pode passar por todos os elementos da página e descobrir se o seu teclado focalizável, que nome e qual o papel que eles têm. Mas se você quiser saber isso sobre todo o documento, você pode usar a árvore de acessibilidade aqui também. O documento que você tem vem em duas formas. Ele vem na árvore DOM, que é realmente gerado aqui, que vem de Watson via HTML, e também o que JavaScript faz com o HTML. O que está na tela e qual é a ordem da tela, é também o que o CSS nos diz para fazer. Por exemplo, percebemos que o conteúdo aqui é realmente anterior a este por algum motivo, mas ele ainda olha para ele, e não sabemos como fazer isso. Na árvore de acessibilidade, isso é algo que uma tecnologia assistiva como um leitor de tela obteria. Esta é outra exibição da página que realmente montado antes que o resto do documento esteja lá. O que quer que você faça em seu HTML e seu JavaScript mais tarde pode não acabar lá. Se você passar pelos diferentes elementos na página, e você olhar para a árvore de acessibilidade ao lado dela, você pode descobrir se algo é genérico, ou tem um nome, ou se tem uma função, e se também acessível. Essa é uma maneira muito enraizada de passar por todo o documento. Como a tecnologia assistiva vai por ordem de origem, na fonte do documento, o documento HTML, o que vem primeiro é lido primeiro, e segundo, e assim por diante e assim por diante. Na tela, isso pode parecer completamente diferente, e não sabemos a menos que olhemos para a fonte também, que é bastante assustador porque ninguém quer ler HTML. Construímos esta pequena ferramenta chamada Visualizador de Ordem de Origem curto. Se esse estiver ativado, você pode realmente clicar em qualquer um dos elementos aqui e você pode obter a ordem de origem exibida para você. Se você entrar na seção, agora aprendemos que a seção com o conteúdo é a primeira, a navegação é a segunda, e a navegação principal é a terceira, o que também achamos confuso anteriormente. Isso é algo que você pode usar para descobrir sobre esses pequenos problemas. Outra coisa que quero mostrar a vocês é que falamos sobre Acessibilidade Insights anteriormente, e ele tem um recurso muito legal que ajuda você nos testes de acessibilidade do teclado também. Além do FastPass que usamos anteriormente, você também tem ferramentas ad hoc. Essas ferramentas ad hoc são sobreposições sobre a página que permitem que você mostre o que está acontecendo na página em termos de interação do teclado e em termos de outras coisas como cor também. A primeira coisa a experimentar são pontos de referência. Landmarks é uma coisa muito boa para dar aos usuários de teclado, porque isso significa que eles podem saltar diretamente para essa seção. Se eu disser que eu quero ir para o próximo elemento de navegação, se o elemento de navegação tem papel de navegação, ele pode encontrá-lo. Se é apenas um DIF, não pode encontrá-lo. Isso é realmente bom ter para usuários de teclado e usuários de leitores de tela para navegar mais rápido pelo seu site. Outro interessante é que a aba pára aqui. Como passamos por isso mais cedo, só poderíamos encontrá-lo nós mesmos, mas as paradas de guia na verdade são agora visualizadas, então eu posso descobrir que eu estou na caixa de pesquisa primeiro, em seguida, adicionar botão, e assim por diante e assim por diante. Ele não se sobrepõe sobre a página. Esta página não é tão complexa, mas quando você gosta de aplicativos ou páginas muito complexas, isso pode parecer realmente brutal. É uma ótima maneira de fazer uma captura de tela para mostrar às pessoas quanto trabalho é para usuários de leitores de tela ou usuários de teclado passar por seu aplicativo. Coloque isso em um documento, coloque isso em uma apresentação, e nos mostre, isso é o que fizemos, podemos ter algum tempo de engenharia para consertá-lo? Claro, quando você usa o Visualizador de Ordem de Origem e tenta você mesmo com a guia, você não precisa realmente fazer isso. Agora é a sua vez, dê uma olhada nas ferramentas do desenvolvedor, dê uma olhada na fonte ou no visualizador. Experimente estes sites que você tem. Experimente o seu produto com um teclado. Saiba mais sobre navegação por teclado. Tabping é apenas uma dessas coisas. Ativar barras de espaço ou pressionar “Enter” para enviar formulários é outro. Saiba como seus usuários finais que realmente precisam usar um teclado interagem com seu site e,em precisam usar um teclado interagem com seu site e, seguida, dê uma olhada em seus produtos e veja onde eles ficam presos. Use essas ferramentas para sua vantagem e você terá um produto acessível agradável. 6. Testando a mídia e a acessibilidade de imagem: Nesta lição, vamos falar sobre mídia, principalmente imagens e animação em seus sites. Essas coisas são ótimas, mas podem ser uma barreira enorme, então vamos descobrir como usá-las de forma responsável. Quando se trata de mídia e acessibilidade, é mais importante o que você pode tirar do que o que você pode adicionar. Quando tiver uma imagem, é melhor certificar-se de que há um texto alternativo. Você tem que assumir que a imagem não pode ser vista. Ou não pode ser carregado ou as pessoas não podem vê-lo, então o texto alternativo faz muito sentido. O mesmo com o vídeo. Incorporar um vídeo é muito fácil nos dias de hoje, mas é realmente bom se ele também tem uma transcrição. A maioria dos serviços de vídeo, como o YouTube ou outros, também permite que você faça isso automaticamente. Isso é algo a considerar para ligar sempre. Claro, será realmente ótimo se você tiver uma transcrição para o vídeo e aparecer em vez disso, mas é algo que é um passo extra a dar agora. Quando se trata de animações, também é outra coisa onde vem com moderação. É como se fosse ótimo tê-las, mas elas podem ser muito confusas para muitas pessoas. Vamos dar uma olhada no que nosso site de demonstração tem, por que eu fiz isso, e como eu posso realmente torná-lo mais acessível. Na página de demonstração que temos para esta classe, nós realmente temos algumas animações. Todos eles frívolos, mas a razão é que eu queria usá-los. Todos sabem que podem passar horas com animações CSS ajustando coisas. É muito divertido. No meu caso aqui, temos a animação na navegação que apenas mostra o destaque, que parece muito legal. Se você realmente rolar para baixo até algo, ele realmente rola suavemente para baixo em vez de apenas saltar para ele. A seção que você clica para também pisca um pouco. Um botão “Mais” aqui também fica maior quando eu vou nele. Tudo parece frívolo, mas às vezes a animação pode realmente fazer a diferença onde um botão Comprar ou algo que aparece para onde você vai, faz sentido para você. O problema é agora, porém, que muitos usuários podem se confundir com isso. A outra coisa dentro que eu tenho são muitas imagens como imagens de gatos ou cães, que é ótimo, mas nem todos eles têm textos alternativos como descobrimos anteriormente. Novamente, a maneira mais rápida de descobrir isso é usar o inspetor. Se eu passar por cima disso agora, na verdade não tenho nome e papel. É apenas imagem de papel, tem teclado focável, mas não há nome para ele. Esta imagem tem um texto alternativo, então na verdade diz foto do Socke, que é o cão da nossa família olhando para a câmera. Isso faz sentido. Se não consigo ver, tenho uma explicação de que essa imagem está lá. Na verdade, é muito simples descobrir se uma imagem tem um texto alternativo ou não usando esse, e é um problema simples de evitar. Já falamos sobre isso na introdução. Esperemos que você tenha pensado nisso no futuro próximo também quando estiver fazendo coisas novas. Quando se trata de animações, há um passo muito importante que temos que considerar hoje em dia é que a maioria dos sistemas operacionais vem com um modo chamado movimento reduzido que permite desativar as animações no sistema operacional. Isto é duas vezes. Um é para a performance. Muitas pessoas perceberam que a duração da bateria de seu celular morre rapidamente se sites animar um monte de coisas. Claro, é uma questão de acessibilidade. Pessoas com uma cabeça batida ficam enjoadas com animações. As pessoas podem ter problemas de leitura quando as animações os distraem, e as pessoas geralmente podem se distrair e não sabem mais onde estão assim que algo começa a piscar. Todas as coisas que colocamos lá devem ter um cheque ao lado deles para garantir que só apareçam quando são realmente desejados. Você pode fazer isso em CSS usando uma consulta de mídia chamada movimento reduzido. Novamente, você pode testar isso indo para o sistema operacional e desligar todas as animações e voltar para o seu site e recarregá-lo. Mas queríamos facilitar para você, então também fizemos uma das emulações no painel Renderização. Você vai para prefere movimento reduzido, e você diz que prefere movimento reduzido, reduzir. Agora, você clica na navegação, você verá que ele salta. Não faz mais o fluxo. Ele não faz a rolagem lenta para baixo para a outra seção. É só saltar para ele, o que parece feio para nós, mas para alguém que está confuso com animação, é uma coisa muito, muito agradável de se ter. A navegação ainda mostra a animação, então isso é um problema. Na versão fixa da página, ele não funciona mais, e você pode dar uma olhada em como eu fiz isso. Há algumas coisas nas ferramentas de desenvolvedor que ajudam você a verificar sua acessibilidade de mídia. Você pode usar o inspetor para ver se uma imagem tem um texto alternativo. Você também pode usar a simulação de animação de redução para garantir que suas animações sejam exibidas somente para aquelas que podem e desejam usar animações. Agora uma coisa que você deve ter visto que na verdade eu não falei ainda é que nos elementos, no HTML, você tem uma linha rabiscada aqui sob essa imagem agora. Isso significa que há aí um problema de acessibilidade. Se você clicar com a tecla Shift pressionada, você realmente pula para o painel de acessibilidade, para a listagem dos problemas, e esse lhe diz exatamente o que há de errado com esse. No entanto, este é o HTML que já foi gerado, que já está feito. E se você quiser fazer isso enquanto está escrevendo HTML? Isso nos traz de volta a algo que falamos anteriormente, que é a extensão webhint para o Visual Studio Code. Se você entrar em seu editor, você verá as mesmas linhas rabiscadas sob peças HTML problemáticas. Assim que você consertá-los então realmente estes rabiscos vão embora. Mais uma vez, se você passar pela dor problemas e você quiser vê-lo diretamente lá, você pode passar o mouse sobre ele e explicar para você qual é o problema neste caso que, essa imagem não tem um texto alternativo. Se você digitar um texto alternativo, ele desaparece. Isto é irritante. Isso não é bonito e na verdade significa que você quer corrigi-lo. Isso é algo que você pode instalar no Visual Studio Code e também no visualizador de origem das ferramentas de desenvolvedor, e agora mostra exatamente onde estão seus problemas. Nesta lição, falamos sobre imagens sem textos alternativos que você deve escrevê-lo. Conversamos um pouco sobre vídeos, mas não mostramos uma demo lá. Mas, na verdade, tente isso. Faça upload de um vídeo para uma plataforma, certifique-se de obter uma transcrição, e veja se você pode obter a transcrição de alguma forma para mostrar com o vídeo, se ele não fizer isso automaticamente. Falamos sobre movimento reduzido, e falamos sobre diferentes estados, o que as pessoas podem ver no seu site. Certifique-se de dar uma olhada no movimento reduzido porque é uma coisa muito poderosa de se fazer. Pense nisso, se alguém não quer ver animações ou não consegue ver animações, e você envia um GIF animado de dois megabytes, isso não faz sentido. Certifique-se de usar essa consulta de mídia de movimento reduzida CSS para bom, e realmente certifique-se de que as pessoas não precisam carregar coisas que não querem ter e não podem lidar com. 7. Considerações finais: Bem, esse é o fim da aula e espero que tenha aprendido algo sobre acessibilidade e interação. Essa acessibilidade não pode ser automatizada, mas muitos dos problemas só aparecem quando você começa a interagir com a página, e você começa a simular a maneira como as pessoas mudam seu site para atender às suas necessidades. Há o site que temos lá dentro que tem alguns erros lá, então dê uma olhada nele , tente corrigi-los você mesmo, e dê uma olhada no site fixo também, e se você encontrar algo que eu não tenha pensado de, e eu tenho certeza que há algo lá dentro que eu não tenha pensado, venha para os fóruns de discussão, fale conosco sobre isso e saiba mais sobre acessibilidade.