Semântica e navegação de conteúdo

O papel da semântica na navegação nas páginas

Alice boxhall
Alice Boxhall
Dave gash
Dave Gash
Meggin kearney
Meggin Kearney

Você aprendeu sobre affordances, semântica e como as tecnologias adaptativas usam a árvore de acessibilidade para criar uma experiência alternativa para os usuários. Escrever HTML semântico e expressivo oferece muita acessibilidade com 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 encontrar 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 com eficiência.

Os desenvolvedores geralmente têm a concepção errada de que os leitores de tela são tediosos e lentos ou que tudo na tela precisa ser focalizável para que o leitor possa encontrá-lo. Muitas vezes, esse não é o caso.

Os usuários de leitores de tela muitas vezes 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 ver como usar cabeçalhos HTML de maneira eficaz para dar suporte a esse recurso.

Como usar cabeçalhos de forma eficaz

Primeiro, vamos reiterar um ponto anterior: a ordem do DOM é importante, 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ê descobrirá que a lista de cabeçalhos segue a ordem do DOM em vez da 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 percebida por um leitor de tela é, portanto, baseada diretamente na ordem do DOM. Isso significa que uma estrutura de títulos 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 do WebAIM se refere repetidamente a essa técnica.

  • 1.3.1 menciona "A marcação semântica é usada para designar cabeçalhos"
  • 2.4.1 menciona a estrutura do cabeçalho como uma técnica para ignorar blocos de conteúdo
  • O tópico 2.4.6 aborda alguns detalhes para escrever cabeçalhos úteis
  • 2.4.10 afirma que "seções individuais de conteúdo são designadas usando cabeçalhos, quando apropriado".

Nem todos os títulos precisam estar visíveis na tela. A Wikipédia, por exemplo, usa uma técnica que coloca deliberadamente alguns cabeçalhos fora da tela para torná-los especificamente 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 maneira 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

Páginas com bons cabeçalhos ajudam os usuários de leitores de tela a navegar, mas há outros elementos que eles podem usar para navegar por ela, incluindo links, controles de formulários 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. Por isso, o leitor pode pesquisar um termo neles. Isso limita os hits a links que realmente contêm o termo, e não todas as ocorrências do termo na página.

Esse recurso só é útil se o leitor de tela conseguir encontrar os links e o texto deles for significativo. Por exemplo, confira alguns padrões comuns que tornam os links difíceis de encontrar.

  • Tags âncora sem atributos href. Frequentemente usadas em aplicativos de página única, essas segmentações de links causam problemas para leitores de tela. Saiba mais neste artigo sobre apps de página única.
  • Botões que são 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 de âncora por um botão real e defina o estilo adequadamente.
  • Imagens usadas como conteúdo de link. Às vezes, as imagens com links podem ser inutilizáveis para leitores de tela. Para garantir que o link seja exposto corretamente à tecnologia assistiva, confira se a imagem tem texto de atributo alt.

Textos de link ruins são outro problema. Textos clicáveis como "saiba mais" ou "clique aqui" não fornecem informações semânticas sobre o destino do link. Em vez disso, use texto descritivos como "saiba mais sobre design responsivo" ou "confira este tutorial sobre telas" 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. Usando essa lista, os leitores podem pesquisar itens específicos e ir diretamente até eles.

Um erro comum cometido por leitores de tela é a pronúncia. Por exemplo, um leitor de tela pode pronunciar "Udacity" como "oo-dacity", ou ler um número de telefone como um número inteiro grande ou ler um 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 um texto exclusivo para leitores de tela que é escrito foneticamente. Aqui está uma regra simples para 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 estará escrita incorretamente, levando a mais confusão. Os leitores de tela permitem que as palavras sejam escritas em voz alta. Portanto, deixe que o leitor controle a 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 marcos 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 pistas estruturais na página sem forçar um estilo integrado, o que é necessário fazer com o CSS mesmo assim.

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.