Botões input devem ter texto discernível

Todos os controlos interativos numa página precisam de um nome acessível para que as tecnologias assistivas os possam anunciar aos utilizadores. Para elementos <input> com type="button", type="submit" ou type="reset", o nome acessível vem normalmente do atributo value. Embora <input type="submit"> e <input type="reset"> tenham etiquetas predefinidas fornecidas pelo navegador (“Submit” e “Reset”), <input type="button"> não tem predefinição — é apresentado como um botão vazio e sem etiqueta se nenhum nome for fornecido.

Este problema afeta criticamente utilizadores cegos e surdocegos que dependem de leitores de ecrã. Quando um leitor de ecrã encontra um botão input sem texto discernível, pode anunciar algo como “botão” sem indicação do que o botão faz. Isto torna impossível navegar em formulários, submeter dados ou realizar ações com confiança. Os utilizadores com visão podem frequentemente inferir o propósito de um botão pelo contexto visual, mas os utilizadores de leitores de ecrã dependem inteiramente do nome acessível programático.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para WCAG 2.2 Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A), que exige que todos os componentes de interface do utilizador tenham um nome que possa ser determinado programaticamente. Relaciona-se também com os requisitos da Secção 508 que cada elemento não textual deve ter um equivalente textual, e EN 301 549 Secção 9.4.1.2.

Como corrigir

Existem várias maneiras de dar a um botão input um nome acessível discernível:

1. Atributo value — A abordagem mais direta. Defina value como texto descritivo que comunique o propósito do botão.
2. Atributo aria-label — Fornece um nome acessível diretamente. Útil quando precisa que o nome acessível difira do texto visível, ou quando value não pode ser usado.
3. Atributo aria-labelledby — Referencia o id de outro elemento cujo conteúdo textual se torna o nome acessível. O elemento referenciado deve existir e conter texto.
4. Atributo title — Atua como nome acessível de recurso. No entanto, title é menos fiável porque não é consistentemente exposto por todas as tecnologias assistivas e apenas aparece como tooltip ao pairar, tornando-o inacessível para utilizadores de teclado e toque. Prefira value ou aria-label.

Para <input type="submit"> e <input type="reset">, os navegadores fornecem etiquetas predefinidas, pelo que passam sem um value explícito. No entanto, se definir value="" (uma string vazia), substitui a predefinição e cria um nome acessível vazio, o que falha.

Exemplos

Incorreto: botão input sem nome acessível

<form action="/search">
  <input type="button" id="go" />
</form>

Este botão não tem value, aria-label, aria-labelledby ou title. Um leitor de ecrã anunciá-lo-á apenas como “botão” sem contexto.

Incorreto: aria-label vazio

<form action="/search">
  <input type="button" aria-label="" />
</form>

Um aria-label vazio não fornece um nome discernível.

Incorreto: aria-labelledby referenciando um elemento inexistente ou vazio

<form action="/search">
  <input type="button" aria-labelledby="nonexistent" />
</form>

<form action="/search">
  <input type="button" aria-labelledby="empty-label" />
  <div id="empty-label"></div>
</form>

Se o elemento referenciado não existir ou não tiver conteúdo textual, o botão não tem nome acessível.

Incorreto: submit ou reset com value vazio

<form action="/search">
  <input type="submit" value="" />
  <input type="reset" value="" />
</form>

Definir value como string vazia substitui a etiqueta predefinida do navegador, deixando o botão sem nome.

Correto: usando o atributo value

<form action="/search">
  <input type="button" value="Pesquisar" />
</form>

Correto: usando aria-label

<form action="/search">
  <input type="button" aria-label="Pesquisar" />
</form>

Correto: usando aria-labelledby

<form action="/search">
  <input type="button" aria-labelledby="btn-label" />
  <span id="btn-label">Pesquisar</span>
</form>

Correto: submit e reset com valores predefinidos ou explícitos

<form action="/search">
  <input type="submit" />
  <input type="reset" />
  <input type="submit" value="Enviar Formulário" />
  <input type="reset" value="Limpar Todos os Campos" />
</form>

Os primeiros dois baseiam-se nas etiquetas predefinidas incorporadas no navegador (“Submit” e “Reset”). Os últimos dois fornecem etiquetas personalizadas e mais descritivas através do atributo value. Ambas as abordagens são válidas, embora etiquetas descritivas explícitas sejam geralmente preferidas para maior clareza.

Learn more:

Deque Reference

Deque University - How To Fix

→