O papel 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. Você pode notar que escrever HTML semântico e expressivo 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, vamos abordar algumas semânticas menos óbvias que são muito importantes para usuários de leitores de tela, especialmente em relação à navegação. Em uma página simples com muitos controles, mas sem muito conteúdo, é fácil verificar a página para encontrar o que você precisa. No entanto, em uma página com muito conteúdo, como uma entrada da Wikipedia ou um agregador de notícias, não é prático ler tudo de cima para baixo. Você precisa de uma maneira de navegar pelo conteúdo de maneira eficiente.
Os desenvolvedores muitas vezes têm a ideia errada de que os leitores de tela são tediosos e lentos de usar ou que tudo na tela precisa ser focado para que o leitor de tela o encontre. Mas nem sempre é assim.
Os usuários de leitores de tela geralmente dependem de uma lista de títulos para localizar informações. A maioria dos leitores de tela tem maneiras fáceis de isolar e verificar uma lista de títulos de página, um recurso importante chamado rotor. Vamos conferir como usar títulos HTML de maneira eficaz para oferecer suporte a esse recurso.
Como usar cabeçalhos de forma eficaz
Primeiro, vamos reiterar um ponto anterior: a ordem do DOM importa, não apenas para a ordem de foco, mas também para a ordem do leitor de tela. Ao testar leitores de tela como VoiceOver, NVDA, JAWS e ChromeVox, você vai notar que a lista de cabeçalhos segue a ordem do DOM, e não a ordem visual.
Isso vale para leitores de tela em geral. Como os leitores de tela interagem com a árvore de acessibilidade, e ela é baseada na árvore do DOM, a ordem que um leitor de tela percebe é baseada diretamente na ordem do DOM. Isso significa que uma estrutura de títulos adequada é mais importante do que nunca.
Na maioria das páginas bem estruturadas, os níveis de título são aninhados para indicar relacionamentos pai-filho entre os blocos de conteúdo. A lista de verificação do WebAIM se refere repetidamente a essa técnica.
- 1.3.1 menciona "A marcação semântica é usada para designar títulos"
- 2.4.1 menciona a estrutura de títulos como uma técnica para contornar blocos de conteúdo
- 2.4.6 discute alguns detalhes sobre como escrever títulos úteis.
- 2.4.10 estabelece que "seções individuais de conteúdo são designadas usando títulos, quando apropriado"
Nem todos os títulos precisam estar visíveis na tela. A Wikipedia, por exemplo, usa uma técnica que coloca deliberadamente alguns títulos fora da tela para torná-los acessíveis somente 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 maneira de acomodar títulos quando o design visual não exige ou não tem espaço para um título 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 se mover pela 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 procurar uma lista de títulos da página, para acessar uma lista de links na página. Às vezes, como em um wiki, há muitos links. Por isso, o leitor pode pesquisar um termo dentro dos links. Isso limita os hits aos links que realmente contêm o termo, em vez de cada ocorrência do termo na página.
Esse recurso só é útil se o leitor de tela conseguir encontrar os links e o texto do link for significativo. Por exemplo, confira alguns padrões comuns que dificultam a localização de links.
- Tags de âncora sem atributos
href. Esses destinos de link, usados com frequência em aplicativos de página única, causam problemas para leitores de tela. Leia mais neste artigo sobre apps de página única. - Botões implementados com links. Isso faz com que o leitor de tela interprete o conteúdo como um link, e a funcionalidade do botão é perdida. Para esses casos, substitua a tag âncora por um botão real e estilize-o adequadamente.
- Imagens usadas como conteúdo de link. Às vezes, as imagens vinculadas podem ser
inutilizadas para leitores de tela. Para garantir que o link seja exposto corretamente à
tecnologia adaptativa, verifique se a imagem tem o texto do atributo
alt.
O texto do link ruim é outro problema. Textos clicáveis, como "saiba mais" ou "clique aqui", não fornecem informações semânticas sobre para onde o link leva. Em vez disso, use texto descritivo, como "saiba mais sobre design responsivo" ou "confira este tutorial da tela", para ajudar os leitores de tela a fornecer um contexto significativo sobre os links.
O rotor também pode recuperar uma lista de controles de formulário. Com essa lista, os leitores podem procurar itens específicos e acessá-los diretamente.
Um erro comum cometido pelos leitores de tela é 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 com letras 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 consideram.
Alguns desenvolvedores tentam melhorar essa situação fornecendo texto apenas para leitores de tela com ortografia fonética. Aqui está uma regra simples para a ortografia fonética: não faça isso. Isso só piora o problema. Se, por exemplo, um usuário estiver usando uma linha braille, a palavra será soletrada incorretamente, causando mais confusão. Os leitores de tela permitem que as palavras sejam soletradas em voz alta. Portanto, deixe que o leitor controle a experiência e decida quando isso for necessário.
Os leitores podem usar o rotor para ver uma lista de pontos de referência. Essa lista ajuda os leitores a encontrar o conteúdo principal e um conjunto de pontos de referência de navegação fornecidos por elementos de ponto de referência do HTML.
O HTML5 introduziu alguns novos elementos que ajudam a definir a estrutura semântica da
página, incluindo header, footer, nav, article, section, main e
aside. Esses elementos fornecem especificamente dicas estruturais na página
sem forçar nenhum estilo integrado (o que você precisa fazer com o CSS de qualquer maneira).
Os elementos estruturais semânticos substituem vários blocos div repetitivos e
oferecem uma maneira mais clara e descritiva de expressar intuitivamente a estrutura da página
para autores e leitores.