Você já se perguntou como uma tecnologia assistiva, como um leitor de tela, sabe o que anunciar aos usuários? A resposta é que essas tecnologias dependem de desenvolvedores que marcam as páginas com HTML semântico. Mas o que é semântica e como os leitores de tela a usam?
Affordances e semântica
Antes de entrar na semântica, é útil entender as affordances. Uma affordance é qualquer objeto que oferece ao usuário a oportunidade de realizar uma ação. Um exemplo clássico é o bule de chá:
Esta chaleira não precisa de um manual de instruções. Em vez disso, o design físico transmite ao usuário como ele deve ser operado. Ele tem uma alça, e como você já viu outros objetos no mundo com alças semelhantes, é possível inferir como pegá-lo e operá-lo.
Ao criar interfaces gráficas do usuário, usamos CSS para adicionar recursos visuais à nossa interface. Por exemplo, você pode dar a um botão uma sombra projetada e uma borda para que ele se pareça com um botão real no mundo real.
Mas para usuários que não conseguem ver a tela, essas indicações visuais não são transmitidas. Portanto, você precisa garantir que a interface seja construída de forma a transmitir essas mesmas affordances à tecnologia assistiva. Essa exposição não visual das affordances de um elemento de interface é chamada de semântica.
Escrever HTML semântico
A maneira mais fácil de transmitir a semântica adequada é usar elementos HTML semanticamente ricos.
Usando CSS, é possível estilizar os elementos <div> e <button> para que eles
transmitam as mesmas affordances 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 só anuncia o conteúdo de texto do <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.
Muitas vezes, a melhor solução para esse problema é evitar controles interativos personalizados. Por exemplo, substitua um <div> que está agindo como um botão
por um <button> real.
Propriedades semânticas e a árvore de acessibilidade
Em geral, todo elemento HTML tem algumas das seguintes propriedades semânticas:
- Uma função ou um tipo
- Um nome
- Um valor (opcional)
- Um estado (opcional)
A função de um elemento descreve o tipo dele, por exemplo, "button", "input" ou até mesmo "group" para coisas como elementos div e span.
O nome de um elemento é o rótulo calculado. Os leitores de tela geralmente anunciam o nome de um elemento seguido da função dele, como "Inscrever-se, botão". O algoritmo
que determina o nome de um elemento considera fatores como se há algum conteúdo
de texto dentro do elemento, se ele tem atributos como title
ou placeholder, se o elemento está associado a um elemento
<label> real e se o elemento tem atributos ARIA, como
aria-label e aria-labelledby.
Alguns elementos podem ter um valor. Por exemplo, <input type="text"> pode ter um valor que reflete o que o usuário digitou no campo de texto.
Alguns elementos também podem ter um estado, que transmite o status atual deles.
Por exemplo, um elemento <select> pode estar no estado expanded ou collapsed, dependendo se está aberto ou fechado.
A árvore de acessibilidade
Para cada nó no DOM, o navegador determina se ele é semanticamente "interessante" e o adiciona à árvore de acessibilidade. Quando uma tecnologia assistiva, como um leitor de tela, oferece uma interface alternativa ao usuário, ela geralmente faz isso percorrendo essa árvore de acessibilidade.
Com o Chrome DevTools, você pode inspecionar as propriedades semânticas de um elemento e conferir a posição dele na árvore de acessibilidade.
Próximas etapas
Depois de saber um pouco sobre semântica e como ela ajuda na navegação do leitor de tela, você não consegue deixar de olhar para as páginas que cria de forma diferente. Na próxima seção, vamos voltar um pouco e considerar como todo o contorno de uma página pode ser transmitido usando títulos e pontos de referência eficazes.