M

MLOG

Français

Un guide complet pour implémenter des info-bulles accessibles via les états de survol et de focalisation, assurant une utilisabilité pour tous les utilisateurs.

Implémentation d'info-bulles : Informations accessibles au survol et à la focalisation

Les info-bulles sont de petits messages d'aide contextuels qui apparaissent lorsqu'un utilisateur survole avec le pointeur de sa souris ou sélectionne un élément. Elles peuvent fournir des informations supplémentaires, clarifier le but d'un élément ou offrir des conseils sur la façon d'utiliser une fonctionnalité. Cependant, les info-bulles peuvent facilement devenir des cauchemars d'accessibilité si elles ne sont pas implémentées correctement. Ce guide présente les meilleures pratiques pour créer des info-bulles utilisables par tous, y compris les utilisateurs en situation de handicap.

Pourquoi l'accessibilité est-elle importante pour les info-bulles ?

L'accessibilité n'est pas seulement une question de conformité ; il s'agit de créer une meilleure expérience utilisateur pour tout le monde. Lorsque les info-bulles ne sont pas accessibles, cela peut exclure les utilisateurs qui dépendent de technologies d'assistance comme les lecteurs d'écran, la navigation au clavier ou la saisie vocale. Considérez ces scénarios :

En suivant les meilleures pratiques d'accessibilité, nous pouvons nous assurer que les info-bulles améliorent plutôt qu'elles n'entravent l'expérience utilisateur pour tous.

Principes clés pour des info-bulles accessibles

Les principes suivants sont cruciaux pour créer des info-bulles accessibles :

  1. Fournir un accès alternatif : S'assurer que les info-bulles sont accessibles à la fois par survol et par focalisation au clavier.
  2. Utiliser les attributs ARIA : Utiliser les attributs ARIA (Accessible Rich Internet Applications) pour identifier et décrire correctement les info-bulles aux technologies d'assistance.
  3. Gérer la focalisation : Contrôler où va la focalisation lorsqu'une info-bulle est affichée et masquée.
  4. Assurer un contraste suffisant : Fournir un contraste de couleur suffisant entre le texte de l'info-bulle et l'arrière-plan.
  5. Laisser un temps suffisant : Donner aux utilisateurs assez de temps pour lire le contenu de l'info-bulle.
  6. Les rendre révocables : Fournir un moyen clair de fermer l'info-bulle.
  7. Éviter la surutilisation : Utiliser les info-bulles avec parcimonie et uniquement lorsque cela est nécessaire.

Techniques d'implémentation

1. Utiliser le survol et la focalisation

L'aspect le plus critique des info-bulles accessibles est de s'assurer qu'elles sont accessibles aux utilisateurs de la souris et du clavier. Cela signifie que l'info-bulle doit apparaître à la fois au survol et lorsque l'élément reçoit la focalisation.

HTML :

<a href="#" aria-describedby="tooltip-example">Lien d'exemple</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Ceci est un exemple d'info-bulle.</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; /* S'assurer que l'info-bulle est au-dessus */
}

Explication :

JavaScript (Contrôle avancé - Optionnel) :

Alors que le CSS peut gérer un simple affichage/masquage, JavaScript permet un contrôle plus robuste, en particulier lorsque les info-bulles sont générées dynamiquement ou nécessitent un comportement plus complexe.

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. Utiliser les attributs ARIA

Les attributs ARIA sont essentiels pour fournir des informations sémantiques aux technologies d'assistance. Voici une description des attributs clés :

Exemple :

<button aria-describedby="help-tooltip">Envoyer</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Cliquez ici pour soumettre le formulaire.</div>

JavaScript (pour 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. Gérer la focalisation

Lorsqu'une info-bulle apparaît, elle ne devrait généralement *pas* voler la focalisation de l'élément déclencheur. La focalisation doit rester sur l'élément qui a déclenché l'info-bulle. Cela garantit que les utilisateurs de clavier peuvent continuer à naviguer sur la page sans interruptions inattendues.

Cependant, il peut y avoir des situations où vous *voulez* déplacer la focalisation vers l'info-bulle, en particulier si l'info-bulle contient des éléments interactifs (par exemple, des liens, des boutons). Dans ce cas, assurez-vous que :

Dans la plupart des cas, il est préférable d'éviter la gestion de la focalisation au sein de l'info-bulle elle-même pour des raisons de simplicité et d'utilisabilité.

4. Assurer un contraste suffisant

Le contraste des couleurs est crucial pour la lisibilité. Assurez-vous que la couleur du texte dans vos info-bulles a un contraste suffisant par rapport à la couleur de fond. Les Directives pour l'accessibilité aux contenus Web (WCAG) recommandent un rapport de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte de grande taille (18pt ou 14pt gras).

Utilisez des vérificateurs de contraste en ligne pour vérifier que vos choix de couleurs respectent les normes d'accessibilité. Exemples de vérificateurs de contraste :

Exemple (Bon contraste) :

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

Exemple (Mauvais contraste) :

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

5. Laisser un temps suffisant

Les utilisateurs ont besoin de suffisamment de temps pour lire le contenu de l'info-bulle. Évitez les info-bulles qui disparaissent trop rapidement. Bien qu'il n'y ait pas de chiffre magique, visez un temps d'affichage minimum de quelques secondes. De plus, l'info-bulle doit rester visible tant que l'utilisateur survole ou a la focalisation sur l'élément déclencheur. Si vous devez fermer l'info-bulle en raison d'autres événements, fournissez un indicateur que l'info-bulle va se fermer.

Si le contenu de l'info-bulle est long, envisagez de fournir un moyen pour l'utilisateur de fermer manuellement l'info-bulle (par exemple, un bouton de fermeture ou en appuyant sur la touche Échap).

6. Les rendre révocables

Bien que les info-bulles disparaissent souvent automatiquement lorsque l'utilisateur éloigne sa souris ou supprime la focalisation, il est de bonne pratique de fournir un moyen clair de les fermer manuellement, en particulier pour les info-bulles longues ou celles contenant des éléments interactifs.

Méthodes pour fermer les info-bulles :

Exemple (Bouton de fermeture) :

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Ceci est le contenu de mon info-bulle.
  <button onclick="hideTooltip()">Fermer</button>
</div>

Exemple (Touche Échap) :

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Remplacez par votre fonction de masquage d'info-bulle
  }
});

7. Éviter la surutilisation

Les info-bulles doivent être utilisées avec parcimonie et uniquement lorsqu'elles fournissent des informations vraiment utiles. La surutilisation des info-bulles peut encombrer l'interface, distraire les utilisateurs et créer une expérience frustrante.

Alternatives aux info-bulles :

Considérations avancées

Contenu dynamique

Si le contenu de votre info-bulle est généré dynamiquement (par exemple, chargé depuis une API ou mis à jour en fonction de l'entrée de l'utilisateur), assurez-vous que l'attribut aria-describedby et la visibilité de l'info-bulle sont mis à jour en conséquence. Utilisez JavaScript pour gérer ces mises à jour.

Positionnement

Examinez attentivement le positionnement de vos info-bulles. Évitez de les placer de manière à masquer un contenu important ou à provoquer des décalages de mise en page. Soyez attentif aux différentes tailles d'écran et résolutions, et utilisez CSS pour vous assurer que les info-bulles sont toujours visibles dans le viewport.

Appareils mobiles

Les info-bulles reposent traditionnellement sur les interactions de survol, qui ne sont pas disponibles sur les appareils tactiles. Pour les appareils mobiles, envisagez d'utiliser des méthodes d'interaction alternatives, telles que :

Tester vos info-bulles

Testez minutieusement vos info-bulles pour vous assurer qu'elles sont accessibles à tous les utilisateurs. Utilisez une combinaison de tests manuels et d'outils de test d'accessibilité automatisés.

Méthodes de test :

Internationalisation (i18n) et Localisation (l10n)

Lors du développement d'info-bulles pour un public mondial, gardez à l'esprit l'internationalisation et la localisation :

Conclusion

L'implémentation d'info-bulles accessibles nécessite une planification minutieuse et une attention aux détails. En suivant les principes et les techniques décrits dans ce guide, vous pouvez créer des info-bulles utilisables par tous, quelles que soient leurs capacités. N'oubliez pas que l'accessibilité est un processus continu, alors continuez à tester et à affiner vos info-bulles pour vous assurer qu'elles répondent aux besoins de tous vos utilisateurs.

Ressources