A função da semântica na navegação de páginas
Você aprendeu sobre affordances, semântica e como as tecnologias adaptativas usam a árvore de acessibilidade para criar uma experiência de usuário alternativa para os usuários. Escrever um HTML expressivo e semântico oferece muita acessibilidade com muito pouco esforço, já que muitos elementos padrão têm a semântica e o comportamento de suporte integrados.
Nesta lição, abordaremos algumas das semânticas menos óbvias que são muito importantes para usuários de leitores de tela, especialmente em termos de navegação. Em uma página simples com muitos controles, mas pouco conteúdo, é fácil procurar o que você precisa. No entanto, em uma página com muito conteúdo, como uma entrada da Wikipédia ou um agregador de notícias, não é prático ler todo o conteúdo da página. É preciso encontrar uma maneira eficiente de navegar pelo conteúdo.
Os desenvolvedores frequentemente têm a concepção errada de que leitores de tela são lentos e tediosos de usar, ou que todos os elementos da tela precisam ser focáveis para que o leitor de tela os encontre. Esse frequentemente não é o caso.
Os usuários de leitores de tela muitas vezes usam uma lista de cabeçalhos para localizar informações. A maioria dos leitores de tela tem maneiras fáceis de isolar e analisar uma lista de cabeçalhos de páginas, um recurso importante chamado rotor. Vamos conferir como usar cabeçalhos HTML de forma eficaz para oferecer suporte a esse recurso.
Usar cabeçalhos de forma eficaz
Primeiro, reiteramos um ponto anterior: a ordem do DOM é importante, não apenas para a ordem de foco, mas para a ordem do leitor de tela. Conforme você experimenta com leitores de tela como o VoiceOver, o NVDA, o JAWS e o ChromeVox, você descobrirá que a lista de cabeçalhos segue a ordem do DOM, não a ordem visual.
Isso é válido para leitores de tela em geral. Como os leitores de tela interagem com a árvore de acessibilidade e ela é baseada na árvore de DOM, a ordem que o leitor de tela identifica é baseada diretamente na ordem do DOM. Isso significa que uma estrutura de cabeçalhos apropriada é mais importante do que nunca.
Na maioria das páginas bem estruturadas, os níveis dos cabeçalhos são aninhados para indicar relações pai-filho entre os blocos de conteúdo. A lista de verificação WebAIM menciona essa técnica várias vezes.
- 1.3.1 menciona que "a marcação semântica é usada para designar títulos"
- 2.4.1 menciona que a estrutura de cabeçalhos é uma técnica para ignorar blocos de conteúdo
- 2.4.6 discute alguns detalhes sobre como escrever cabeçalhos úteis
- A versão 2.4.10 declara que "seções individuais de conteúdo são designadas usando cabeçalhos, quando apropriado".
Nem todos os cabeçalhos precisam estar visíveis na tela. A Wikipédia, por exemplo, usa uma técnica que coloca propositalmente alguns cabeçalhos fora da tela para torná-los acessíveis apenas a leitores de tela e outras tecnologias adaptativas.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Para aplicativos complexos, essa pode ser uma boa forma de acomodar cabeçalhos quando o design visual não exige ou tem espaço para um cabeçalho visível.
Outras opções de navegação
Embora páginas com bons títulos ajudem os usuários de leitores de tela a navegar, há outros elementos que eles podem usar para navegar por uma página, incluindo links, controles de formulário e pontos de referência.
Os leitores podem usar o recurso de rotor do leitor de tela (uma maneira fácil de isolar e analisar uma lista de cabeçalhos de página) para acessar uma lista de links na página. Às vezes, como em uma wiki, há muitos links, então o leitor pode pesquisar um termo neles. Isso limita os resultados a links que realmente contêm o termo, em vez de mostrar todas as ocorrências do termo na página.
Esse recurso é útil apenas se o leitor de tela puder encontrar os links e o texto deles for significativo. Por exemplo, aqui estão alguns padrões comuns que tornam os links difíceis de encontrar.
- Tags de âncora sem atributos
href. Frequentemente usados em aplicativos de página única, esses destinos de link causam problemas para leitores de tela. Saiba mais neste artigo sobre apps de página única. - Botões implementados com links. Eles fazem com que o leitor de tela interprete o conteúdo como um link e a funcionalidade de botão é perdida. Para esses casos, substitua a tag de âncora por um botão real e estilize-a adequadamente.
- Imagens usadas como conteúdo de link. Às vezes, necessárias, imagens com links podem
não ser utilizáveis para leitores de tela. Para garantir que o link seja corretamente exposto à
tecnologia assistiva, confira se a imagem tem o texto do atributo
alt.
O texto de link inapropriado é outro problema. Textos clicáveis como "saiba mais" ou "clique aqui" não fornecem informações semânticas sobre para onde o link vai. Em vez disso, use texto descritivo como "saiba mais sobre o design responsivo" ou "consulte este tutorial sobre canvas" para ajudar os leitores de tela a fornecer contexto significativo sobre os links.
O rotor também pode recuperar uma lista de controles de formulário. Com essa lista, os leitores podem pesquisar itens específicos e ir diretamente a eles.
Um erro comum que os leitores de tela cometem é a pronúncia. Por exemplo, um leitor de tela pode pronunciar "Udacity" como "oo-dacity", ler um número de telefone como um número inteiro grande ou ler texto em maiúsculas como se fosse um acrônimo. Curiosamente, os usuários de leitores de tela estão bastante acostumados com essa peculiaridade e a levam em consideração.
Alguns desenvolvedores tentam amenizar essa situação fornecendo textos exclusivos para leitores de tela com ortografia fonética. Uma regra simples para a ortografia fonética: evite-a. Ela só piora a situação. Se, por exemplo, um usuário estiver usando uma linha braille, a palavra será escrita incorretamente, causando mais confusão. Os leitores de tela permitem que palavras sejam escritas em voz alta, então deixe que o leitor controle a própria experiência e decida quando isso é necessário.
Os leitores podem usar o rotor para ver uma lista de marcos. Essa lista ajuda os leitores a encontrar o conteúdo principal e definir um conjunto de marcos de navegação fornecidos pelos elementos de marcos HTML.
O HTML5 introduziu alguns novos elementos para ajudar a definir a estrutura semântica da
página, incluindo header, footer, nav, article, section, main e
aside. Esses elementos especificamente fornecem indicações estruturais na página
sem forçar estilos incorporados (o que é obrigatório no CSS).
Elementos estruturais semânticos substituem o uso de vários blocos div repetitivos e
oferecem uma maneira mais clara e descritiva de expressar a estrutura da página
intuitivamente para autores e leitores.