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:
- Clique com o botão direito do mouse em um elemento e escolha Inspecionar. Isso abre o painel Elementos do DevTools.
- No painel "Elementos", procure o painel Acessibilidade. Ele pode estar oculto
por trás de um símbolo
»
. - No menu suspenso Propriedades computadas, procure a propriedade Nome.
![](https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu.png?authuser=6&hl=pt)
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:
- Determine se a imagem fornece conteúdo que seria difícil de alcançar lendo o texto ao redor.
- 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.
Imagens como links e entradas
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 de marcadores
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>
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:
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>
Links
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".
Check out our guide to web performance <a href="/guide">here</a>.
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 "aqui".](https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74.jpg?authuser=6&hl=pt)
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 aoid
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 "Receber ofertas promocionais?"](https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326.png?authuser=6&hl=pt)
O que fazer: DevSite - Avaliação de reflexão e verificação