A árvore de acessibilidade

Introdução à árvore de acessibilidade

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Imagine que você está criando uma interface do usuário apenas para usuários de leitores de tela. Aqui, não é necessário criar nenhuma interface visual, basta fornecer informações suficientes para o leitor de tela usar.

O que você criaria seria uma espécie 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. Pode ser algo assim.

Modelo da API DOM do leitor de tela

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. Chamamos essa árvore modificada de Árvore de acessibilidade (link em inglês).

A árvore de acessibilidade fica parecida com uma página da Web antiga dos anos 90: algumas imagens, muitos links, talvez um campo e um botão.

uma página da Web no estilo dos anos 90

Fazer uma verificação visual de uma página como este caso oferece uma experiência semelhante à 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.

A árvore de acessibilidade é com que a maioria das tecnologias assistivas interage. O fluxo fica mais ou menos assim.

  1. Um aplicativo (o navegador ou outro app) expõe uma versão semântica da interface dele à tecnologia adaptativa usando uma API.
  2. A tecnologia adaptativa pode usar as informações lidas 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 fala do app.
  3. 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 fornece ganchos para permitir que o usuário simule facilmente um clique do mouse ou toque do dedo.
  4. A tecnologia adaptativa redireciona a intenção do usuário (como "clicar") de volta para o app usando a API de acessibilidade. Então, 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. Portanto, o navegador precisa converter o app da Web em uma árvore de acessibilidade e garantir que os eventos apropriados sejam disparados em JavaScript com base nas ações do usuário que chegam da tecnologia adaptativa.

Mas isso é tudo responsabilidade do navegador. Nosso trabalho como desenvolvedores da Web é apenas estar cientes de que isso está acontecendo e desenvolver páginas da Web que aproveitam esse processo para criar uma experiência acessível para nossos usuários.

Fazemos isso garantindo a expressão correta da semântica das nossas páginas, garantindo que os elementos importantes na página tenham os papéis, estados e propriedades acessíveis corretos e que especifiquemos nomes e descrições acessíveis. 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 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 HTML nativos, como links ou botões, é processada automaticamente. Podemos aproveitar essa acessibilidade integrada escrevendo um HTML que expresse a semântica dos elementos de nossa 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.

Quero tacos

Ela pode ser construída em HTML de diversas maneiras; uma maneira é 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 o que encontrou. Além disso, teríamos que fazer o trabalho extra de adicionar tabindex para torná-lo usável para usuários que usam apenas teclado, porque, da forma como está codificado agora, ele só pode ser usado com um mouse.

Podemos corrigir isso facilmente usando um elemento button normal em vez de um div. O uso de um elemento nativo também tem a vantagem de cuidar das interações do teclado. Não se esqueça de que você não precisa perder seus efeitos visuais elegantes só por usar um elemento nativo. É possível estilizar elementos nativos para que 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, o nome, o estado e o valor de um elemento. Ao usar o elemento semântico 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, há 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 é necessário um rótulo visual.

Para elementos em nível de texto, não é necessário fazer nada, porque, por definição, eles 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 em texto para qualquer conteúdo que não seja texto é o primeiro item na 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 destino de clique para a caixa de seleção, o que também é útil para usuários de mouse ou tela touchscreen. Para associar um rótulo a um elemento:

  • Colocar o elemento de entrada dentro de um elemento de rótulo
<label>
    <input type="checkbox">Receive promotional offers?
</label>

ou

  • Use o atributo for do rótulo e faça referência ao id do elemento
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Quando a caixa de seleção for 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?".

saída de texto na tela do VoiceOver mostrando o rótulo falado de uma caixa de seleção