Acessibilidade no Chrome DevTools
Publicados: 2022-03-10Passo muito tempo no DevTools e, ao fazer isso, aprendi sobre alguns dos recursos mais 'ocultos' do DevTools e adoraria compartilhar alguns deles com você neste artigo - especificamente sobre acessibilidade.
Este artigo usa o Google Chrome, pois é um navegador que uso e com o qual me sinto confortável. Dito isto, Firefox, Safari e Edge fizeram grandes avanços em suas ferramentas de desenvolvedor e definitivamente têm alguns ótimos recursos relacionados à acessibilidade.
Você já deve estar familiarizado com o DevTools, mas aqui está um lembrete rápido de como inspecionar um elemento em uma página da web:
- Abra uma página da Web que você está interessado em inspecionar, no Google Chrome
- Use o atalho Cmd + Shift + C ( Ctrl + Shift + C no Windows)
- Seu ponteiro está no modo Inspecionar Elemento, vá em frente e clique em um elemento na página da web
Assim, você abriu o DevTools e começou a inspecionar os elementos. Os diferentes painéis correspondem a diferentes recursos, por exemplo, depuração de JavaScript, desempenho e assim por diante.
Existem recursos relacionados à acessibilidade espalhados por toda parte, então vamos explorar o que eles fazem, onde moram e como usá-los.
Relação de contraste
Este é um recurso para verificar se o texto inspecionado tem um contraste de cor satisfatório em relação à cor de fundo.
Normalmente, um alto nível de contraste entre a cor do texto e a cor de fundo subjacente significa um texto mais legível para usuários de diferentes habilidades. Além disso, ele ajuda os usuários a ler seu texto em uma variedade de condições ambientais. Considere estes exemplos que podem afetar a forma como um usuário percebe a legibilidade do texto:
- Olhando para uma tela ao ar livre com muita luz solar
- Um dispositivo móvel reduziu o brilho da tela para preservar a vida útil da bateria
“A intenção é fornecer contraste suficiente entre o texto e seu plano de fundo para que possa ser lido por pessoas com visão moderadamente baixa.”
— Entendendo o Critério de Sucesso 1.4.3: Contraste (Mínimo)
O uso da ferramenta de taxa de contraste pode nos dar uma resposta imediata de sim/não para a pergunta: este texto atende ao padrão mínimo de contraste. O uso dessa ferramenta pode ajudar a influenciar o design e o esquema de cores do seu site, o que pode levar a um conteúdo mais legível para usuários com baixa visão.
Disponível na ferramenta de seleção de cores, o recurso de taxa de contraste pode informar se um requisito mínimo de contraste foi atendido. Para acessar este recurso:
- Inspecione um elemento de texto com o DevTools
- Encontre a propriedade de cor no painel Estilos e clique no pequeno quadrado colorido para abrir a ferramenta de seleção de cores
- Clique no texto que diz 'Taxa de contraste' que apresenta mais informações sobre este assunto
As três proporções representam:
- Sua taxa de contraste atual
- A taxa de contraste mínimo (AA)
- A relação de contraste aprimorada (AAA)
Como um exercício para você mesmo: arraste a ferramenta seletora de cores circular pelo espectro de cores e observe os pontos em que o contraste mínimo e as taxas de contraste aprimoradas são satisfeitas.
Esse recurso também pode ser relatado a você por meio de um Relatório do Lighthouse, abordado na seção Lighthouse deste artigo.
Inspetor de Acessibilidade
Isso se refere a um painel DevTools que permite visualizar várias propriedades de acessibilidade e informações ARIA para nós DOM.
ARIA refere-se a uma coleção de propriedades, normalmente usadas em HTML, que por sua vez torna seu site mais acessível a indivíduos de diferentes habilidades. Vale a pena usá-lo em seus próprios sites, mas é necessário entender os fundamentos da acessibilidade na Web para garantir que você o use de uma maneira que ajude seus usuários.
Por exemplo, considere o seguinte trecho de HTML:
<p class="alert" role="alert"> That transaction was successful </p> Um dispositivo de assistência, como um leitor de tela, pode usar a propriedade role="alert" para anunciar essas informações ao usuário. O painel Acessibilidade no DevTools pode selecionar essa propriedade ( role ) e apresentá-la a você, para que fique claro quais propriedades relacionadas à acessibilidade um elemento possui.
Validar as informações que você vê neste painel pode ajudar a responder à pergunta: “Estou codificando acessibilidade incorretamente”, seja sintática ou estruturalmente, lembre-se de que aplicar técnicas de acessibilidade com a sintaxe correta e ter um site acessível são duas coisas diferentes coisas!
Para começar a usar isso, você pode abrir o painel Acessibilidade com um elemento inspecionado:
- Inspecione qualquer elemento na página, por exemplo, um hiperlink ou caixa de pesquisa
- Abra o painel Acessibilidade que se encontra no Painel de Elementos
Dica bônus : em vez de ter que localizar o painel (não está aberto por padrão), procuro por 'Mostrar acessibilidade' no menu de comando ( Cmd + Shift + P ).
Você vai encontrar um monte de informações aqui, como:
- Uma árvore de acessibilidade (um subconjunto da árvore DOM)
- Atributos ARIA
- Propriedades de acessibilidade computadas (por exemplo, é algo focalizável, é editável, passa na validação do formulário)
Dependendo do elemento inspecionado, algumas dessas informações podem não ser aplicáveis, por exemplo, talvez um elemento legitimamente não precise de atributos ARIA.
Assim como a maioria dos recursos do DevTools, o que você vê neste painel é 'ao vivo' — as alterações feitas na Árvore DOM do Painel de Elementos são refletidas de volta para este painel imediatamente, tornando-o útil para corrigir um atributo ARIA com erros ortográficos, por exemplo.
Se você estiver confiante no uso de Acessibilidade, possivelmente porque está usando uma ferramenta de teste automatizada alternativa, como o axe, talvez não use esse painel com muita frequência, e tudo bem.
Se você estiver interessado em aprender mais enquanto observa sites do mundo real, fiz um vídeo de 14 minutos sobre depuração de acessibilidade com o Chrome DevTools.
Farol
O Lighthouse é um verificador de sites automatizado que pode verificar as práticas recomendadas, acessibilidade, segurança e muito mais.
Se você fez alguma leitura sobre a teoria da acessibilidade e deseja aprender como aplicá-la efetivamente ao seu próprio site, esta é uma ótima ferramenta para usar, pois é literalmente uma interface de apontar e clicar - sem necessidade de instalação. Além disso, todas as suas auditorias são muito instrutivas, informando o que falhou e por que algo falhou.
Seguir as sugestões desta ferramenta certamente ajudará a melhorar a acessibilidade do seu site.
Ao verificar a segurança, as práticas recomendadas gerais da Web, o desempenho é útil. Vamos nos concentrar em como executar uma auditoria de acessibilidade no Lighthouse:
- Navegue até o painel Lighthouse no DevTools
- Desmarque todas as categorias, mas mantenha 'Acessibilidade' marcada
- Clique em 'Gerar Relatório'
- No relatório resultante, clique nas diferentes sugestões para saber mais sobre elas
Se você quiser saber mais sobre Acessibilidade (eu certamente quero!), clicar em auditorias com falha, mas até mesmo as auditorias aprovadas são uma ótima maneira de aprender, já que quase todas as auditorias são vinculadas à documentação dedicada do desenvolvedor da Web sobre a auditoria em si e por que é importante.
Na maioria das vezes, as páginas de documentação de auditoria são extremamente sucintas e eu as recomendo. Vamos dar uma olhada na documentação de auditoria para garantir que um elemento <title> esteja presente. Especifica:
- Como a auditoria de título do Lighthouse falha
- Como adicionar um título
- Dicas para criar ótimos títulos
- Exemplo de um título a não usar, junto com um título que vale a pena usar
E no caso da documentação do título do documento, foram necessárias apenas 300 palavras para explicar esses 4 pontos acima.
Uma coisa interessante a ser observada, diferentemente do painel Acessibilidade, as Auditorias do Lighthouse são muito instrutivas por padrão, tornando o painel do Lighthouse um ótimo lugar para se visitar quando você está apenas começando.
À medida que você se torna mais avançado na criação de páginas acessíveis, pode se afastar das auditorias predefinidas e passar mais tempo no painel de acessibilidade.
“
Emular deficiências de visão
Este é um recurso do DevTools para aplicar deficiências de visão, como visão turva, à página atual.
“Globalmente, aproximadamente 1 em 12 homens (8%) e 1 em 200 mulheres têm deficiências de visão de cores.”
— Requisitos de acessibilidade para pessoas com baixa visão
Você vai querer usar esse recurso para ajudar a garantir que seu site atenda às necessidades de seus usuários. Se o seu site estiver exibindo uma imagem importante, você pode descobrir que essa imagem é difícil de compreender para alguém com tritanopia (visão azul e amarela prejudicada) ou até mesmo difícil de compreender para alguém com visão turva.
“Alguma baixa acuidade visual pode ser corrigida com óculos, lentes de contato ou cirurgia – e outras não. Portanto, algumas pessoas terão visão embaçada (baixa acuidade visual), não importa o que aconteça.”
— Requisitos de acessibilidade para pessoas com baixa visão
Por exemplo, no caso de uma imagem, você pode descobrir que há uma imagem de resolução mais alta disponível para download enquanto emula a visão turva via DevTools, em vez de um usuário com visão turva poder usar e, por sua vez, compreender o que a imagem está mostrando. Isso exigirá algumas habilidades de resolução de problemas baseadas em design/UX – possivelmente de você/de seus colegas – mas pode ser a diferença entre atender às necessidades de seus usuários ou não atender às necessidades deles.
️ Observe : A imagem a seguir está parcialmente desfocada, para demonstrar o recurso de emulação 'Visão borrada' do DevTools.
Você pode experimentar esse recurso com as seguintes etapas:
- Abra o menu de comando ( Cmd + Shift + P ou Ctrl + Shift + P no Windows)
- Procure e selecione 'Mostrar renderização'
- Selecione uma deficiência de visão como 'Visão embaçada' na seção Emular deficiências de visão no Painel de renderização.
Aqui estão alguns exemplos de deficiências de visão que você pode aplicar via DevTools:
- Visão embaçada
Onde a visão é menos precisa - Protanopia
Daltonismo resultante da insensibilidade à luz vermelha - Tritanopia
Visão azul e amarela prejudicada
Recursos de emulação como esse não explicarão totalmente as diferenças sutis em como essas deficiências se manifestam com os indivíduos, muito menos a ampla gama de deficiências de visão existentes. Dito isso, esse recurso ainda pode nos ajudar, como desenvolvedores da Web, a entender e melhorar a acessibilidade de nossas páginas.
Dica de ferramenta de inspeção do elemento
Esse recurso se refere a uma dica de ferramenta aprimorada que agora apresenta informações relacionadas à acessibilidade quando você usa o recurso 'Inspecionar elemento'. É um recurso sutil, mas ainda muito importante, pois pode informá-lo de como os elementos são acessíveis, em uma rápida olhada.
Digo que é importante porque, no caso dos outros quatro recursos mencionados neste artigo, eles exigem ação intencional de nossa parte (clique no botão gerar relatório, navegue até o painel Acessibilidade, abra a ferramenta seletora de cores e assim por diante). No entanto, para esse recurso, ele aparece em uma das ações mais comuns do DevTools ao inspecionar um elemento.
Como um pequeno desafio para si mesmo, dê uma olhada nas duas capturas de tela a seguir. Eles demonstram a dica de ferramenta aprimorada do DevTools Inspect Element, que agora tem uma seção de acessibilidade. Você consegue identificar o que as propriedades dessa seção representam?
Você pode notar que essas são exatamente as mesmas informações que vimos anteriormente - como parte da seção Taxa de contraste e do Inspetor de acessibilidade. Eles são as mesmas propriedades, mas surgiram de uma maneira (espero) mais simples.
Nota: Há também uma propriedade “Focável no teclado” nessa dica de ferramenta (o último item). Isso indica se o item é ou não acessível pelo teclado. Se for verdade, isso normalmente sugere que o elemento em questão pode ser focalizado por tabulação.
Do jeito que eu vejo: Inspect Element é um caso de uso extremamente comum no DevTools do navegador, portanto, selecionar propriedades úteis relacionadas à acessibilidade para a dica de ferramenta Inspect Element pode servir como um lembrete útil e nos levar, como desenvolvedores da Web, a investigar mais e garantir o que estamos construindo é acessível.
Conclusão
As ferramentas do desenvolvedor da Web para melhorar a acessibilidade melhoraram rapidamente ao longo dos anos, mas às vezes essas ferramentas estão escondidas ou simplesmente não documentadas. Neste artigo, exploramos alguns desses recursos que podem nos ajudar ao aplicar as práticas recomendadas de acessibilidade aos sites que criamos.
Aqui está um lembrete do que abordamos:
- Relação de contraste
Verifique se o elemento de texto inspecionado possui uma taxa de contraste satisfatória. - Inspetor de Acessibilidade
Visualize várias propriedades de acessibilidade e informações ARIA. - Farol
Um verificador de sites que abrange as práticas recomendadas, acessibilidade e muito mais. - Emular deficiências de visão
Uma ferramenta para aplicar deficiências de visão (como visão turva) à página. - Dica de ferramenta de inspeção do elemento
Uma dica de ferramenta aprimorada que apresenta informações relacionadas à acessibilidade.
Eu faço a lista de discussão Dev Tips se você quiser se manter atualizado com mais de 200 dicas de desenvolvimento web! Eu também posto muitos recursos bônus de desenvolvimento web no meu Twitter.
Por enquanto é isso! Obrigado por ler.