Você já parou para se perguntar como a tecnologia adaptativa, como um leitor de tela, sabe o que anunciar aos usuários? A resposta é que essas tecnologias dependem de desenvolvedores marcando 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 mergulhar na semântica, é útil entender outro termo: affordances. Uma affordance é qualquer objeto que oferece ao usuário a oportunidade de realizar uma ação. Um exemplo clássico é o bule:
Esse bule 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 um identificador e, como você já viu outros objetos no mundo com identificadores semelhantes, é possível inferir como ele deve ser selecionado e operado.
Quando criamos interfaces gráficas do usuário, usamos recursos como CSS para adicionar affordances visuais à IU. Por exemplo, coloque uma sombra projetada e uma borda em 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 funcionalidades visuais não serão transmitidas a ele. Portanto, é necessário garantir que a interface seja construída de maneira a transmitir essas mesmas affordances à tecnologia assistiva. 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 é usando elementos HTML semanticamente avançados.
Com CSS, é possível
estilizar os elementos <div> e <button> para que transmitam as mesmas affordances visuais,
mas as duas experiências são muito diferentes ao usar um leitor de tela.
Uma <div> é apenas um elemento de agrupamento genérico,
de modo que um leitor de tela anuncia somente o conteúdo de texto da <div>.
O <button> é anunciado como um "botão",
um sinal muito mais forte para o usuário de que é possível interagir.
A solução mais simples e muitas vezes a melhor para esse problema é evitar totalmente os 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
De modo geral, cada elemento HTML terá algumas das seguintes propriedades semânticas:
- Um papel ou tipo
- Um nome
- Um valor (opcional)
- Um state (opcional)
O papel de um elemento descreve seu tipo, por exemplo, "botão", "entrada" ou até mesmo "grupo" para itens como elementos div e span.
O nome de um elemento é o rótulo calculado. Os leitores de tela normalmente anunciam
o nome de um elemento seguido pela função dele, por exemplo, "Inscreva-se, botão". O algoritmo
que determina o nome de um elemento considera fatores como se há conteúdo de texto
dentro dele, se tem ou não atributos como title
ou placeholder, se o elemento está associado ou não a um elemento
<label> real e se o elemento tem algum atributo 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 podem também ter um state, que transmite o status atual deles.
Por exemplo, um elemento <select> pode estar em um estado expandido ou
recolhido, dependendo se ele está aberto ou fechado.
A á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 ela faz isso percorrendo essa árvore de acessibilidade.
Com o DevTools do Chrome, você pode inspecionar as propriedades semânticas de um elemento e explorar a posição dele na árvore de acessibilidade.
Próximas etapas
Depois de entender um pouco sobre semântica e como elas ajudam na navegação do leitor de tela, não será possível deixar de analisar as páginas criadas de maneira diferente. Na próxima seção, vamos analisar como todo o contorno de uma página pode ser transmitido usando títulos e pontos de referência eficientes.