Confira se todos os controles personalizados têm uma role adequada e
quaisquer atributos ARIA obrigatórios que confiram as propriedades e o estado deles.
Por exemplo, uma caixa de seleção personalizada precisa de um role="checkbox" e
aria-checked="true|false" para transmitir corretamente o estado dela.
Aprenda a usar ARIA e HTML para entender quando é melhor fornecer semântica ausente para controles personalizados.
Como testar
Para verificar se todos os controles interativos personalizados têm funções ARIA adequadas, teste a página usando o painel de acessibilidade do Chrome DevTools ou um leitor de tela.
JAWS e NVDA são dois dos leitores de tela mais conhecidos para Windows. O VoiceOver é o leitor de tela integrado do macOS.
Com CSS, você pode estilizar elementos <div> e <button> para transmitir as mesmas affordances visuais, mas a experiência é muito diferente em um leitor de tela. Um <div> é apenas um elemento de agrupamento genérico. Portanto, um leitor de tela
apenas anuncia o conteúdo de texto do <div>.
O <button> é anunciado como um "botão", um sinal muito mais forte para o usuário
de que ele pode interagir com ele.
Consulte também Semântica e leitores de tela.
Como corrigir
A melhor solução para esse problema é evitar totalmente os controles interativos personalizados. Por exemplo, substitua um <div> que está agindo como um botão
por um <button> real.
<button>Learn more</button>
Se você precisar usar um <div>, adicione role="button" e aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Agora os leitores de tela anunciam o papel e o estado interativo do <div>.
Por que isso é importante
Se você nunca usou uma tecnologia adaptativa, talvez não saiba como seu conteúdo se sai para os usuários dela. O ideal é conversar com usuários que usam tecnologia assistiva regularmente e compartilhar feedback sobre o desempenho do seu site ou aplicativo da Web.
Outra maneira de entender como os usuários de tecnologias adaptativas interagem com seu conteúdo é testando com tecnologia adaptativa. Usar um leitor de tela ajuda você a entender melhor como seu conteúdo está rotulado e se há alguma obstrução na navegação.
Recursos
Você pode conferir o código-fonte da auditoria de controles personalizados com funções ARIA.