Construindo uma Web Melhor: Um Guia de Acessibilidade para Desenvolvedores

Há muita agitação em torno da acessibilidade na Web, e a Internet está repleta de informações sobre esse tópico. Quando o WebAIM realizou um estudo dos 1.000.000 principais sites, eles encontraram um total de 50.829.406 erros de acessibilidade distintos – o que representa uma média de 50,8 erros por página . Os esforços de teste de acessibilidade acontecem no final do desenvolvimento do produto em muitas, mas não em todas as empresas. Portanto, treinando desenvolvedores e priorizando a acessibilidade na Web durante o processo de desenvolvimento, o número de erros de acessibilidade pode ser reduzido significativamente.

Compreendendo a acessibilidade na Web

Em termos simples, acessibilidade na web significa que a web é acessível para pessoas com deficiência. Aqui está um exemplo para ajudar a entender melhor: Os usuários cegos geralmente navegam no computador com a ajuda de um leitor de tela, que é uma ferramenta de conversão de texto em fala que dita as informações na tela para eles. Quando você torna seu site acessível, o leitor de tela pode fornecer essas informações com êxito ao usuário. Se o seu site estiver inacessível, o leitor de tela entrega informações imprecisas ou incompletas ao usuário. Em outras palavras, o uso de tecnologias assistivas, como leitores de tela, funciona bem apenas se os sites com os quais eles interagem forem projetados tendo em mente a acessibilidade.

A palavra 'acessível' é diferente de 'utilizável'. Um site pode ser acessível no sentido de atender ao mínimo necessário para que um site seja legalmente compatível, mas ainda pode não ter a experiência mais amigável para pessoas com deficiência. Portanto, é importante pelo menos tentar ir além para tornar seu site acessível e utilizável para pessoas com deficiência. Discutiremos mais adiante neste artigo como fazer isso.

Cinco maneiras de incorporar acessibilidade em seu site

• Configure um pipeline de acessibilidade automatizado.

  Uma das maneiras mais fáceis e rápidas de começar a incorporar acessibilidade em seu aplicativo é seguir a filosofia do Shift left – o que significa que o teste de acessibilidade deve começar o mais cedo possível no processo de desenvolvimento e não esperar até o último momento. Existem diferentes verificadores de acessibilidade disponíveis que podem ajudar na configuração de testes de acessibilidade automatizados para o seu site – desde algo que você pode executar manualmente em seu navegador até ferramentas que podem ser integradas ao seu pipeline de CI/CD.

  
  

  As extensões de navegador gratuitas incluem ferramentas como ACENO e Insights de Acessibilidade . Depois de instalados, você pode executá-los a qualquer momento em sua página da Web e eles mostrarão erros de acessibilidade em seu site, desde rótulos ARIA ausentes em seus formulários até problemas de contraste de cores. Essas ferramentas são uma ótima maneira de começar sua jornada de acessibilidade automatizada. Os desenvolvedores também podem usar linters de código, como machado Acessibilidade Linter para detectar problemas enquanto eles estão codificando em seu IDE. De acordo com Deque, as ferramentas automatizadas atualmente capturam 57 por cento dos problemas de acessibilidade em comparação com a taxa estimada da indústria de 20 por cento.

• Aprenda com seus resultados de acessibilidade automatizados.

  Você configurou testes de acessibilidade automatizados para o seu site – isso é ótimo. No entanto, você está aprendendo com os erros de acessibilidade detectados? Por exemplo – se você está enfrentando muitos erros relacionados à falta de rótulos para formulários ou falta de texto alternativo para imagens – é importante certificar-se de que você não repetirá esses erros no futuro. Se você está encontrando muitos problemas de contraste em seu site, pode ser uma boa ideia conversar com sua equipe de design para avaliar as cores e os temas de seu site.

  
  

  Outra maneira de garantir que você não está repetindo erros simples de acessibilidade é por meio de revisões de código – certifique-se de procurar código inacessível durante as revisões de código! Alguns fáceis de identificar são rótulos ARIA ausentes para elementos que não têm rótulo visível claro, texto alternativo ausente para imagens e títulos de página ausentes. O uso de ferramentas de teste automatizadas é ótimo, mas sua eficiência pode ser melhorada ainda mais se você corrigir preventivamente os problemas que geralmente detectam.

  
  

• Navegação pelo Teclado + Teste do Leitor de Tela

  Se você quiser ir um passo além do teste de acessibilidade automatizado – certifique-se de testar seu site usando um teclado. Todos os elementos interativos devem ser acessíveis por meio de teclas de tabulação e elementos como menus suspensos devem ser acessíveis por meio de teclas de seta. Mais informações sobre pressionamentos de teclas apropriados para vários elementos da interface do usuário podem ser encontradas aqui: https://webaim.org/techniques/keyboard/

  
  

  Se você achar que algo não está acessível pelo teclado, pergunte-se: isso deveria estar acessível? Elementos como uma célula de tabela estática não precisam ser acessíveis por meio de um teclado. Se for um elemento interativo personalizado que precisa ser acessível via teclado e não for, você precisará torná-lo acessível por meio de programação. Isso pode ser feito adicionando um tabindex de 0, que adicionará o elemento à ordem de tabulação da página da Web e, em seguida, definindo manipuladores de eventos como “onKeyPress”, que invocará a ação necessária ao pressionar uma tecla.

  
  

  Por exemplo, este trecho de código adiciona um tabIndex de 0 ao elemento de botão, tornando-o focalizável e acessível por meio do teclado. O manipulador de eventos escuta o evento "keydown" e aciona um clique no botão se a tecla Enter for pressionada.

  
  

  <button id="myButton">Click me</button>

   

  const button = document.getElementById("myButton");

  button.tabIndex = 0;

    

  button.addEventListener("keydown", function(event) {

  if (event.key === "Enter") {

  button.click();

  }

  });

  
  

  Se você quiser ir além, tente usar um leitor de tela para testar seu site. Isso pode ser uma boa ideia se o seu site não passar por nenhum fornecedor de acessibilidade final terceirizado para testes manuais. Você não precisa realizar testes detalhados de leitor de tela como desenvolvedor, mas pode tentar navegar no site com um leitor de tela. Verifique coisas como se os rótulos apropriados para os elementos do formulário são anunciados, se alguma informação redundante está sendo transmitida, se as informações em uma tabela estão acessíveis, etc.

  
  

  O Windows Narrator e o Voiceover para Mac são boas opções para leitores de tela gratuitos. Os leitores de tela sincronizam com os comandos usuais de navegação do teclado, mas também possuem comandos específicos para navegar em vários elementos de um site. Por exemplo, para VoiceOver, você pode procurar esses comandos aqui: https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts .

  
  

• Familiarize-se com algumas ferramentas de depuração de acessibilidade.

  Ferramentas como a Árvore de acessibilidade do navegador podem ajudá-lo a observar os estados de acessibilidade e as propriedades dos elementos da interface do usuário em seu site. Essa ferramenta é especialmente útil para corrigir bugs de acessibilidade, pois pode mostrar quais propriedades de acessibilidade estão sendo expostas a tecnologias assistivas, como um leitor de tela. Para ver a árvore de Acessibilidade no Google Chrome, abra Devtools em seu navegador e clique no Painel de Acessibilidade. Ele deve estar próximo ao Painel de Layout.

  
  

  Saiba mais sobre a árvore de acessibilidade aqui:https://developer.chrome.com/blog/full-accessibility-tree/#what-is-the-accessibility-tree

  
  

  Outra ferramenta útil que você pode usar são os bookmarklets de Paul , que também destacam funções, estados e propriedades de elementos. Isso também funciona em telefones celulares. Ambas as ferramentas são úteis para saber quais informações estão sendo passadas para tecnologias assistivas e, portanto, são extremamente úteis para corrigir quaisquer bugs.

  
  

• Conta para uma variedade de outras deficiências

  Além do teste de leitor de tela e teclado, que pode ajudar pessoas cegas ou com deficiência motora, você também deve considerar atender às necessidades de pessoas com outras deficiências. Se o seu site tiver vídeos, inclua legendas precisas neles. Para pessoas com deficiências cognitivas, as WCAG têm um ótimo guia sobre como tornar o conteúdo acessível para elas. Considere também outras deficiências, como daltonismo. O analisador de contraste de cores da TPGi possui um simulador de daltonismo , que pode ser uma excelente ferramenta para garantir que seu site esteja usando cores e temas acessíveis.

  
  

  Por fim, se o seu site tiver funcionalidade personalizada de fala para texto, certifique-se de que seja acessível a alguém com deficiência de fala. Uma maneira de fazer isso é dar um tempo razoável para que as pessoas com distúrbios da fala terminem o que têm a dizer.

Conclusão

A acessibilidade digital é importante para que um bilhão de pessoas com deficiência neste planeta possam ter acesso igualitário à web. Olhando para o estado atual da acessibilidade digital – podemos não estar indo muito bem. De acordo com um relatório recente da UsableNet , “2022 marcou mais um ano de mais de 4.000 processos [de acessibilidade]”. Usando algumas das estratégias descritas acima, os desenvolvedores podem incorporar a acessibilidade no processo de desenvolvimento e detectar e corrigir tantos erros quanto possível antes que alguém tenha uma experiência frustrante.