Rótulos e alternativas de texto

Rob Dodson

Para que um leitor de tela apresente uma interface de usuário falada ao usuário, elementos devem ter rótulos ou alternativas de texto adequadas. Um rótulo ou texto uma das principais propriedades é atribuir ao elemento um name acessível, para expressar a semântica de elementos na árvore de acessibilidade.

Quando o nome de um elemento é combinado com o role dele, ele dá ao elemento contexto do usuário para que ele possa entender com que tipo de elemento estão interagindo e como ela é representada na página. Se um nome não estiver presente, um o leitor de tela anuncia apenas a função do elemento. Imagine tentar navegar uma página e ouvir “botão” "caixa de seleção", "imagem" sem a necessidade de contexto. É por isso que rótulos e alternativas de texto são cruciais para uma boa mais 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 DevTools Elementos.
  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 calculado de um botão.
.

Se você estiver visualizando uma img com texto alt ou uma input com um label, todos esses cenários resultam no mesmo resultado: fornecer uma o nome acessível do elemento.

Verificar se faltam nomes

Há diferentes maneiras de adicionar um nome acessível a um elemento, dependendo do tipo. A tabela a seguir lista os tipos de elemento 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 Incluir alternativas de texto para imagens e objetos
<input type="image"> elementos Incluir alternativas de texto para imagens e objetos
<object> elementos Incluir alternativas de texto para imagens e objetos
Botões Links e botões de etiqueta
Links Links e botões de etiqueta
Elementos do formulário Elementos de formulário de rótulo

Rotular documentos e frames

Cada página deve ter um title que explica brevemente sobre o que é a página. O elemento title fornece da página ao seu nome acessível. Quando um leitor de tela entra na página, este é o primeiro texto anunciado.

Por exemplo, a página abaixo tem o título "Receita rápida de panificação da Maria's Maple Bar":

<!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 o leitor de tela geralmente para no limite do frame e anuncia o elemento papel ("frame") e o nome acessível dele, 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 vir acompanhado de uma alt para dar à imagem um nome acessível. Se a imagem não for carregada, o O texto alt é usado como um marcador para que os usuários tenham uma ideia do que a imagem era tentando transmitir.

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

  1. Determine se a imagem tem conteúdo que seria difícil de com a leitura do texto ao redor.
  2. Se for o caso, transmita o conteúdo da forma mais sucinta possível.

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

Uma imagem unida a um link precisa usar o atributo alt do img para descrever que o usuário acessará 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 uma imagem ele deve conter o texto alt que descreve a ação que ocorre quando o usuário clicar no botão:

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

Objetos incorporados

Elementos <object>, que normalmente são usados para incorporações como Flash, PDFs ou ActiveX também deve conter texto alternativo. Semelhante às imagens, esse texto é exibido se houver falha na renderização do elemento. O texto alternativo fica dentro da object elemento como texto normal, como "Relatório anual" abaixo:

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

Muitas vezes, botões e links 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 calcular o nome acessível usando o o conteúdo de texto. Para botões que não fazem parte de um form, escrever um ação, pois o conteúdo de texto pode ser tudo de que você precisa para criar um bom conteúdo nome.

<button>Book Room</button>

Um formulário para dispositivos móveis com um &quot;Book Room&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 fonte de um ícone para fornecer o conteúdo de texto para o botão. Por exemplo: os botões usados em um editor What You See Is What You Get (WYSIWYG) para formatar normalmente 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 uma mensagem explícita nome acessível usando o atributo aria-label. aria-label substitui todos o conteúdo de texto dentro do botão, permitindo descrever 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 usam principalmente o nome acessível no texto conteúdo. Um bom truque ao criar um link é colocar a parte mais significativa de texto no próprio link, em vez de palavras de preenchimento como "Aqui" ou "Leia Mais".

Não há descrições suficientes
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 dos links da página. Se os links estiverem cheios de texto de preenchimento repetitivo, eles os 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 a navegação por no menu de 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 destino de cliques para a caixa de seleção, o que também é útil para usuários de mouse ou tela touch. Para associar um rótulo com 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 refira-se 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 um papel de caixa de seleção, está em um estado marcado e se chama "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 "Pensar e verificar"