Semântica e leitores de tela

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:

O identificador de um bule é uma affordance natural.

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.