Rótulos e alternativas de texto
Para que um leitor de tela apresente uma IU falada ao usuário, os elementos significativos devem ter rótulos adequados ou alternativas de texto. Um rótulo ou texto alternativo fornece a um elemento seu 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 do elemento, ele fornece o contexto do usuário para que ele possa entender com qual tipo de elemento está interagindo e como é representado na página. Se um nome não estiver presente, um leitor de tela apenas anunciará a função do elemento. Imagine tentar navegar em uma página e ouvir "botão", "caixa de seleção", "imagem" sem qualquer contexto adicional. É por isso que a rotulagem e as 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 Chrome DevTools:
- Clique com o botão direito em um elemento e escolha Inspecionar. Isso abre o painel DevTools Elements.
- 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.
Quer você esteja olhando para um img com alt ou uma input com um label, todos esses cenários resultam no mesmo resultado: dar a um elemento seu nome acessível.
Verificar se faltam nomes #
Há diferentes maneiras de adicionar um nome acessível a um elemento, dependendo de seu tipo. A tabela a seguir lista os tipos de elemento mais comuns que precisam de nomes e links acessíveis para explicações sobre como adicioná-los.
Rotular documentos e frames #
Cada página deve ter um title que explica resumidamente do que trata a página. O title dá à página 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 "Mary's Maple Bar Fast-Baking Recipe":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>Da mesma forma, qualquer frame ou iframe deve ter atributos de title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>Embora o iframe possa conter seu próprio title interno, um leitor de tela geralmente para no limite do quadro e anuncia a função do elemento - "frame" - e seu nome acessível, fornecido pelo atributo title Isso permite que o usuário decida se deseja entrar no frame ou ignorá-lo.
Incluir alternativas de texto para imagens e objetos #
Um img deve sempre ser acompanhado por um alt para dar à imagem seu nome acessível. Se a imagem não carregar, o alt é usado como um espaço reservado para que os usuários tenham uma ideia do que a imagem estava tentando transmitir.
Escrever um bom alt é um pouco uma arte, mas existem algumas diretrizes que você pode seguir:
- Determine se a imagem fornece conteúdo que, de outra forma, seria difícil de obter com a leitura do texto ao redor.
- Em caso afirmativo, transmita o conteúdo da forma mais sucinta possível.
Se a imagem atuar como decoração e não fornecer nenhum conteúdo útil, você pode atribuir a ela um alt="" vazio para removê-la da árvore de acessibilidade.
Imagens como links e entradas #
Uma imagem envolvida em um link deve usar o alt da 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 deve conter um alt que descreve 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 integrados #
Elementos <object>, que normalmente são usados para integrações como Flash, PDFs ou ActiveX, também devem conter texto alternativo. Semelhante às imagens, este texto é exibido se o elemento falhar na renderização. O texto alternativo vai dentro do object como texto normal, como "Relatório anual" abaixo:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>Botões e links de rótulos #
Botões e links costumam ser cruciais para a experiência de um site, e é importante que ambos tenham nomes acessíveis.
Botões #
Um button sempre tenta calcular seu nome acessível usando seu conteúdo de texto. Para botões que não fazem parte de um form, escrever uma ação clara como o conteúdo do texto pode ser tudo de 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 para o botão. Por exemplo, os botões usados em um editor O que você vê é o que você obtém (WYSIWYG) para formatar texto são normalmente 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 atributo 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 #
Semelhante aos botões, os links recebem seu nome acessível principalmente de seu conteúdo de texto. Um bom truque ao criar um link é colocar a parte mais significativa do texto no próprio link, em vez de palavras de preenchimento como "Aqui" ou "Leia mais".
Not descriptive enough
Check out our guide to web performance <a href="/guide">here</a>.Useful content!
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 textos de preenchimento repetitivos, esses atalhos se tornam muito menos úteis:
Rotular os elementos do formulário #
Existem 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 clique para a caixa de seleção, o que também é útil para usuários de mouse ou touchscreen. Para associar um rótulo a um elemento:
- Coloque o elemento de entrada dentro de um elemento de rótulo
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>- Ou use o rótulo
foratributo e consulte oid
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>Quando a caixa de seleção está marcada corretamente, o leitor de tela pode relatar que o elemento tem uma função de caixa de seleção, está em um estado marcado e é denominado "Receber ofertas promocionais?" como no exemplo do VoiceOver abaixo:
Does this image have an accessible name?
Yes. Give an image an accessible name by adding an alt attribute.
<object type="application/pdf" data="/report.pdf" alt="Annual report"></object>Does this object have an accessible name?
No. Give an <object> element a name by providing text content. (An alt attribute on an object will not be read by assistive technologies.)
This sample renders an icon button:
<button>
<svg class="icon">
<use xlink:href="#icon-1" />
</svg>
</button>Does this button have an accessible name?
No. Give a button an accessible name by providing text content, an aria-label attribute, or an aria-labelledby attribute.
This sample renders an icon button with a tooltip that appears on hover and focus:
<button>
<svg class="icon">
<use xlink:href="#icon-1" />
</svg>
<span class="tooltip hidden">Open menu</span>
</button>Does this button have an accessible name?
Yes. Even if the button's tooltip is visually hidden using CSS, assistive technologies can still read its text content.
Caution: When visually hiding button text, use CSS rather than the hidden attribute. The hidden attribute removes the element from the accessibility tree.
<label>
<input type="checkbox" value="subscribe"></input>
Subscribe to the newsletter?
</label>Does this checkbox have an accessible name?
Yes. The label is associated with the checkbox because the label is the checkbox's parent. So, assistive technologies treat the label's text content as the input's name.
<input type="checkbox" value="subscribe"></input>
<label for="subscribe">Subscribe to the newsletter?</label>Does this checkbox have an accessible name?
No. The checkbox's value attribute indicates what text will be saved when the form is submitted, but assistive technologies don't read it. To provide an accessible name, add an id attribute with the value subscribe to associate the checkbox with the label.
Does this image have an accessible name?
Yes. Give an image an accessible name by adding an alt attribute.
<object type="application/pdf" data="/report.pdf" alt="Annual report"></object>Does this object have an accessible name?
No. Give an <object> element a name by providing text content. (An alt attribute on an object will not be read by assistive technologies.)
This sample renders an icon button:
<button>
<svg class="icon">
<use xlink:href="#icon-1" />
</svg>
</button>Does this button have an accessible name?
No. Give a button an accessible name by providing text content, an aria-label attribute, or an aria-labelledby attribute.
This sample renders an icon button with a tooltip that appears on hover and focus:
<button>
<svg class="icon">
<use xlink:href="#icon-1" />
</svg>
<span class="tooltip hidden">Open menu</span>
</button>Does this button have an accessible name?
Yes. Even if the button's tooltip is visually hidden using CSS, assistive technologies can still read its text content.
Caution: When visually hiding button text, use CSS rather than the hidden attribute. The hidden attribute removes the element from the accessibility tree.
<label>
<input type="checkbox" value="subscribe"></input>
Subscribe to the newsletter?
</label>Does this checkbox have an accessible name?
Yes. The label is associated with the checkbox because the label is the checkbox's parent. So, assistive technologies treat the label's text content as the input's name.
<input type="checkbox" value="subscribe"></input>
<label for="subscribe">Subscribe to the newsletter?</label>Does this checkbox have an accessible name?
No. The checkbox's value attribute indicates what text will be saved when the form is submitted, but assistive technologies don't read it. To provide an accessible name, add an id attribute with the value subscribe to associate the checkbox with the label.