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 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, 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 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 tudo de cima para baixo. Você precisa de uma maneira de navegar pelo conteúdo de maneira eficiente.
Muitas vezes, os desenvolvedores têm a concepção errada de que os leitores de tela são tediosos e lentos de uso ou que tudo na tela precisa estar em foco para que o leitor de tela possa encontrá-lo. Geralmente, esse não é o caso.
Os usuários de leitores de tela geralmente dependem de 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.
Como usar cabeçalhos de maneira 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. Ao testar leitores de tela como VoiceOver, NVDA, JAWS e ChromeVox, você descobrirá que a lista de cabeçalhos segue a ordem do DOM, não a ordem visual.
Isso é verdade 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 é diretamente baseada na ordem do DOM. Isso significa que uma estrutura de título apropriada é mais importante do que nunca.
Na maioria das páginas bem estruturadas, os níveis de cabeçalho são aninhados para indicar relações de pai-filho entre blocos de conteúdo. A lista de verificação WebAIM se refere repetidamente a essa técnica.
- 1.3.1 menciona que "a marcação semântica é usada para designar títulos"
- A seção 2.4.1 menciona a estrutura de cabeçalhos como uma técnica para ignorar blocos de conteúdo.
- Na seção 2.4.6, abordamos alguns detalhes sobre como escrever títulos ú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 deliberadamente alguns títulos para fora da tela para torná-los especificamente acessíveis apenas para 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 cabeçalhos quando o design visual não exige ou 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 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 verificar uma lista de cabeçalhos de páginas) 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 hits a links que realmente contêm o termo, em vez de 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 do link for significativo. Por exemplo, aqui estão alguns padrões comuns que tornam os links difíceis de encontrar.
- Tags âncora sem atributos
href. Geralmente 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. Isso faz com que o leitor de tela interprete o conteúdo como um link, e a funcionalidade do botão é perdida. Nesses casos, substitua a tag âncora por um botão real e defina um estilo adequado.
- Imagens usadas como conteúdo do link. Às vezes necessárias, imagens com links podem
não ser úteis para leitores de tela. Para garantir que o link seja exposto corretamente à
tecnologia assistiva, confira se a imagem tem o texto de 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 "Confira este tutorial sobre telas" para ajudar os leitores de tela a fornecer um contexto significativo sobre os links.
O rotor também pode extrair uma lista de controle de forma. Usando 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 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 levam em consideração.
Alguns desenvolvedores tentam amenizar essa situação fornecendo textos exclusivos para leitores de tela com a grafia fonética. Aqui está uma regra simples para a ortografia fonética: não faça isso, porque isso só piora o problema. 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 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 pontos de referência 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 especificamente fornecem pistas estruturais na página
sem forçar nenhum estilo integrado, o que precisa ser feito com CSS.
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.