Você já parou para se perguntar como a tecnologia adaptativa, como uma tela leitor, sabe o que anunciar para os usuários? A resposta é que essas tecnologias dependem dos desenvolvedores marcar as páginas com HTML semântico. Mas o que são semântica, e como os leitores de tela as usam?
Affordances e semântica
Antes de mergulhar na semântica, é útil entender outro termo: affordances. Uma affordance é qualquer objeto que oferece ou oferece ao usuário a oportunidade de realizar uma ação. Um exemplo clássico é o bule:
Este bule não precisa de manual de instruções. 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, pode inferir como você precisa pegar e operá-lo.
Quando criamos interfaces gráficas do usuário, usamos elementos como CSS para adicionar recursos affordances à nossa IU. Por exemplo, você pode dar uma sombra projetada a um botão e para que se pareça com um botão real.
Mas, se um usuário não consegue ver a tela, essas affordances visuais não será comunicada a eles. Portanto, você precisa garantir que a interface esteja construído de uma forma que possa transmitir essas mesmas affordances para a tecnologia. Essa exposição não visual das affordances de um elemento da interface é chamada semântica.
Usar HTML semântico
A maneira mais fácil de transmitir uma semântica adequada é usar um HTML com conteúdo semântico os elementos.
Com o CSS, é possível
para 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.
Um <div> é apenas um elemento de agrupamento genérico,
para que um leitor de tela anuncie apenas 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 é algo com o qual ele pode interagir.
A forma mais simples
e muitas vezes a melhor solução para esse problema
é evitar totalmente controles interativos personalizados.
Por exemplo, substitua um <div> que está agindo como um botão
com um <button> real.
Propriedades semânticas e a árvore de acessibilidade
De modo geral, cada elemento HTML terá algumas das seguintes propriedades:
- 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 mesmo apenas
"grupo" para elementos como div e span.
O nome de um elemento é o rótulo calculado dele. Os leitores de tela normalmente anunciam
o nome de um elemento seguido pelo seu papel, por exemplo, "Botão "Inscreva-se". O algoritmo
que determina o nome de um elemento, por exemplo, se há algum texto
conteúdo dentro do elemento, mesmo que ele não tenha atributos como title
ou placeholder, independentemente de o elemento estar ou não associado a um
um elemento <label> e se esse elemento tiver atributos ARIA, como
aria-label e aria-labelledby.
Alguns elementos podem ter um valor. Por exemplo, <input type="text"> pode
têm um valor que reflete o que o usuário digitou no campo de texto.
Alguns elementos podem também ter um estado, que transmite o status atual.
Por exemplo, um elemento <select> pode estar em um bloco expandido ou
estado 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 ao tópico de acessibilidade árvore de comando. Quando a tecnologia assistiva, como um leitor de tela, fornece uma interface alternativa para o usuário, geralmente faz isso percorrendo essa árvore de acessibilidade.
Com o DevTools do Chrome, você pode inspecionar as propriedades semânticas de um elemento propriedades e analisar a posição dele na árvore de acessibilidade.
Próximas etapas
Depois de saber um pouco sobre semântica e como elas auxiliam a navegação do leitor de tela, não é possível olhar diferentes para as páginas que você cria. Na próxima seção, vamos dar um passo atrás e considerar como todo o contorno de uma página pode ser comunicadas usando cabeçalhos e pontos de referência eficazes.