M

MLOG

Português

Um guia completo para implementar tooltips acessíveis usando os estados hover e focus, garantindo a usabilidade para todos os usuários, incluindo os com deficiência.

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:

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>

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 */
}

Explicação:

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';
});

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:

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>

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';
});

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:

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:

Exemplo (Bom Contraste):

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

Exemplo (Contraste Ruim):

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

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:

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>

Exemplo (Tecla Escape):

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

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:

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:

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:

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:

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