Introdução à árvore de acessibilidade
Imagine que você está criando uma interface do usuário apenas para usuários de leitores de tela. Nesse caso, não é necessário criar nenhuma interface visual, basta fornecer informações suficientes para o leitor de tela usar.
Você criaria um tipo de API que descreve a estrutura da página, semelhante à API DOM, mas com menos informações e nós, porque muitas dessas informações são úteis apenas para apresentação visual. Ele pode ser mais ou menos assim.
É basicamente o que o navegador apresenta ao leitor de tela. O navegador pega a árvore do DOM e a modifica em um formato útil para tecnologias adaptativas. Chamamos essa árvore modificada de árvore de acessibilidade.
Você pode visualizar a árvore de acessibilidade como uma página da Web antiga dos anos 90: algumas imagens, muitos links, talvez um campo e um botão.
Analisar visualmente uma página como essa oferece uma experiência semelhante à que um usuário de leitor de tela teria. A interface está lá, mas é simples e direta, como uma interface de árvore de acessibilidade.
A árvore de acessibilidade é o que a maioria das tecnologias adaptativas usa para interagir. O fluxo é mais ou menos assim.
- Um aplicativo (o navegador ou outro app) expõe uma versão semântica da interface para a tecnologia adaptativa usando uma API.
- A tecnologia adaptativa pode usar as informações que lê pela API para criar uma apresentação alternativa da interface do usuário. Por exemplo, um leitor de tela cria uma interface em que o usuário ouve uma representação falada do app.
- A tecnologia adaptativa também pode permitir que o usuário interaja com o app de uma maneira diferente. Por exemplo, a maioria dos leitores de tela oferece ganchos para que o usuário simule facilmente um clique do mouse ou um toque com o dedo.
- A tecnologia adaptativa transmite a intenção do usuário (como "clicar") de volta ao app pela API Accessibility. O app é responsável por interpretar a ação de forma adequada no contexto da interface original.
Para navegadores da Web, há uma etapa extra em cada direção, porque o navegador é, na verdade, uma plataforma para apps da Web que são executados nele. Portanto, o navegador precisa traduzir o app da Web em uma árvore de acessibilidade e garantir que os eventos apropriados sejam acionados no JavaScript com base nas ações do usuário que vêm da tecnologia adaptativa.
Mas isso é responsabilidade do navegador. Nosso trabalho como desenvolvedores web é apenas estar ciente de que isso está acontecendo e desenvolver páginas da web que aproveitem esse processo para criar uma experiência acessível para nossos usuários.
Para isso, expressamos a semântica das páginas corretamente: garantimos que os elementos importantes na página tenham as funções, os estados e as propriedades acessíveis corretos e especificamos nomes acessíveis e descrições. O navegador pode permitir que a tecnologia adaptativa acesse essas informações para criar uma experiência personalizada.
Semântica em HTML nativo
Um navegador pode transformar a árvore do DOM em uma árvore de acessibilidade porque grande parte do DOM tem um significado semântico implícito. Ou seja, o DOM usa elementos HTML nativos que são reconhecidos pelos navegadores e funcionam de maneira previsível em várias plataformas. A acessibilidade para elementos HTML nativos, como links ou botões, é processada automaticamente. Podemos aproveitar essa acessibilidade integrada escrevendo um HTML que expresse a semântica dos elementos da página.
No entanto, às vezes usamos elementos que parecem nativos, mas não são. Por exemplo, este "botão" não é um botão.
Ele pode ser construído em HTML de várias maneiras. Uma delas é mostrada abaixo.
<div class="button-ish">Give me tacos</div>
Quando não usamos um elemento de botão real, o leitor de tela não tem como saber onde ele está. Além disso, teríamos que fazer o trabalho extra de adicionar tabindex para que ele seja utilizável para usuários que usam apenas o teclado, porque, como está codificado agora, ele só pode ser usado com um mouse.
Para corrigir isso facilmente, use um elemento button comum em vez de um div.
O uso de um elemento nativo também tem o benefício de cuidar das interações
do teclado para nós. E lembre-se de que você não precisa perder seus efeitos visuais
sofisticados só porque usa um elemento nativo. É possível estilizar elementos nativos para
que eles fiquem como você quer e ainda manter a semântica e o comportamento
implícitos.
Anteriormente, observamos que os leitores de tela anunciam o papel, o nome, o estado e o valor de um elemento. Ao usar o elemento semântico correto, o papel, o estado e o valor são cobertos, mas também precisamos garantir que o nome de um elemento seja detectável.
Em geral, há dois tipos de nomes:
- Rótulos visíveis, que são usados por todos os usuários para associar significado a um elemento.
- Alternativas de texto, que são usadas apenas quando não há necessidade de um rótulo visual.
Para elementos de texto, não precisamos fazer nada, porque, por definição, eles já têm algum conteúdo de texto. No entanto, para elementos de entrada ou controle e conteúdo visual, como imagens, precisamos especificar um nome. Na verdade, fornecer alternativas de texto para qualquer conteúdo não textual é o primeiro item na lista de verificação do WebAIM (link em inglês).
Uma maneira de fazer isso é seguir a recomendação de que "as entradas de formulário tenham rótulos de texto associados". Há duas maneiras de associar um rótulo a um elemento de formulário, como uma caixa de seleção. Os dois métodos fazem com que o texto do rótulo também se torne um destino de clique para a caixa de seleção, o que também é útil para usuários de mouse ou tela touch screen. Para associar um marcador a um elemento, siga um destes procedimentos:
- Colocar o elemento de entrada dentro de um elemento de rótulo
<label>
<input type="checkbox">Receive promotional offers?
</label>ou
- Use o atributo
fordo rótulo e consulte oiddo elemento
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
Quando a caixa de seleção é rotulada corretamente, o leitor de tela pode informar que o elemento tem o papel de caixa de seleção, está marcado e se chama "Receber ofertas promocionais?".
