Confira se todos os controles personalizados têm um role adequado e
todos os atributos ARIA obrigatórios que conferem as propriedades e o estado deles.
Por exemplo, uma caixa de seleção personalizada precisa de role="checkbox" e
aria-checked="true|false" para transmitir corretamente o estado.
Consulte a Introdução a ARIA
para ter uma visão geral de como ARIA pode fornecer semântica ausente para controles personalizados.
Como testar manualmente
Para verificar se todos os controles interativos personalizados têm papéis ARIA apropriados, teste a página usando o painel de acessibilidade do Chrome DevTools ou um leitor de tela. O JAWS e o NVDA são dois dos leitores de tela mais usados para Windows. O VoiceOver é o leitor de tela integrado ao MacOS.
Com o CSS, é possível
estilizar os elementos <div> e <button> para que transmitam as mesmas funcionalidades visuais,
mas as duas experiências são muito diferentes ao usar um leitor de tela.
Um <div> é apenas um elemento de agrupamento genérico,
então um leitor de tela anuncia apenas o conteúdo de texto da <div>.
O <button> é anunciado como um "botão",
um sinal muito mais forte para o usuário de que é algo com que ele pode interagir.
Consulte também Semântica e leitores de tela.
Como corrigir
A solução mais simples e, muitas vezes, melhor para esse problema é evitar completamente controles interativos personalizados.
Por exemplo, substitua um <div> que funciona como um botão
por um <button> real.
Se for necessário manter o <div>,
adicione role="button" e aria-pressed="false" ao <div>.
Agora, os leitores de tela vão anunciar o papel e o estado interativo do <div>.
Por que isso é importante
A única maneira de entender realmente como os usuários de tecnologia adaptativa experienciam seu conteúdo é verificar esse conteúdo usando um leitor de tela. O uso de um leitor de tela em primeira mão permite que você entenda claramente como seu conteúdo é identificado e se há alguma obstrução na navegação com tecnologia assistiva. Se você não sabe como a marcação semântica é interpretada pela tecnologia adaptativa, consulte a Introdução à semântica para relembrar o assunto.
Consulte também Como fazer uma avaliação de acessibilidade.
Recursos
Código-fonte da auditoria de controles personalizados com papéis ARIA