Você já se perguntou como uma tecnologia adaptativa, 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 são as semânticas e como os leitores de tela as usam?
Affordances e semântica
Antes de mergulhar na semântica, é útil entender outro termo: affordances. Um affordance é qualquer objeto que ofereça ao usuário a oportunidade de realizar uma ação. Um exemplo clássico é a chaleira:
Essa chaleira não precisa de um manual de instruções. Em vez disso, o design físico transmite ao usuário como ela deve ser operada. Ele tem uma alça, e como você já viu outros objetos no mundo com alças semelhantes, é possível inferir como ele deve ser levantado e operado.
Ao criar interfaces gráficas do usuário, usamos recursos como o CSS para adicionar affordances visuais à nossa interface. Por exemplo, você pode adicionar uma sombra e borda a um botão para que ele se pareça com um botão real.
No entanto, se um usuário não conseguir ver a tela, essas affordances visuais não serão transmitidas a ele. Portanto, você precisa garantir que a interface seja construída de uma maneira que possa transmitir essas mesmas affordances para a tecnologia auxiliar. Essa exposição não visual das affordances de um elemento da interface é chamada de semântica.
Usar 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 características 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.
A solução mais simples
e, muitas vezes, a melhor 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, todos os elementos HTML têm algumas das seguintes propriedades semânticas:
- Um papel ou tipo
- Um nome
- Um valor (opcional)
- Um estado (opcional)
O papel de um elemento descreve o tipo dele, por exemplo, "botão", "entrada" ou até mesmo
"grupo" para elementos como div e span.
O nome de um elemento é o rótulo computado dele. Os leitores de tela geralmente anunciam
o nome de um elemento seguido da função dele, por exemplo, "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 ou não atributos como title
ou placeholder, se ele está associado a um elemento
<label> real e se ele 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 reflita o que o usuário digitou no campo de texto.
Alguns elementos podem ter um estado, que transmite o status atual deles.
Por exemplo, um elemento <select> pode estar em um estado expandido ou
reduzido, dependendo se ele está aberto ou fechado.
Árvore de acessibilidade
Para cada nó no DOM, o navegador determina se o nó é semanticamente "interessante" e o adiciona à árvore de acessibilidade. Quando uma tecnologia adaptativa, como um leitor de tela, fornece uma interface alternativa ao usuário, geralmente isso é feito percorrendo essa árvore de acessibilidade.
Usando as Ferramentas para desenvolvedores do Chrome, 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 pode deixar de olhar para as páginas que cria de maneira diferente. Na próxima seção, vamos dar um passo atrás e considerar como todo o esboço de uma página pode ser transmitido usando títulos e pontos de referência eficazes.