Alternativas em Texto

Boas-vindas à primeira aula de critérios. Esta pode ser lida de graça, sem conta, então ela também é a melhor forma de ver como todas as aulas do curso são construídas: uma diretriz, uma seção por critério do Nível A e, dentro de cada seção, as mesmas cinco partes, terminando em como testar.

Esta aula cobre a diretriz 1.1 Alternativas em Texto, que tem um único critério de Nível A. Ele é curto de enunciar e surpreendentemente fácil de errar.

1.1.1 Conteúdo Não Textual

O que ele exige

Todo conteúdo não textual apresentado ao usuário tem uma alternativa em texto que cumpre a mesma finalidade.

"Conteúdo não textual" são imagens, ícones, gráficos, botões de imagem, áudio e vídeo (que também têm critérios próprios), CAPTCHAs e qualquer outra coisa que não seja texto. "Cumpre a mesma finalidade" é a parte que importa: a alternativa precisa dar a uma pessoa que não consegue ver a imagem o mesmo que uma pessoa que enxerga tira dela. Não uma descrição dos pixels. A finalidade.

📖 Understanding 1.1.1 Non-text Content (em inglês)

Quem ele ajuda

• Usuários de leitor de tela, que ouvem a alternativa em texto no lugar da imagem
• Pessoas com baixa visão que usam leitor de tela junto com ampliação
• Usuários de controle por voz, que precisam de um nome para falar quando o controle é um ícone
• Todo mundo numa conexão lenta, quando as imagens não carregam e a alternativa aparece no lugar

Antes 🚫 / Depois ✅

A pergunta mais útil a fazer sobre qualquer imagem é: para que ela serve? A resposta decide o que a alternativa deve dizer.

Uma imagem informativa. A imagem traz uma informação que não está no texto ao redor.

<!-- Antes 🚫 -->
<img src="vendas-t3.png">

<!-- Depois ✅ -->
<img src="vendas-t3.png" alt="Vendas do 3º trimestre: 120 pedidos em julho, 95 em agosto, 140 em setembro">

Sem alt, muitos leitores de tela leem o nome do arquivo, "vendas-t3 ponto png", que não diz nada. Para um gráfico complexo, um alt curto mais os dados completos em uma tabela ou em um texto perto do gráfico é melhor do que espremer tudo em um atributo.

Uma imagem decorativa. A imagem não acrescenta nada de que a pessoa precise, como um elemento decorativo de fundo, um divisor, ou uma foto de banco de imagens ao lado de um título que já diz tudo.

<!-- Antes 🚫 -->
<img src="elemento-decorativo.svg" alt="elemento decorativo azul">

<!-- Depois ✅ -->
<img src="elemento-decorativo.svg" alt="">

Um alt="" vazio diz à tecnologia assistiva para ignorar a imagem. Isso não é o mesmo que um alt ausente: sem o atributo, o leitor de tela não sabe que a imagem é decorativa e muitas vezes lê o nome do arquivo no lugar. Imagens decorativas também podem ser colocadas com background-image no CSS, que a tecnologia assistiva ignora.

Um botão de ícone. A imagem é o único conteúdo de um controle, então a alternativa dela é o nome do controle e precisa descrever a ação, não o desenho.

<!-- Antes 🚫 -->
<button><img src="lixeira.svg"></button>

<!-- Depois ✅ -->
<button><img src="lixeira.svg" alt="Excluir rascunho"></button>

"Lixeira" descreve o desenho. "Excluir rascunho" diz à pessoa o que vai acontecer. A mesma regra vale para um ícone <svg> inline, que pode receber nome com aria-label no botão ou com um texto visualmente oculto dentro dele.

Uma imagem de texto. A imagem contém palavras.

<!-- Antes 🚫 -->
<img src="banner.png" alt="banner">

<!-- Depois ✅ -->
<img src="banner.png" alt="Promoção de verão: 30% de desconto em todos os cursos até sexta">

Quando uma imagem contém texto, a alternativa deve conter o mesmo texto. Melhor ainda: use texto de verdade estilizado com CSS, que também aumenta de tamanho e é traduzido sem problemas.

Uma imagem com link. Uma imagem que é o único conteúdo de um link dá nome ao link, então ela descreve o destino.

<!-- Antes 🚫 -->
<a href="/"><img src="logo.svg" alt="logo"></a>

<!-- Depois ✅ -->
<a href="/"><img src="logo.svg" alt="Página inicial da TAT School"></a>

Exceções

A WCAG lista situações em que não é exigido um equivalente completo, e uma pessoa testadora precisa conhecer cada uma:

• Controles e entrada de dados: se o conteúdo não textual é um controle ou aceita entrada do usuário, ele precisa de um nome que descreva a sua finalidade (o botão de ícone acima)
• Mídias com base em tempo: em áudio e vídeo, a alternativa em texto só precisa identificar a mídia (por exemplo, um título). O conteúdo dela é coberto pela diretriz 1.2, na próxima aula
• Testes ou exercícios: quando descrever o conteúdo o invalidaria (um quiz de "qual é o nome desta pintura"), uma identificação descritiva basta
• Experiências sensoriais: conteúdo feito para criar uma experiência sensorial específica, como uma música ou uma obra de arte visual, precisa de uma identificação descritiva, não de um equivalente completo
• CAPTCHA: uma alternativa em texto precisa identificar e descrever a finalidade do CAPTCHA ("Digite os caracteres mostrados para provar que você não é um robô"), e é preciso oferecer uma forma alternativa em outra modalidade (por exemplo, um CAPTCHA em áudio ao lado do visual). Um CAPTCHA só visual falha
• Decoração, formatação, invisível: conteúdo puramente decorativo, usado só para formatação visual ou que não é mostrado às pessoas precisa ser implementado de forma que a tecnologia assistiva consiga ignorá-lo (o alt="" acima)

👨🏻‍🏫 A exceção decorativa é onde pessoas testadoras reprovam imagens que passam. "Esta imagem tem alt vazio" não é um achado. "Esta imagem tem alt vazio e mostra o preço do produto, que não aparece em nenhum outro lugar da página" é um achado.

Como testar

1. Liste as imagens. Desligue as imagens no navegador, ou use uma extensão de acessibilidade que mostra o alt de cada imagem por cima dela. No DevTools, você também pode rodar document.querySelectorAll('img:not([alt])') no console para encontrar imagens sem nenhum atributo alt
2. Para cada imagem, pergunte para que ela serve: informativa, decorativa, funcional (dentro de um link ou botão), texto ou complexa. Depois avalie se a alternativa cumpre essa finalidade. Leia fora de contexto: se você só ouvisse o alt, perderia alguma coisa?
3. Verifique os controles só com ícone: botões e links cujo único conteúdo é uma imagem ou um <svg>. Inspecione cada um no painel Accessibility do DevTools e leia o nome calculado
4. Verifique os CAPTCHAs: finalidade descrita e uma modalidade alternativa
5. Escute a página com um leitor de tela, pulando entre os gráficos (no NVDA, aperte G). Qualquer coisa que soe como nome de arquivo, "imagem" ou "gráfico" sem mais nada é uma falha

Automatizável: em parte. O axe-core sinaliza com confiança uma alternativa ausente (regras como image-alt, input-image-alt, svg-img-alt e button-name). Ele não consegue dizer se uma alternativa é significativa, se uma imagem marcada como decorativa na verdade carrega informação, ou se alt="foto" descreve alguma coisa.

Experimente você mesmo 🔍

1. Abra a página inicial de um site de notícias e encontre três imagens: uma informativa, uma decorativa e uma dentro de um link. Leia o alt de cada uma no DevTools. Cada uma cumpre a finalidade da imagem?
2. Encontre um botão só com ícone em qualquer site que você usa (uma lupa de busca, um "X" de fechar, um ícone de compartilhar). Qual é o nome acessível dele no painel Accessibility do DevTools? Um usuário de controle por voz saberia o que falar?
3. Encontre um CAPTCHA em um formulário de cadastro ou login. Existe uma alternativa que não dependa da visão?

Mostre ao mundo o que você aprendeu 🌎

Para mostrar à sua rede profissional o que você aprendeu nesta aula, publique o seguinte no LinkedIn.

Estou fazendo o curso "WCAG 2.2 Nível A" com @Bruno Pulis na @Talking About Testing School, onde aprendi que o critério 1.1.1 Conteúdo Não Textual da WCAG é sobre finalidade, não sobre pixels: imagens informativas descrevem a sua informação, imagens decorativas recebem alt vazio, botões de ícone são nomeados pela ação, e um CAPTCHA precisa de uma alternativa que não dependa da visão. Também aprendi por que um scanner encontra um alt ausente, mas nunca um alt sem sentido. #TalkingAboutTesting #TATSchool #WCAG22LevelA #Accessibility #WCAG

👨🏻‍🏫 Lembre-se de me marcar na sua publicação. Aqui está meu perfil no LinkedIn.