Regra de acessibilidade: Os botões de imagem devem ter texto alternativo

Sobre esta regra de acessibilidade

Um elemento <input type="image"> renderiza uma imagem que funciona como um botão de envio. Ao contrário dos botões padrão <input type="submit"> que exibem o seu atributo value como texto visível, os botões de imagem dependem inteiramente da sua aparência visual para comunicar o propósito. Isto significa que as tecnologias assistivas não têm como determinar a função do botão, a menos que você forneça explicitamente texto alternativo.

Esta é uma barreira de acessibilidade crítica para vários grupos de utilizadores. Utilizadores cegos e surdocegos que dependem de leitores de ecrã ouvirão algo genérico como “botão” ou, pior ainda, o nome do ficheiro da imagem (por exemplo, “btn_submit_v2.png”), que não fornece informação útil. Utilizadores com baixa visão que usam ampliadores de ecrã em combinação com leitores de ecrã são igualmente afetados. Sem um nome acessível claro, estes utilizadores não conseguem interagir com confiança com formulários.

Esta regra relaciona-se com dois critérios de sucesso WCAG ao Nível A — o nível mínimo de conformidade:

WCAG 1.1.1 (Conteúdo não textual): Todo o conteúdo não textual deve ter uma alternativa textual que sirva o propósito equivalente. Um botão de imagem é conteúdo não textual, por isso precisa de texto alternativo.
WCAG 4.1.2 (Nome, papel, valor): Todos os componentes da interface do utilizador devem ter um nome programaticamente determinável. Os botões devem expor o seu nome às tecnologias assistivas.

Este requisito é também obrigatório pela Secção 508, EN 301 549, e as diretrizes Trusted Tester.

Como corrigir

Forneça um nome acessível não vazio para cada elemento <input type="image"> usando um destes métodos:

Atributo alt (preferível): Adicione um atributo alt que descreva a ação do botão. Esta é a abordagem mais direta e amplamente suportada.
Atributo aria-label: Defina um aria-label com uma descrição concisa da ação do botão.
Atributo aria-labelledby: Referencie o id de outro elemento visível que descreva a ação do botão.

Escrever texto alternativo eficaz

O texto alternativo para um botão de imagem deve descrever a ação que o botão executa, não a própria imagem. Pergunte a si mesmo: “O que acontece quando o utilizador clica neste botão?” A resposta é o seu texto alternativo.

✅ “Enviar”, “Pesquisar”, “Adicionar ao carrinho”, “Iniciar sessão”
❌ “Ícone de seta verde”, “button.png”, “clique aqui”

Evite palavras supérfluas como “imagem de” ou “botão” — as tecnologias assistivas já anunciam o papel do elemento como um botão.

Importante: Simplesmente colocar texto ao lado do botão de imagem no HTML não é suficiente. Os leitores de ecrã precisam de uma etiqueta programaticamente associada, não de texto visualmente adjacente. O texto próximo não pode ser determinado de forma confiável como a etiqueta do botão pelas tecnologias assistivas.

Exemplos

Incorreto: texto alternativo em falta

O botão de imagem não tem atributo alt, aria-label, ou aria-labelledby. Um leitor de ecrã pode anunciar isto como “submit.png botão” ou apenas “botão.”

<form action="/search">
  <label for="query">Pesquisar</label>
  <input type="text" id="query" name="q">
  <input type="image" src="search-icon.png">
</form>

Incorreto: atributo `alt` vazio

Um atributo alt vazio diz às tecnologias assistivas para ignorar o elemento, efetivamente escondendo o botão completamente.

<input type="image" src="search-icon.png" alt="">

Correto: usando o atributo `alt`

<form action="/search">
  <label for="query">Pesquisar</label>
  <input type="text" id="query" name="q">
  <input type="image" src="search-icon.png" alt="Pesquisar">
</form>

Correto: usando `aria-label`

<input type="image" src="submit-arrow.png" aria-label="Enviar pedido">

Correto: usando `aria-labelledby`

O atributo aria-labelledby aponta para o id de um elemento visível. Certifique-se de que o elemento referenciado existe e não está escondido com display: none ou aria-hidden="true".

<h2 id="checkout-heading">Complete a sua compra</h2>
<form action="/checkout">
<!-- campos do formulário -->

  <input type="image" src="checkout-btn.png" aria-labelledby="checkout-heading">
</form>

O que a regra verifica

Esta regra verifica que cada elemento <input type="image"> tem um nome acessível descobrível. Falha se o elemento não tem atributo alt, aria-label, ou aria-labelledby, ou se esses atributos estão vazios ou resolvem para uma string vazia.

Learn more: