Introdução à árvore de acessibilidade
Imagine que você está criando uma interface do usuário somente para usuários de leitores de tela. Aqui, você não precisa criar nenhuma interface visual, mas apenas fornecer informações suficientes para o leitor de tela usar.
O que você estaria criando seria uma espécie de API descrevendo a estrutura da página, semelhante à API DOM, mas podendo usar menos informações e menos nós, porque muitas dessas informações são úteis apenas para a apresentação visual. Ele pode ficar mais ou menos assim.
Isso é basicamente o que o navegador apresenta ao leitor de tela. O navegador pega a árvore do DOM e a modifica para uma forma útil para a tecnologia assistiva. Referimo-nos a essa árvore modificada como a Árvore de acessibilidade.
Você pode visualizar a árvore de acessibilidade como tendo a aparência semelhante a de uma página da Web antiga dos anos 1990: poucas imagens, muitos links, talvez um campo e um botão.
Fazer uma varredura visual por uma página como neste caso, fornece uma experiência semelhante àquela que um usuário de leitor de tela teria. A interface está presente, mas é simples e direta, muito parecida com uma interface de árvore de acessibilidade.
É com a árvore de acessibilidade que a maioria das tecnologias assistivas interage. O fluxo é mais ou menos assim.
- Um aplicativo (o navegador ou outro app) expõe uma versão semântica de sua IU para a tecnologia adaptativa por meio de uma API.
- A tecnologia assistiva pode usar as informações lidas pela API para criar uma apresentação de interface de usuário alternativa para o 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 assistiva também pode permitir que o usuário interaja com o app de uma maneira diferente. Por exemplo, a maioria dos leitores de tela fornecem ganchos para permitir que um usuário simule facilmente um clique do mouse ou toque do dedo.
- A tecnologia assistiva retransmite a intenção do usuário (como "clique") de volta ao app pela API de acessibilidade. Em seguida, o app tem a responsabilidade de interpretar a ação adequadamente no contexto da interface original.
Para navegadores da Web, há um passo extra em cada direção, porque o navegador é, na verdade, uma plataforma para apps da Web que são executados dentro dele. Assim, o navegador precisa traduzir o app da Web em uma árvore acessibilidade e garantir que os eventos apropriados sejam acionados em JavaScript com base nas ações do usuário que entram pela tecnologia assistiva.
Mas isso é tudo responsabilidade do navegador. Nosso trabalho, como desenvolvedores Web, é apenas estar cientes 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 nossas páginas corretamente: garantimos que os elementos importantes na página tenham as funções, estados e propriedades acessíveis corretas e que especificamos nomes e descrições acessíveis. O navegador pode então permitir que a tecnologia assistiva 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 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. Assim, a acessibilidade para elementos de HTML nativos, como links ou botões, é gerenciada automaticamente. Podemos aproveitar essa acessibilidade integrada escrevendo HTML que expresse a semântica dos elementos da página.
No entanto, às vezes usamos elementos que parecem elementos nativos, mas não o são. Por exemplo, esse "botão" não é um botão.
Ele pode ser construído em HTML de diversas maneiras; uma maneira é mostrado 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 o que encontrou. Além disso, teríamos que fazer o trabalho extra de adicionar tabindex para torná-lo utilizável para usuários apenas de teclado porque, da maneira como está codificado, ele só pode ser usado com um mouse.
Podemos corrigir isso facilmente usando um elemento button normal em vez de um div.
Usar um elemento nativo também tem a vantagem de cuidar das interações
por teclado. E lembre-se de que você não precisa perder seus efeitos visuais
elegantes só porque usa um elemento nativo. É possível estilizar elementos nativos
para que eles tenham a aparência desejada e ainda manter a semântica e o
comportamento implícitos.
Anteriormente, observamos que os leitores de tela anunciam a função, nome, estado e valor de um elemento. Ao usar o elemento de semântica correto, a função, o estado e o valor são cobertos, mas também precisamos garantir que o nome de um elemento seja detectável.
De modo geral, existem dois tipos de nomes:
- Rótulos visíveis, que são usados por todos os usuários para associar o significado a um elemento, e
- Alternativas em texto, que são usadas apenas quando não há necessidade de um rótulo visual.
Para elementos em nível de texto, não é preciso fazer nada, porque, por definição, eles têm algum conteúdo de texto. No entanto, para elementos de entrada ou de controle e conteúdo visual, como imagens, precisamos especificar um nome. Na verdade, fornecer alternativas em texto para qualquer conteúdo não textual é o primeiro item da lista de verificação do WebAIM.
Uma maneira de fazer isso é seguir a recomendação de que "As entradas de formulário têm 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. Qualquer um dos métodos faz com que o texto do rótulo também se torne um alvo de cliques para a caixa de seleção, o que também é útil para usuários de mouse ou tela sensível ao toque. Para associar um rótulo a um elemento,
- Coloque o elemento de interação dentro de um elemento de rótulo
<label>
<input type="checkbox">Receive promotional offers?
</label>
ou
- Use o atributo
fordo rótulo e remeta aoiddo elemento
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
Quando a caixa de seleção tiver sido rotulada corretamente, o leitor de tela poderá informar que o elemento tem uma função de caixa de seleção, está em um estado marcado e tem o nome "Receber ofertas promocionais?".
