Implementação de Tooltips: Informação Acessível com Hover e Focus

Tooltips são pequenas mensagens de ajuda contextuais que aparecem quando um usuário passa o cursor do mouse sobre um elemento ou foca nele. Elas podem fornecer informações adicionais, esclarecer o propósito de um elemento ou oferecer dicas sobre como usar um recurso. No entanto, tooltips podem facilmente se tornar pesadelos de acessibilidade se não forem implementadas corretamente. Este guia descreve as melhores práticas para criar tooltips que sejam utilizáveis por todos, incluindo usuários com deficiência.

Por Que a Acessibilidade é Importante para Tooltips

Acessibilidade não é apenas sobre conformidade; é sobre criar uma melhor experiência de usuário para todos. Quando as tooltips não são acessíveis, isso pode excluir usuários que dependem de tecnologias assistivas como leitores de tela, navegação por teclado ou entrada por voz. Considere estes cenários:

• Usuários de leitores de tela: Se uma tooltip não for marcada corretamente, um leitor de tela pode não anunciar sua presença ou conteúdo.
• Usuários de teclado: Se uma tooltip só aparece ao passar o mouse, os usuários de teclado não conseguirão acessá-la.
• Usuários com deficiências motoras: Movimentos precisos do mouse necessários para interações de hover podem ser desafiadores ou impossíveis.
• Usuários com deficiências cognitivas: Uma tooltip mal cronometrada ou confusa pode criar frustração e dificultar a compreensão.

Seguindo as melhores práticas de acessibilidade, podemos garantir que as tooltips melhorem, em vez de prejudicar, a experiência do usuário para todos.

Princípios Chave para Tooltips Acessíveis

Os seguintes princípios são cruciais para criar tooltips acessíveis:

1. Fornecer acesso alternativo: Garantir que as tooltips sejam acessíveis tanto via hover quanto por foco de teclado.
2. Usar atributos ARIA: Usar atributos ARIA (Accessible Rich Internet Applications) para identificar e descrever adequadamente as tooltips para tecnologias assistivas.
3. Gerenciar o foco: Controlar para onde o foco vai quando uma tooltip é exibida e ocultada.
4. Garantir contraste suficiente: Fornecer contraste de cor suficiente entre o texto e o fundo da tooltip.
5. Permitir tempo suficiente: Dar aos usuários tempo suficiente para ler o conteúdo da tooltip.
6. Torná-las dispensáveis: Fornecer uma maneira clara de dispensar a tooltip.
7. Evitar o uso excessivo: Usar tooltips com moderação e apenas quando necessário.

Técnicas de Implementação

1. Usando Hover e Focus

O aspecto mais crítico de tooltips acessíveis é garantir que elas sejam acessíveis tanto para usuários de mouse quanto de teclado. Isso significa que a tooltip deve aparecer tanto ao passar o mouse quanto quando o elemento recebe foco.

HTML:

            <a href="#" aria-describedby="tooltip-example">Link de Exemplo</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Este é um exemplo de tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Garanta que a tooltip esteja no topo */
}

            

              
                Copy
              
            
          

Explicação:

• aria-describedby: Este atributo vincula o link ao elemento da tooltip usando seu ID. Isso informa às tecnologias assistivas que a tooltip fornece informações adicionais sobre o link.
• role="tooltip": Esta função ARIA identifica o elemento como uma tooltip.
• O CSS usa o seletor de irmão adjacente (+) para mostrar a tooltip quando o link está em estado de hover ou foco.

JavaScript (Controle Avançado - Opcional):

Embora o CSS possa lidar com um simples mostrar/ocultar, o JavaScript permite um controle mais robusto, especialmente quando as tooltips são geradas dinamicamente ou precisam de um comportamento mais complexo.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Usando Atributos ARIA

Os atributos ARIA são essenciais para fornecer informações semânticas às tecnologias assistivas. Aqui está um detalhamento dos principais atributos:

• aria-describedby: Como mencionado anteriormente, este atributo estabelece a relação entre o elemento acionador e o elemento da tooltip.
• role="tooltip": Este atributo define explicitamente o elemento como uma tooltip.
• aria-hidden="true"/aria-hidden="false": Use-os para indicar se a tooltip está atualmente visível para as tecnologias assistivas. Quando a tooltip estiver oculta, defina aria-hidden="true". Quando estiver visível, defina aria-hidden="false". Isso é particularmente importante ao usar JavaScript para controlar a visibilidade da tooltip.

Exemplo:

            <button aria-describedby="help-tooltip">Enviar</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Clique aqui para enviar o formulário.</div>
            

              
                Copy
              
            
          

JavaScript (para aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Gerenciando o Foco

Quando uma tooltip aparece, ela geralmente *não deve* roubar o foco do elemento acionador. O foco deve permanecer no elemento que acionou a tooltip. Isso garante que os usuários de teclado possam continuar a navegar na página sem interrupções inesperadas.

No entanto, pode haver situações em que você *queira* mover o foco para a tooltip, especialmente se a tooltip contiver elementos interativos (por exemplo, links, botões). Neste caso, certifique-se de que:

• A tooltip seja visualmente distinta para indicar que tem o foco.
• Haja uma maneira clara de retornar o foco ao elemento acionador original (por exemplo, um botão de fechar dentro da tooltip).

Na maioria dos casos, evitar o gerenciamento do foco dentro da própria tooltip é preferível para simplicidade e usabilidade.

4. Garantindo Contraste Suficiente

O contraste de cores é crucial para a legibilidade. Garanta que a cor do texto em suas tooltips tenha contraste suficiente em relação à cor de fundo. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomendam uma taxa de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (18pt ou 14pt em negrito).

Use verificadores de contraste online para confirmar que suas escolhas de cores atendem aos padrões de acessibilidade. Exemplos de verificadores de contraste incluem:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Exemplo (Bom Contraste):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Exemplo (Contraste Ruim):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Permitindo Tempo Suficiente

Os usuários precisam de tempo suficiente para ler o conteúdo da tooltip. Evite tooltips que desaparecem muito rapidamente. Embora não haja um número mágico, vise um tempo mínimo de exibição de alguns segundos. Além disso, a tooltip deve permanecer visível enquanto o usuário estiver passando o mouse ou tiver focado no elemento acionador. Se precisar dispensar a tooltip devido a outros eventos, forneça um indicador de que a tooltip será fechada.

Se o conteúdo da tooltip for longo, considere fornecer uma maneira para o usuário dispensar manualmente a tooltip (por exemplo, um botão de fechar ou pressionando a tecla Escape).

6. Tornando-as Dispensáveis

Embora as tooltips muitas vezes desapareçam automaticamente quando o usuário afasta o mouse ou remove o foco, é uma boa prática fornecer uma maneira clara de dispensá-las manualmente, especialmente para tooltips longas ou que contenham elementos interativos.

Métodos para Dispensar Tooltips:

• Botão de fechar: Inclua um botão de fechar visualmente proeminente dentro da tooltip.
• Tecla Escape: Permita que os usuários dispensem a tooltip pressionando a tecla Escape.
• Clique fora: Dispense a tooltip quando o usuário clicar em qualquer lugar fora da tooltip e do elemento acionador. (Use com cautela, pois pode ser disruptivo).

Exemplo (Botão de Fechar):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Este é o conteúdo da minha tooltip.
  <button onclick="hideTooltip()">Fechar</button>
</div>
            

              
                Copy
              
            
          

Exemplo (Tecla Escape):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Substitua pela sua função real de ocultar a tooltip
  }
});

            

              
                Copy
              
            
          

7. Evitando o Uso Excessivo

As tooltips devem ser usadas com moderação e apenas quando fornecem informações verdadeiramente úteis. O uso excessivo de tooltips pode poluir a interface, distrair os usuários e criar uma experiência frustrante.

Alternativas para Tooltips:

• Rótulos claros: Use rótulos claros e descritivos para campos de formulário, botões e links.
• Ajuda contextual: Forneça texto de ajuda diretamente na interface, perto dos elementos relevantes.
• Documentação de ajuda: Vincule a uma documentação de ajuda abrangente para recursos mais complexos.

Considerações Avançadas

Conteúdo Dinâmico

Se o conteúdo da sua tooltip for gerado dinamicamente (por exemplo, carregado de uma API ou atualizado com base na entrada do usuário), garanta que o atributo aria-describedby e a visibilidade da tooltip sejam atualizados adequadamente. Use JavaScript para gerenciar essas atualizações.

Posicionamento

Considere cuidadosamente o posicionamento de suas tooltips. Evite colocá-las de forma que obscureçam conteúdo importante ou causem mudanças no layout. Esteja atento a diferentes tamanhos de tela e resoluções, e use CSS para garantir que as tooltips estejam sempre visíveis dentro da viewport.

Dispositivos Móveis

As tooltips tradicionalmente dependem de interações de hover, que não estão disponíveis em dispositivos baseados em toque. Para dispositivos móveis, considere usar métodos de interação alternativos, como:

• Toque: Exiba a tooltip quando o usuário tocar no elemento.
• Pressionamento longo: Exiba a tooltip quando o usuário pressionar longamente o elemento.
• Mostrar no foco: Exiba quando o elemento receber foco. Isso pode ser alcançado com JavaScript, verificando o suporte a toque (por exemplo, ('ontouchstart' in window)) e alterando o comportamento de exibição de acordo.

Testando Suas Tooltips

Teste exaustivamente suas tooltips para garantir que sejam acessíveis a todos os usuários. Use uma combinação de testes manuais e ferramentas de teste de acessibilidade automatizadas.

Métodos de Teste:

• Navegação por teclado: Verifique se as tooltips são acessíveis usando o teclado.
• Teste com leitor de tela: Use um leitor de tela para garantir que as tooltips sejam anunciadas corretamente.
• Análise de contraste de cores: Use um verificador de contraste de cores para verificar o contraste suficiente.
• Teste em dispositivos móveis: Teste as tooltips em diferentes dispositivos móveis e tamanhos de tela.
• Teste de acessibilidade automatizado: Use ferramentas como axe DevTools, WAVE ou Lighthouse para identificar possíveis problemas de acessibilidade.

Internacionalização (i18n) e Localização (l10n)

Ao desenvolver tooltips para um público global, tenha em mente a internacionalização e a localização:

• Direção do texto: Suporte tanto para direções de texto da esquerda para a direita (LTR) quanto da direita para a esquerda (RTL). Use propriedades lógicas de CSS (por exemplo, margin-inline-start, margin-inline-end) em vez de propriedades físicas (por exemplo, margin-left, margin-right) para o layout.
• Traduções específicas do idioma: Forneça traduções do conteúdo da tooltip para diferentes idiomas.
• Formatos de data e hora: Adapte os formatos de data e hora à localidade do usuário.
• Formatos de número: Use formatos de número apropriados para diferentes regiões (por exemplo, separadores decimais, separadores de milhares).

Conclusão

Implementar tooltips acessíveis requer um planejamento cuidadoso e atenção aos detalhes. Seguindo os princípios e técnicas descritos neste guia, você pode criar tooltips que sejam utilizáveis por todos, independentemente de suas habilidades. Lembre-se de que a acessibilidade é um processo contínuo, então continue a testar e refinar suas tooltips para garantir que elas atendam às necessidades de todos os seus usuários.

Recursos

• Guia de Práticas de Autoria ARIA (APG) - Tooltip
• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1
• MDN Web Docs - ARIA