Icônes accessibles : 9 conseils pour une meilleure ergonomie

Les icônes sont omniprésentes dans les interfaces modernes. Menu hamburger, loupe de recherche, croix de fermeture : ces pictogrammes semblent évidents. Pourtant, ils posent de sérieux défis d'accessibilité. Voici 9 conseils pour rendre vos icônes utilisables par tous.

Pourquoi les icônes posent problème

Les technologies d'assistance ne peuvent pas "voir" les icônes. Un lecteur d'écran face à un bouton contenant uniquement une icône SVG ne pourra rien annoncer à l'utilisateur, ou pire, lira un nom de fichier incompréhensible.

Par ailleurs, l'interprétation des icônes varie selon les cultures, les générations et les habitudes numériques. Une icône qui semble évidente pour un designer peut être totalement obscure pour certains utilisateurs.

[!NOTE] Le critère RGAA 1.1 exige que chaque image porteuse d'information ait une alternative textuelle. Cela inclut les icônes fonctionnelles.

1. Choisissez le bon format : SVG ou PNG

Privilégiez le format SVG pour vos icônes. Contrairement aux polices d'icônes (icon fonts), les SVG offrent plusieurs avantages :

• Meilleur support des attributs d'accessibilité (role, aria-label)
• Pas de problème d'affichage si les polices personnalisées échouent
• Scalables sans perte de qualité

<!-- Évitez les icon fonts -->
<i class="fa fa-search"></i>

<!-- Préférez les SVG inline -->
<svg aria-hidden="true" focusable="false">
  <use href="#icon-search"></use>
</svg>

2. Respectez une taille minimale cliquable

Les WCAG 2.2 recommandent une zone cliquable d'au moins 24x24 pixels. Cependant, pour une ergonomie optimale, visez 44x44 pixels minimum.

Cette taille garantit que les utilisateurs avec des troubles moteurs ou utilisant des écrans tactiles puissent interagir facilement.

.icon-button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

3. Fournissez un texte alternatif pertinent

Le texte alternatif doit décrire la fonction de l'icône, pas son apparence. Pour une icône de poubelle dans un bouton de suppression :

<!-- Mauvais : décrit l'apparence -->
<button aria-label="Poubelle">...</button>

<!-- Bon : décrit la fonction -->
<button aria-label="Supprimer cet article">...</button>

Utilisez notre outil de vérification des alternatives textuelles pour valider vos icônes.

4. Masquez les icônes décoratives

Une icône qui accompagne un texte visible est décorative. Elle ne doit pas être lue par les lecteurs d'écran.

<!-- L'icône renforce le texte mais n'ajoute pas d'information -->
<button>
  <svg aria-hidden="true"><!-- icône enveloppe --></svg>
  Envoyer le message
</button>

L'attribut aria-hidden="true" retire l'élément de l'arbre d'accessibilité sans affecter l'affichage visuel.

5. Assurez un contraste suffisant

Les icônes doivent respecter un ratio de contraste de 3:1 par rapport à leur arrière-plan (WCAG 1.4.11). Ne vous fiez pas uniquement à la couleur pour transmettre l'information.

Pour une icône indiquant une erreur, combinez :

• La couleur rouge
• Une forme distinctive (triangle d'alerte)
• Un texte explicatif

Testez vos contrastes avec notre vérificateur de contraste.

6. Accompagnez les icônes de texte visible

Certaines icônes sont universellement reconnues (lecture, pause, volume). Mais la plupart restent ambiguës. En cas de doute, ajoutez un label visible.

<!-- Ambigu : que signifie cette icône ? -->
<button>
  <svg><!-- icône avec trois points --></svg>
</button>

<!-- Clair : texte visible -->
<button>
  <svg aria-hidden="true"><!-- icône --></svg>
  Plus d'options
</button>

[!TIP] Testez vos icônes auprès d'utilisateurs variés. Une icône "évidente" pour votre équipe peut ne pas l'être pour votre audience.

7. Utilisez des icônes cohérentes

La cohérence réduit la charge cognitive. Si une loupe représente la recherche sur une page, elle doit garder cette signification partout sur votre site.

Créez une bibliothèque d'icônes documentée avec :

• L'icône visuelle
• Sa signification
• Son alternative textuelle standardisée
• Ses cas d'usage

8. Gérez le focus clavier

Les icônes interactives doivent être accessibles au clavier avec un indicateur de focus visible.

.icon-button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.icon-button:focus:not(:focus-visible) {
  outline: none;
}

Consultez notre guide sur l'accessibilité clavier pour plus de détails.

9. Testez avec un lecteur d'écran

Le test final : naviguez votre interface avec un lecteur d'écran. Chaque icône fonctionnelle doit :

1. Être annoncée avec un nom compréhensible
2. Indiquer son rôle (bouton, lien)
3. Communiquer son état si applicable (aria-expanded, aria-pressed)

<button aria-label="Menu" aria-expanded="false">
  <svg aria-hidden="true"><!-- hamburger --></svg>
</button>

Checklist des icônes accessibles

Conclusion

Rendre vos icônes accessibles demande de la rigueur mais améliore l'expérience pour tous vos utilisateurs. La clé : pensez fonction avant forme, et testez systématiquement avec des technologies d'assistance.

Analysez l'accessibilité de vos icônes en quelques secondes avec RGAA Checker : notre outil détecte automatiquement les boutons et liens sans nom accessible.