Uso acessível de emojis: seu texto deve ser compreensível também quando lido em voz alta

Uma pessoa que navega com um leitor de tela frequentemente percebe o emoji através do seu nome. O nome nem sempre é idêntico ao significado figurado que o autor tinha em mente. O guia W3C H86 chama a atenção especificamente para isso. Fonte: W3C H86

Escreva o que você deseja comunicar

Um exemplo curto:

Na sexta-feira ☕, depois 📞, por fim 📄.

A frase pode ser interpretada de várias maneiras mesmo visualmente. Significa tomar café, fazer uma ligação e enviar um documento? Quando isso acontece e qual é a tarefa de cada um? Ler os nomes dos símbolos em voz alta não responde a essas perguntas por si só.

Versão mais precisa:

Na sexta-feira às 9 horas, nos encontramos para um café. Depois ligo para o fornecedor e envio o resumo à tarde.

Se você quiser adicionar uma xícara ao café, a frase ainda deve permanecer completa. Em um comunicado, a data, o local, o preço e a tarefa a ser realizada devem constar em texto. As recomendações de acessibilidade em redes sociais também apoiam essa solução. Fonte: NCDIT, Social Media Content Accessibility

Uma sequência longa de símbolos lida em voz alta pode ser uma lista longa

Na mensagem “Parabéns! 🎉🎉🎉🎉🎉”, o leitor de tela pode ler o mesmo nome várias vezes. Experimente com um único símbolo: “Parabéns pelo seu resultado! 🎉” A frase pode ser ouvida de forma mais curta assim. Vale a pena colocar o símbolo em um ponto de pausa natural, por exemplo, no final do parágrafo. Fonte: Section508.gov, mídia social

Em listas, use uma lista real onde a interface suportar. Se você inserir o mesmo asterisco, check ou dedo indicador no início de cada linha, considere que informação o símbolo repetido fornece. Uma numeração simples ou a lista embutida muitas vezes oferece uma estrutura mais fácil de seguir.

Porém, em uma comparação onde os próprios emojis são os temas, é justificável apresentar vários símbolos. Nesse caso, escreva o nome e a explicação da diferença ao lado deles. Assim, o leitor tem acesso ao essencial sem precisar distinguir as imagens.

O que você pode fazer no seu próprio site?

Se um emoji carrega um significado distinto, um nome acessível pode ser atribuído a ele no HTML. Um exemplo próprio, alinhado ao método apresentado pela W3C:

<span role="img" aria-label="Enviado com sucesso">✅</span>

Neste exemplo, o nome acessível comunica o envio bem-sucedido. O aria-label não aparece como legenda para o leitor vidente, por isso escreva o estado importante também em texto visível. O rótulo de um botão deve nomear a ação: por exemplo, “Copiar”.

No caso de um emoji inserido como arquivo de imagem, determine o texto alternativo do elemento img com base na função da imagem. Se a mesma informação já estiver totalmente presente ao lado da imagem e a gráfico não adicionar novo significado, um alt="" vazio pode ser justificado. O guia da W3C sobre imagens apresenta detalhadamente essa decisão dependente da situação. Fonte: W3C, Decorative Images

A verificação deve ser feita na interface final

Em postagens de redes sociais, as opções técnicas são geralmente mais limitadas, por isso uma frase bem escrita é especialmente importante. O tratamento dos nomes acessíveis pode depender do sistema e da aplicação. Uma única solução HTML ou um teste bem-sucedido não comprova por si só a acessibilidade de toda a página.

Para a verificação prática, leia o texto sem os símbolos e depois ouça-o na interface final com um leitor de tela. Observe onde a informação se repete desnecessariamente, onde a frase é interrompida e se alguma referência fica sem explicação. Após a correção, repita o teste no mesmo local.

Para começar, escolha uma postagem ou mensagem de cliente frequentemente usada. Encurtar a sequência desnecessária de símbolos e escrever as palavras faltantes é imediatamente uma mudança concreta e verificável.