Polices d'icônes et pièges d'accessibilité
Découvrez pourquoi les polices de glyphes sont souvent lues comme du charabia.
Polices d'icônes et pièges d'accessibilité est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu’est-ce qu’une police d’icônes ?
Une police d’icônes associe des caractères à des symboles graphiques : une lettre s’affiche alors sous forme de cœur ou de flèche. Pratique pour le dimensionnement, mais risqué pour les lecteurs d’écran.
Le problème des caractères incohérents
De nombreuses polices d’icônes dissimulent leurs symboles dans la zone à usage privé d’Unicode. Si la police n’est pas chargée, un lecteur d’écran peut lire un carré aléatoire ou une lettre étrange.
Les polices peuvent ne pas se charger
Si le fichier de police est bloqué ou échoue, le symbole de remplacement s’affiche à la place de votre icône. Les utilisateurs voient alors un caractère isolé là où une icône claire devrait apparaître.
Le contenu CSS n’est pas du vrai texte
Les polices d’icônes injectent souvent leurs symboles via des pseudo-éléments CSS. Ce contenu généré est fragile et facilement mal interprété par les technologies d’assistance.
i.icon-star::before {
content: "\e801";
}Masquez les symboles d’icônes décoratifs
Si le symbole d’une police d’icônes est décoratif, entourez-le et ajoutez aria-hidden="true" afin que ce caractère dépourvu de sens n’atteigne jamais l’arbre d’accessibilité.
<span class="icon-star" aria-hidden="true"></span>Les symboles significatifs ont besoin de texte
Lorsque le symbole porte une signification, associez l’icône masquée à du vrai texte visuellement masqué afin que cette signification subsiste en cas de problème de police.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>Les feuilles de style utilisateur les perturbent
Certains utilisateurs remplacent les polices pour gérer la dyslexie ou une basse vision. Leur police remplace la vôtre, et chaque symbole de votre police d’icônes devient une simple lettre.
Les outils de traduction les déforment
La traduction du navigateur peut remplacer les caractères des symboles par un autre texte et brouiller vos icônes, car il s’agit techniquement de lettres et non d’images.
Pourquoi SVG est préférable
Le SVG intégré évite tous ces problèmes : c’est une véritable image, qui résiste aux changements de police et à la traduction, et qui accepte proprement un rôle et une étiquette.
Abandonner les polices d’icônes
La recommandation actuelle est d’abandonner les polices d’icônes au profit de SVG intégrés ou de sprites SVG. Vous gagnez un rendu net et bien moins de pièges d’accessibilité.
Testez avec la police désactivée
Bloquez la police dans les outils de développement, puis rechargez la page. Si vous voyez des caractères isolés à la place des icônes, vos solutions de remplacement et vos étiquettes doivent être améliorées.
Vérification rapide
Vous récupérez une page qui utilise une police d’icônes pour une évaluation significative sous forme d’étoiles. Quelle est la solution d’accessibilité la plus sûre ?
Récapitulatif : utilisez les polices d’icônes avec prudence
Les symboles des polices d’icônes sont du texte fragile : masquez les symboles décoratifs avec aria-hidden, accompagnez les symboles significatifs de vrai texte et préférez SVG. 🎯
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Polices d'icônes et pièges d'accessibilité » est-elle gratuite ?
Oui — le texte complet de « Polices d'icônes et pièges d'accessibilité » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Polices d'icônes et pièges d'accessibilité » ?
Découvrez pourquoi les polices de glyphes sont souvent lues comme du charabia. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Polices d'icônes et pièges d'accessibilité » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- SVG intégré : role img et un titre
- Masquer les icônes décoratives avec aria-hidden
- Des boutons à icône qui ont tout de même un nom
- Polices d'icônes et pièges d'accessibilité