Regra de acessibilidade: 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 submissão. Ao contrário dos botões <input type="submit"> padrão que mostram 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 forma de 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 (ex.: “btn_submit_v2.png”), que não fornece informação útil. Utilizadores com baixa visão que usam magnificadores 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 no 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, portanto precisa de texto alternativo.
WCAG 4.1.2 (Nome, função, valor): Todos os componentes de interface de 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"> utilizando um destes métodos:

Atributo alt (preferido): 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-se: “O que acontece quando o utilizador clica neste botão?” A resposta é o seu texto alternativo.

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

Evite palavras de preenchimento como “imagem de” ou “botão” — as tecnologias assistivas já anunciam a função do elemento como um botão.

Importante: Simplesmente colocar texto junto ao botão de imagem no HTML não é suficiente. Os leitores de ecrã precisam de uma etiqueta programaticamente associada, não texto visualmente adjacente. 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 inteiramente.

<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="Submeter encomenda">

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 detetá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: