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

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

Alice Boxhall

Dave Gash

Meggin Kearney

Você aprendeu sobre affordances, semântica e como tecnologias assistivas usam da árvore de acessibilidade para criar uma experiência de usuário alternativa para seus usuários. Escrever um HTML expressivo e semântico oferece muitas acessibilidade com muito pouco esforço, já que muitos elementos padrão têm o semântica e com comportamento de suporte integrados.

Nesta lição, abordaremos 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 com muitos controles, mas pouco conteúdo, é fácil verificar a página para encontrar de que precisa. Mas em uma página com muito conteúdo, como uma entrada da Wikipédia ou uma notícia não é prático ler tudo de cima para baixo. você precisam de uma maneira eficiente de navegar pelo conteúdo.

Os desenvolvedores muitas vezes têm a concepção errada de que leitores de tela são tediosos e lentos usar ou que tudo na tela tenha que ser focalizável para a tela leitor para 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. Mais frequentes leitores de tela têm maneiras fáceis de isolar e analisar uma lista de cabeçalhos de páginas, uma um recurso importante chamado rotor. Vamos conferir como usar cabeçalhos HTML eficaz para oferecer suporte a esse recurso.

Como usar cabeçalhos de maneira eficaz

Primeiro, reiteramos um ponto anterior: ordem DOM é importante, não apenas para ordem de foco, mas para a ordem do leitor de tela. Ao testar leitores de tela como VoiceOver, NVDA, JAWS e ChromeVox, você encontrará a lista de cabeçalhos a seguir a ordem do DOM e não a ordem visual.

Isso é verdade para leitores de tela em geral. Como os leitores de tela interagem a árvore de acessibilidade, que é baseada na árvore do DOM, a que um leitor de tela percebe se baseia diretamente 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 dos cabeçalhos são aninhados para indicar relações pai-filho entre blocos de conteúdo. O WebAIM lista de verificação se refere repetidamente a esse técnica.

• 1.3.1 menciona que "a marcação semântica é usada para designar títulos"
• 2.4.1 menciona a estrutura de cabeçalhos como uma técnica para ignorar blocos de conteúdo
• 2.4.6 discute 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 cabeçalhos precisam estar visíveis na tela. A Wikipédia, por exemplo, usa uma técnica que coloca deliberadamente alguns títulos fora da tela para torná-los especificamente acessível 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, esta 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

Embora as páginas com bons títulos ajudem os usuários de leitores de tela a navegar, existem outros elementos que podem ser usados para navegar pela página, incluindo links, formulários controles 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 um wiki, há muitos links, então o leitor pode procurar por um nos links. Isso limita os hits a links que realmente contêm o em vez de todas as ocorrências do termo na página.

Esse recurso é útil somente se o leitor de tela puder encontrar os links e o link o significado do texto. 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 páginas únicas aplicativos, esses destinos de link causarão problemas para leitores de tela. Você pode Leia mais neste artigo sobre apps de página única.
• Botões implementados com links. Isso faz com que o leitor de tela interpretará o conteúdo como um link, e a funcionalidade do botão será perdida. Para nesses casos, substitua a tag âncora por um botão real e defina um estilo adequadamente.
• Imagens usadas como conteúdo do link. Às vezes, necessárias, imagens com links podem ser inutilizável para leitores de tela. Para garantir que o link seja exposto corretamente tecnologia adaptativa, verifique se a imagem tem alt texto de atributo.

O texto de link inapropriado é outro problema. Texto clicável, como "Saiba mais" ou "clique em aqui" não fornece informações semânticas sobre para onde o link vai. Em vez disso, use texto descritivo como "saiba mais sobre design responsivo" ou "veja esta tela tutorial" para ajudar os leitores de tela a fornecer contexto significativo sobre links.

O rotor também pode extrair uma lista de controle de forma. 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, uma tela o leitor pode pronunciar "Udacity" como "oo-dacity", ou ler um número de telefone como um número inteiro grande ou ler um texto em letras maiúsculas como se fosse um acrônimo. Curiosamente, os usuários de leitores de tela estão muito acostumados com essa peculiaridade e consideração.

Alguns desenvolvedores tentam amenizar essa situação oferecendo versões um texto escrito foneticamente. Aqui está uma regra simples para a ortografia fonética: não faça isso; só piora o problema! Se, por exemplo, um usuário estiver usando em uma linha braille, a palavra será escrita incorretamente, causando confusão. Os leitores de tela permitem que palavras sejam escritas em voz alta, então deixe para o 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 encontre o conteúdo principal e um conjunto de pontos de referência de navegação fornecidos pelo HTML pontos de referência.

O HTML5 introduziu alguns novos elementos que ajudam a definir a estrutura semântica do página, incluindo header, footer, nav, article, section, main e aside. Esses elementos fornecem pistas estruturais específicas na página sem forçar nenhum estilo integrado (o que deve ser feito com o CSS).

Elementos estruturais semânticos substituem vários blocos div repetitivos. fornecem uma maneira mais clara e descritiva de expressar intuitivamente a estrutura da página para autores e leitores.