Texto alternativo para imagens funcionais
O que a norma pede
Toda imagem usada como botão ou link tem um texto alternativo que diz o que ela faz ou para onde leva.
- 1.1.1 (A)
- 2.4.4 (A)
- 2.4.9 (AAA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Anote na especificação a função de cada ícone clicável, como buscar ou voltar à página inicial. Prefira ícones acompanhados de texto visível e mantenha o mesmo ícone para a mesma função em todo o produto.
Ícone de busca
A busca do cabeçalho é aberta por um ícone de lupa.
Errado: Anotado pelo desenho
Na especificação
Ícone: “lupa”.
O nome acessível vira “lupa”, e não a ação.
Certo: Anotado pela função
Na especificação
Ícone de lupa — nome: “Buscar no site”.
Quem não vê sabe o que o botão faz.
Quando a imagem é o único conteúdo de um link ou botão, use no alt a função do controle. Em botões só com SVG, dê o nome com aria-label e esconda o SVG com aria-hidden.
Logo que volta ao início
O logo do órgão no cabeçalho leva à página inicial.
Errado: Alt descreve o logo
<a href="/"> <img src="logo.svg" alt="Logotipo azul"> </a>O link é anunciado como “Logotipo azul”.
Certo: Alt descreve o destino
<a href="/"> <img src="logo.svg" alt="Prefeitura de Recife, página inicial"> </a>A pessoa sabe para onde o link leva.
Inclua nos critérios de aceite que todo ícone clicável tenha nome acessível, a começar pelos controles de fluxos críticos, como envio e pagamento. Peça que a biblioteca de ícones traga esse nome por padrão.
Botões de ação da tabela
Cada linha da tabela de processos tem ícones de ver, baixar e excluir.
Errado: Ícones sem nome
Situação
Leitor anuncia “botão, botão, botão” em cada linha.
É impossível saber qual botão exclui.
Certo: Ícones nomeados
Situação
“Ver processo 123”, “Baixar processo 123”, “Excluir processo 123”.
Cada ação é clara e segura.
Navegue pelos controles que só têm ícone usando o leitor de tela e ouça o nome de cada um. Registre os que são anunciados só como “botão” ou “link”, ou com um nome que não diz a ação.
Botão de fechar o modal
O modal tem um “X” no canto.
Errado: Sem nome
Leitor de tela anuncia: “Botão”
Não se sabe o que o botão faz.
Certo: Com a função
Leitor de tela anuncia: “Fechar, botão”
A ação é clara.
Escreva o texto alternativo de uma imagem funcional como um rótulo de ação, curto e com verbo, como “Baixar o edital”. Mantenha os mesmos nomes para os mesmos ícones em todo o produto.
Ícone de PDF ao lado do edital
O ícone baixa o arquivo do edital.
Errado: Descreve o ícone
Texto alternativo
“Ícone vermelho de PDF”
Não diz o que acontece ao acionar.
Certo: Descreve a ação
Texto alternativo
“Baixar o edital (PDF, 2 MB)”
A pessoa sabe o que vai receber.