Os botões devem ter texto perceptível

Quando um botão não tem um nome acessível, as tecnologias assistivas como leitores de ecrã só conseguem 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 vidente 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 tecnologias assistivas.

Esta regra corresponde ao WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A), que exige que todos os componentes de interface de utilizador tenham um nome que possa ser determinado programaticamente. Também é abrangida 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

Certifique-se de 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 referencie um elemento contendo texto visível e não vazio.
4. Um atributo title (use como último recurso, pois as dicas de title são expostas de forma inconsistente entre dispositivos).

Se um botão é puramente decorativo e deve ser ocultado das tecnologias assistivas, 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 como 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 com apenas um 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, pelo que o botão não tem nome acessível.

Correto: botão com texto visível

<button>Submit order</button>

Correto: botão de í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 é obtido 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 como texto interior estão presentes, aria-label tem precedência como o nome acessível. Use isto quando precisar de um nome mais descritivo do que aquele 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 as dicas de title podem não estar disponíveis para utilizadores de ecrã táctil ou apenas teclado.

Learn more:

Deque Reference

Deque University - How To Fix

→