Intégrer une police Dys pour améliorer l’accessibilité de votre site

Ce tutoriel en ligne vous guide pas à pas dans l’intégration d’une fonctionnalité d’accessibilité simple et efficace sur un site web : permettre aux utilisateurs d’activer une police adaptée aux personnes dyslexiques, comme OpenDyslexic, via une case à cocher.
L’objectif est double :

• améliorer l’inclusion numérique de votre interface
• respecter les critères du RGAA 4.1 tout en offrant une expérience utilisateur personnalisée.

Au programme :

• Intégration locale d’une police accessible (OpenDyslexic)
• Création d’une interface simple avec une case à cocher
• Application conditionnelle de la police via JavaScript et CSS
• Utilisation de localStorage pour conserver le choix de l’utilisateur
• Respect des bonnes pratiques d’accessibilité numérique (RGAA)

Prérequis :

Ce tuto s’adresse aux développeurs débutants à intermédiaires ayant :

• Des bases en HTML, CSS et JavaScript
• Un intérêt pour l’accessibilité numérique et l’expérience utilisateur inclusive

Tutos suggérés :

Afin de suivre ce tutoriel dans de bonnes conditions, vous pouvez mettre à jour vos connaissances via ces tutos :

• RGAA : Faites de l'accessibilité un atout pour votre entreprise
• JavaScript moderne avancé - Storage

Objectifs pédagogiques :

À la fin de ce cours, vous serez capable de :

• Proposer une interface accessible personnalisable par l’utilisateur
• Gérer dynamiquement l’affichage d’une police alternative
• Assurer la persistance du paramètre d’accessibilité
• Comprendre l’impact de ce type d’option sur la conformité RGAA

Fichiers fournis :

• Fichiers HTML / CSS / JS du projet
• Police OpenDyslexic au format .woff
• Structure de projet prête à l’emploi

Ce cours est une porte d’entrée concrète vers une approche plus inclusive du web.
En moins d’une heure, vous saurez implémenter une option d’accessibilité simple, reconnue et utile.
Commencez dès maintenant à rendre vos interfaces plus accessibles et conformes aux bonnes pratiques du web.