Os botões devem ter texto discernível

Quando um botão carece de um nome acessível, tecnologias de apoio como leitores de ecrã só podem anunciá-lo genericamente — por exemplo, como “botão” — sem qualquer indicação do seu propósito. Esta é uma barreira crítica para pessoas cegas ou surdocegas, pois dependem inteiramente de nomes determinados programaticamente para compreender e interagir com controlos de interface. Um utilizador com visão pode inferir o propósito de um botão através de um ícone ou contexto visual, mas sem um nome baseado em texto, essa informação fica completamente perdida para utilizadores de tecnologia de apoio.

Esta regra mapeia para o WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Papel, Valor (Nível A), que requer que todos os componentes de interface de utilizador tenham um nome que possa ser determinado programaticamente. É também coberto pela Secção 508, EN 301 549 (9.4.1.2), e diretrizes Trusted Tester, que requerem que o propósito de cada ligação e botão seja determinável a partir do seu nome acessível, descrição, ou contexto.

Como corrigir

Assegure que cada elemento <button> ou elemento com role="button" tem um nome acessível através de um destes métodos:

1. Conteúdo de texto visível dentro do elemento botão.
2. Um atributo aria-label não vazio que descreva o propósito do botão.
3. Um atributo aria-labelledby que referencia um elemento contendo texto visível e não vazio.
4. Um atributo title (use como último recurso, pois tooltips title são inconsistentemente expostas entre dispositivos).

Se um botão é puramente decorativo e deve ser escondido de tecnologias de apoio, pode atribuir role="presentation" ou role="none" e removê-lo da ordem de tabulação com tabindex="-1". No entanto, isto é raro para botões interativos.

Erros comuns a evitar

• Deixar um elemento <button> completamente vazio.
• Usar apenas um atributo value num <button> — ao contrário dos elementos <input>, o atributo value em <button> não fornece um nome acessível.
• Definir aria-label para uma string vazia (aria-label="").
• Apontar aria-labelledby para um elemento que não existe ou não contém texto.
• Usar apenas um ícone ou imagem dentro de um botão sem fornecer texto alternativo.

Exemplos

Incorreto: botão vazio

<button id="search"></button>

Um leitor de ecrã anuncia isto como “botão” sem qualquer indicação do seu propósito.

Incorreto: botão apenas com atributo value

<button id="submit" value="Submit"></button>

O atributo value não define o nome acessível para elementos <button>.

Incorreto: aria-label vazio

<button id="close" aria-label=""></button>

Um aria-label vazio resulta em nenhum nome acessível.

Incorreto: aria-labelledby apontando para um elemento em falta ou vazio

<button id="save" aria-labelledby="save-label"></button>
<div id="save-label"></div>

O elemento referenciado existe mas não contém texto, então o botão não tem nome acessível.

Correto: botão com texto visível

<button>Submit order</button>

Correto: botão ícone com aria-label

<button aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-close"></use>
  </svg>
</button>

O aria-label fornece o nome acessível, enquanto aria-hidden="true" no SVG previne anúncios duplicados.

Correto: botão rotulado por outro elemento

<h2 id="section-title">Shopping cart</h2>
<button aria-labelledby="section-title">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-arrow"></use>
  </svg>
</button>

O nome acessível do botão é retirado do texto do cabeçalho referenciado.

Correto: botão com aria-label e texto visível

<button aria-label="Search products">Search</button>

Quando tanto aria-label quanto texto interno estão presentes, aria-label tem precedência como nome acessível. Use isto quando precisar de um nome mais descritivo do que apenas o texto visível transmite.

Correto: botão com title (último recurso)

<button title="Print this page">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-print"></use>
  </svg>
</button>

O atributo title fornece um nome acessível, mas texto visível ou aria-label são preferidos porque tooltips title podem não estar disponíveis para utilizadores de ecrã tátil ou apenas teclado.

Learn more:

Deque Reference

Deque University - How To Fix

→