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. 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 que rótulos e alternativas de 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 "Elements" das Ferramentas do desenvolvedor.
- No painel "Elementos", procure o painel Acessibilidade. Ele pode estar oculto
atrás de um símbolo
»
. - No menu suspenso Propriedades computadas, procure a propriedade Nome.
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 faltam nomes
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 | Incluir alternativas de texto para imagens e objetos |
<input type="image"> elementos
|
Inclua alternativas de texto para imagens e objetos |
<object> elementos
|
Incluir 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 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
leitor de tela geralmente para no limite do frame e anuncia o papel
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 estar acompanhado por um atributo
alt
para dar à imagem o nome acessível dela. 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
é uma arte, mas há algumas diretrizes
que você pode seguir:
- Determine se a imagem fornece conteúdo que seria difícil de entender apenas lendo o texto ao redor.
- Se for o caso, 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.
Imagens como links e entradas
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>
Botões de marcadores e links
Muitas vezes, botões e links são cruciais para a experiência em 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
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 í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:
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>
Links
Assim como os botões, os links usam principalmente o nome acessível no 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 preenchimento 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 tornam muito menos úteis:
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:
- 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 aoid
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:
O que fazer: DevSite - Avaliação "Pensar e verificar"