Introdução à árvore de acessibilidade
Imagine que você está criando uma interface do usuário apenas para usuários de leitores de tela. Aqui, você não precisa criar nenhuma interface visual, basta fornecer informações para o leitor de tela usar.
Você criaria uma espécie de API descrevendo a estrutura da página, semelhante para a API DOM, mas é possível usar menos informações e nós, porque muitas dessas informações só são úteis para a apresentação visual. Ela será 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 tecnologia assistiva. Chamamos essa árvore modificada de Acessibilidade Árvore.
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 neste caso oferece uma experiência semelhante à o que um usuário de leitor de tela receberia. A interface existe, mas é simples e direta, assim como uma interface de árvore de acessibilidade.
A árvore de acessibilidade é com a qual a maioria das tecnologias assistivas interage. O é mais ou menos assim.
- Um aplicativo (o navegador ou outro aplicativo) expõe uma versão semântica de sua interface para tecnologia adaptativa por meio de uma API.
- A tecnologia assistiva pode usar as informações lidas por meio da API para criar uma apresentação de interface alternativa para o usuário. Por exemplo: um leitor de tela cria uma interface na qual o usuário ouve uma representação do aplicativo.
- A tecnologia assistiva também pode permitir que o usuário interaja com o app de de uma maneira diferente. Por exemplo, a maioria dos leitores de tela fornece ganchos para permitir que uma para simular facilmente um clique do mouse ou toque do dedo.
- A tecnologia assistiva redireciona a intenção do usuário (como "clique") de volta para o app por meio da API de acessibilidade. Então, o app tem a responsabilidade a interpretar a ação de maneira adequada no contexto da IU original.
Para navegadores da Web, há um passo extra em cada direção, porque o navegador é, na verdade, uma plataforma para aplicativos da web que são executados dentro dele. Portanto, o navegador precisa traduzir o app da Web em uma árvore de acessibilidade e garantir que o eventos apropriados são acionados em JavaScript com base nas ações do usuário da tecnologia assistiva.
Mas isso é tudo responsabilidade do navegador. Nosso trabalho como desenvolvedores Web estar ciente de que isso está acontecendo e desenvolver páginas da Web que aproveitem desse processo para criar uma experiência acessível para nossos usuários.
Fazemos isso garantindo que a semântica das nossas páginas seja expressa corretamente: garantindo que os elementos importantes da página tenham papéis, estados e propriedades, e que especificamos nomes e propriedades acessíveis descrições. O navegador pode permitir que a tecnologia assistiva acesse esse 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 muito o DOM tem significado semântico implícito. Ou seja, o DOM usa HTML nativo que são reconhecidos pelos navegadores e funcionam de maneira previsível em diversos plataformas. Acessibilidade para elementos HTML nativos, como links ou botões, então gerenciados automaticamente. Podemos aproveitar a acessibilidade integrada escrevendo um HTML que expresse a semântica dos elementos da nossa página.
No entanto, às vezes usamos elementos que parecem elementos nativos, mas não são. Por exemplo, este "botão" não é um botão.
Ele pode ser construído em HTML de diversas 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 sobre o que ele pousou. Além disso, teríamos que fazer o trabalho extra de adicionar tabindex para torná-lo usável para usuários que usam apenas o teclado porque, da forma como está codificado agora, 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 do teclado
interações para nós. E lembre-se de que você não precisa perder seu visual moderno
efeitos só porque você usa um elemento nativo, é possível estilizar elementos nativos para
fazê-los parecerem do jeito que você deseja e ainda manter a semântica implícita e
do seu modelo.
Anteriormente, observamos que os leitores de tela anunciam a função, o nome, estado e valor. Usando o elemento semântico, papel, estado e valor corretos são cobertos, mas também precisamos garantir que o nome de um elemento detectáveis.
De modo geral, há dois tipos de nomes:
- Marcadores visíveis, que são usados por todos os usuários para associar o significado a uma e
- Alternativas em texto, que são usadas apenas quando não há necessidade de uma interface rótulo.
Para elementos em nível de texto, não precisamos fazer nada, porque, por definição, terá algum conteúdo de texto. No entanto, para elementos de entrada ou controle, e elementos visuais como imagens, precisamos especificar um nome. Na verdade, fornecer alternativas em texto para qualquer conteúdo não textual é a primeiro item na lista de verificação do WebAIM.
Uma maneira de fazer isso é seguir sua recomendação de que "Entradas de formulário têm rótulos de texto associados". Há duas maneiras de associar um marcador a um formulário , como uma caixa de seleção. Qualquer um dos métodos faz com que o texto do rótulo também se tornar um alvo de clique para a caixa de seleção, o que também é útil para mouse ou para usuários de 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
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 tiver sido rotulada corretamente, o leitor de tela poderá informar que o elemento tem um papel de caixa de seleção, está em um estado marcado e se chama "Receber ofertas promocionais?".
