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 adequados. Um rótulo ou texto alternativo atribui a um elemento o nome acessível, uma das principais propriedades para expressar a semântica do elemento na árvore de acessibilidade.

Quando o nome de um elemento é combinado com a função dele, o contexto do usuário é fornecido para que ele possa entender com qual tipo de elemento ele está interagindo e como ele é representado na página. Se um nome não estiver presente, um leitor de tela só vai anunciar o papel do elemento. Imagine tentar navegar por uma página e ouvir "botão", "caixa de seleção", "imagem" sem nenhum contexto adicional. Por isso, rótulos e alternativas de texto são essenciais para uma boa experiência acessível.

Inspecionar o nome de um elemento

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

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

Seja um img com texto alt ou um input com label, todos esses cenários resultam no mesmo objetivo: dar a um elemento o nome acessível.

Verificar se há nomes ausentes

Há maneiras diferentes de adicionar um nome acessível a um elemento, dependendo do tipo dele. 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 Etiquetar documentos e frames
Elementos <frame> ou <iframe> Etiquetar documentos e frames
Elementos de imagem Inclua alternativas de texto para imagens e objetos
<input type="image"> elementos Inclua alternativas de texto para imagens e objetos
<object> elementos Inclua alternativas de texto para imagens e objetos
Botões Rotular botões e links
Links Rotular botões e links
Elementos de formulário Marcar elementos de formulário

Rotular documentos e quadros

Cada página precisa ter um elemento title que explique brevemente sobre o que ela trata. O elemento title dá à 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 rápida de barras de bordo da Mary":

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

Da mesma forma, todos os elementos frame ou iframe precisam 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 a função do elemento ("frame") e o nome acessível, fornecido pelo atributo title. Isso permite que o usuário decida se quer entrar no frame ou ignorá-lo.

Incluir alternativas de texto para imagens e objetos

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

Escrever um bom texto alt é quase uma arte, mas há algumas diretrizes que você pode seguir:

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

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

Uma imagem inserida em um link precisa usar o atributo alt do img para descrever para onde o usuário vai 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 geralmente são usados para incorporações como Flash, PDFs ou ActiveX, também precisam conter texto alternativo. Assim como nas imagens, esse texto é exibido se o elemento não for renderizado. O texto alternativo vai dentro do elemento object como texto normal, como "Relatório anual" abaixo:

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

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

Botões

Um elemento button sempre tenta calcular o nome acessível usando o conteúdo de texto. Para botões que não fazem parte de um form, escrever uma ação clara como 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 quarto&quot;.

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

Um botão de ícone alinhado à esquerda.

Ao trabalhar com botões de ícone, pode ser útil atribuir a eles um nome acessível explícito usando o atributo aria-label. 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 recebem o nome acessível principalmente do conteúdo de texto. Um bom truque ao criar um link é colocar o texto mais significativo no próprio link, em vez de palavras de enchimento como "Aqui" ou "Leia mais".

Não é suficientemente descritivo
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 tornam muito menos úteis:

Menu de links do VoiceOver preenchido com a palavra &quot;aqui&quot;.
Exemplo do VoiceOver, um leitor de tela para macOS, mostrando o menu de navegação por links.

Rotular elementos de formulário

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 alvo de cliques para a caixa de seleção, o que também é útil para usuários de mouse ou tela sensível ao toque. Para associar um rótulo a um elemento, faça o seguinte:

  • Coloque 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 remeta ao id do elemento
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Quando a caixa de seleção tiver sido 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;

TODO: DevSite - avaliação de pensar e verificar