Botão só com emoji: o leitor de tela diz "foguete" e ninguém sabe o que faz

A barra de ações do editor de posts tem quatro botões: um foguete, uma lixeira, um olho e um disquete. Para o time que criou, o foguete é "publicar". Para a revisora nova, pode ser "enviar para revisão", "acelerar" ou "impulsionar". Para quem usa leitor de tela, o NVDA anuncia "foguete, botão" e para por aí. A interface virou um enigma de quatro peças.

A resposta curta: o emoji é decoração; o nome do botão é texto. Todo controle precisa de um nome acessível que diga a ação ("Publicar", "Excluir rascunho"), de preferência visível. Se o emoji fica, ele é escondido do leitor de tela com aria-hidden="true". Se o botão precisa ser só ícone por falta de espaço, o nome vai em aria-label e aparece também em uma dica visível no foco e no hover.

Por que o emoji não funciona como rótulo

Emoji é um caractere Unicode como qualquer letra. Quando ele é o único conteúdo do botão, o navegador usa esse caractere para calcular o nome acessível, e o leitor de tela lê a descrição padrão do símbolo, que vem de uma base comum de nomes curtos (o projeto CLDR, do Unicode). Essa descrição diz o que o desenho é, não o que o botão faz. "Foguete" não é "publicar", "olho" não é "pré-visualizar".

Há mais três problemas que atingem quem enxerga bem:

• O desenho muda entre sistemas. Apple, Google, Microsoft e Samsung desenham cada emoji do seu jeito. O mesmo código pode parecer alegre num aparelho e sarcástico em outro, e um emoji recente pode aparecer como um quadrado vazio num sistema antigo.
• O significado é cultural. O polegar para cima, as mãos juntas e o rosto sorrindo têm leituras diferentes entre grupos e gerações. O que é óbvio no seu time não é universal.
• Emoji compostos aumentam o ruído. Um emoji com tom de pele ou uma família combinada é uma sequência de vários caracteres. Alguns leitores anunciam o tom ("pele morena média"), o que alonga a frase e não acrescenta a ação.

Como dar nome certo a botões com emoji

1. Escreva a ação em texto visível. É a opção mais robusta: funciona no leitor de tela, na tradução automática, na busca de comandos por voz ("clicar em Publicar") e para quem não reconhece o símbolo.
2. Se o emoji ficar ao lado do texto, esconda-o do leitor. Coloque o emoji num span com aria-hidden="true". Assim o nome acessível é só "Publicar".
3. Se o botão for só ícone, use aria-label. O valor descreve a ação, não o desenho. E ofereça uma dica visível que apareça no hover e no foco do teclado, para quem enxerga e também não sabe o que o foguete faz.
4. Emoji com significado no meio do texto ganha papel de imagem. Se um emoji carrega informação (por exemplo, um aviso numa mensagem), marque com role="img" e um aria-label que diga o significado.
5. Estado nunca depende só de emoji. "Erro" se escreve com a palavra, e o campo inválido recebe aria-invalid="true" e a mensagem associada.
6. Confira o nome calculado. No Chrome e no Edge, o painel de acessibilidade das ferramentas de desenvolvedor mostra o nome acessível de cada elemento. No Firefox, há o inspetor de acessibilidade. Teste também com um leitor real: NVDA no Windows, VoiceOver no macOS e no iPhone, TalkBack no Android.

Exemplo: a barra do editor antes e depois

Os emoji abaixo aparecem como referência numérica (🚀 é o foguete), que o navegador converte no símbolo. Antes, cada botão tinha só o emoji:

<div class="acoes">
  <button type="button">&#x1F680;</button>   <!-- lido como "foguete" -->
  <button type="button">&#x1F5D1;</button>   <!-- "lixeira" -->
  <button type="button">&#x1F441;</button>   <!-- "olho" -->
</div>

Depois, com texto visível nos dois botões principais e ícone nomeado no secundário:

<div class="acoes">
  <button type="button">
    <span aria-hidden="true">&#x1F680;</span> Publicar
  </button>

  <button type="button">
    <span aria-hidden="true">&#x1F5D1;</span> Excluir rascunho
  </button>

  <button type="button" aria-label="Pré-visualizar" aria-describedby="dica-previa">
    <span aria-hidden="true">&#x1F441;</span>
  </button>
  <span role="tooltip" id="dica-previa" class="dica">Pré-visualizar</span>
</div>

<p>
  <span role="img" aria-label="Atenção:">&#x26A0;&#xFE0F;</span>
  o post agendado ainda não tem imagem de capa.
</p>

A dica precisa aparecer também quando o botão recebe foco pelo teclado, não só no hover. Um CSS mínimo resolve:

.dica { display: none; }
button:hover + .dica,
button:focus-visible + .dica { display: inline-block; }

Agora o leitor de tela anuncia "Publicar, botão", "Excluir rascunho, botão" e "Pré-visualizar, botão". A revisora nova lê "Publicar" e não precisa adivinhar. O emoji continua lá, como reforço visual para quem já conhece o padrão.

E o atributo title?

O title parece resolver, mas não é confiável como nome principal: ele só aparece com o mouse parado sobre o elemento, não aparece no toque em celular nem no foco de teclado, e o suporte varia entre leitores de tela. Use-o, se quiser, como complemento, nunca como única fonte do nome.

Emoji em outros lugares da interface

O mesmo raciocínio vale para títulos, menus e notificações. Um título "Promoções de verão" com três sóis antes da palavra faz o leitor anunciar "sol, sol, sol" antes do conteúdo. Se a decoração importa para a marca, esconda-a com aria-hidden ou ponha via CSS. Em textos que vão para banco e são contados ou cortados, lembre que um emoji ocupa vários bytes e às vezes vários pontos de código; o detalhe está em strlen não conta letra: acento e emoji mudam o tamanho.

Para imagens de verdade, a lógica do nome é parecida, mas com outra ferramenta: o atributo alt. O post texto alternativo descreve a imagem, não repete o título mostra quando descrever e quando deixar vazio.

Erros comuns

• Botão só com emoji e sem nome. O leitor de tela anuncia o desenho e a pessoa não sabe qual ação vai disparar, inclusive se é destrutiva.
• aria-label descrevendo o ícone. "Ícone de lixeira" ainda não diz se apaga o rascunho, o comentário ou a conta.
• Texto visível e emoji lidos juntos. Sem aria-hidden, o anúncio vira "foguete Publicar", repetido em cada botão da barra.
• Emoji como único sinal de erro ou sucesso. Um X vermelho sem texto falha para quem não vê, para quem não distingue cores e no sistema que desenha o símbolo diferente.
• Dica só no hover. Quem navega por teclado ou toca na tela nunca vê o nome do botão.
• Confiar no desenho do seu aparelho. O emoji recente que aparece bonito no seu celular vira quadrado vazio no computador antigo do cliente.

Checklist

• Todo botão tem nome acessível que descreve a ação, conferido no painel de acessibilidade do navegador.
• Emoji decorativo ao lado de texto está em span com aria-hidden="true".
• Botão só de ícone tem aria-label com verbo e objeto ("Excluir rascunho").
• A dica dos botões só de ícone aparece no hover e no foco do teclado.
• Emoji que carrega significado no texto tem role="img" e rótulo com o significado.
• Nenhum estado (erro, sucesso, pendente) depende só de emoji ou de cor.
• A tela foi testada com pelo menos um leitor de tela real.

Abra a tela mais usada do seu sistema, cubra os ícones com a mão (ou ligue o leitor de tela) e responda: sem ver o desenho, dá para dizer o que cada botão faz?