Rótulos e alternativas de texto

Rob dodson

Para que um leitor de tela apresente uma interface falada ao usuário, os elementos significativos precisam ter rótulos ou alternativas de texto adequadas. Uma alternativa de rótulo ou texto fornece a um elemento o nome acessível, uma das principais propriedades para expressar a semântica de elementos na árvore de acessibilidade.

Quando o nome de um elemento é combinado com o papel do elemento, ele fornece ao usuário contexto para que ele possa entender com que tipo de elemento está interagindo e como isso é representado na página. Se um nome não estiver presente, um leitor de tela anunciará apenas a função do elemento. Imagine tentar navegar em uma página e ouvir "botão", "caixa de seleção" ou "imagem" sem nenhum contexto adicional. É por isso que as alternativas de rotulagem e texto são cruciais para uma experiência boa e acessível.

Inspecionar o nome de um elemento

É fácil verificar o nome acessível de um elemento usando o DevTools do Chrome:

  1. Clique com o botão direito do mouse em um elemento e escolha Inspecionar. Isso abre o painel Elementos do DevTools.
  2. No painel "Elementos", procure o painel Acessibilidade. Ele pode estar oculto por trás de um símbolo ».
  3. No menu suspenso Propriedades computadas, procure a propriedade Nome.
Painel de acessibilidade do DevTools mostrando o nome calculado de um botão.

Esteja você analisando uma img com texto alt ou uma input com um label, todos esses cenários resultam no mesmo resultado: atribuir um nome acessível a um elemento.

Verificar se há nomes ausentes

Há maneiras diferentes de adicionar um nome acessível a um elemento, dependendo do tipo. A tabela a seguir lista os tipos de elementos mais comuns que precisam de nomes acessíveis e links para explicações sobre como adicioná-los.

Tipo de elemento Como adicionar um nome
Documento HTML Rotular documentos e frames
Elementos <frame> ou <iframe> Rotular documentos e frames
Elementos de imagem Inclua texto alternativo para imagens e objetos
Elementos <input type="image"> Inclua texto alternativo para imagens e objetos
Elementos <object> Inclua texto alternativo para imagens e objetos
Botões Botões e links de marcadores
Links Botões e links de marcadores
Elementos do formulário Elementos do formulário de rótulo

Rotular documentos e frames

Todas as páginas precisam ter um elemento title que explique brevemente sobre o que é a página. O elemento title atribui à página o nome acessível. Quando um leitor de tela entra na página, esse é o primeiro texto anunciado.

Por exemplo, a página abaixo tem o título "Receita de pães e bolos da Maria":

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

Da mesma forma, qualquer elemento frame ou iframe precisa ter atributos title:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

Embora o conteúdo de um iframe possa conter o próprio elemento title interno, um leitor de tela geralmente para no limite do frame e anuncia o papel do elemento ("frame") e o nome acessível dele, fornecido pelo atributo title. Isso permite que o usuário decida se quer inserir o frame ou ignorá-lo.

Incluir alternativas em texto para imagens e objetos

Um img precisa sempre ser acompanhado por um atributo alt para dar à imagem um nome acessível. Se a imagem não for carregada, o texto alt será usado como um marcador para que os usuários tenham uma noção do que a imagem estava tentando transmitir.

Escrever um bom texto em alt é um pouco artístico, mas existem algumas diretrizes que você pode seguir:

  1. Determine se a imagem fornece conteúdo que seria difícil de alcançar lendo o texto ao redor.
  2. Se sim, transmita o conteúdo da forma mais sucinta possível.

Se a imagem atuar como decoração e não fornecer conteúdo útil, você poderá atribuir a ela um atributo alt="" vazio para removê-la da árvore de acessibilidade.

Uma imagem unida a um link precisa usar o atributo alt do img para descrever para onde o usuário será direcionado se clicar no link:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

Da mesma forma, se um elemento <input type="image"> for usado para criar um botão de imagem, ele precisará conter um texto alt que descreva a ação que ocorre quando o usuário clica no botão:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

Objetos incorporados

Os elementos <object>, que normalmente são usados para incorporações como Flash, PDFs ou ActiveX, também precisam conter texto alternativo. Semelhante às imagens, esse texto será exibido se o elemento não for renderizado. O texto alternativo é inserido no elemento object como um texto normal, como "Relatório anual" abaixo:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

Botões e links geralmente são cruciais para a experiência de um site, e é importante que ambos tenham bons nomes acessíveis.

Botões

Um elemento button sempre tenta computar o nome acessível usando o conteúdo de texto. Para botões que não fazem parte de uma form, escrever uma ação clara, já que o conteúdo de texto pode ser tudo o que você precisa para criar um bom nome acessível.

<button>Book Room</button>

Um formulário para dispositivos móveis com um botão &quot;Reservar sala&quot;.

Uma exceção comum a essa regra são os botões de ícones. Um botão de ícone pode usar uma imagem ou fonte de ícone para fornecer o conteúdo de texto para o botão. Por exemplo, os botões usados em um editor WYSIWYG para formatar texto geralmente são apenas símbolos gráficos:

Um botão de ícone de alinhamento à esquerda.

Ao trabalhar com botões de ícone, pode ser útil dar a eles um nome acessível explícito usando o atributo aria-label. O aria-label substitui qualquer conteúdo de texto dentro do botão, permitindo que você descreva claramente a ação para qualquer pessoa que use um leitor de tela.

<button aria-label="Left align"></button>

Assim como os botões, os links têm o nome acessível principalmente pelo conteúdo de texto. Um bom truque ao criar um link é inserir o texto mais significativo no próprio link, em vez de preencher palavras como "aqui" ou "leia mais".

Não é descritivo o suficiente
Check out our guide to web performance <a href="/guide">here</a>.
Conteúdo útil!
Check out <a href="/guide">our guide to web performance</a>.

Isso é especialmente útil para leitores de tela que oferecem atalhos para listar todos os links na página. Se os links estiverem cheios de texto de preenchimento repetitivo, esses atalhos se tornarão muito menos úteis:

O menu de links do VoiceOver está cheio com a palavra &quot;aqui&quot;.
Exemplo do VoiceOver, um leitor de tela para macOS, mostrando o menu "Navegar por links".

Elementos do formulário de rótulo

Há duas maneiras de associar um rótulo a um elemento de formulário, como uma caixa de seleção. Qualquer um dos métodos faz com que o texto do rótulo também se torne um destino de clique para a caixa de seleção, o que também é útil para usuários de mouse ou tela touch. Para associar um rótulo a um elemento:

  • Colocar o elemento de entrada dentro de um elemento de rótulo
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • Ou use o atributo for do rótulo e faça referência ao id do elemento
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Quando a caixa de seleção for rotulada corretamente, o leitor de tela poderá informar que o elemento tem uma função de caixa de seleção, está em um estado marcado e tem o nome "Receber ofertas promocionais?" como no exemplo do VoiceOver abaixo:

Saída de texto do VoiceOver mostrando &quot;Receber ofertas promocionais?&quot;

O que fazer: DevSite - Avaliação de reflexão e verificação