Intégrer une police Dys pour améliorer l’accessibilité de votre site
Intégrer une police Dys pour améliorer l’accessibilité de votre site
Menu burger, accordéon, fenêtre modale, onglets : ces quatre composants font partie du quotidien de tout développeur front-end. La vraie différence entre un composant qui fonctionne et un composant professionnel, c'est l'accessibilité.
Ce tutoriel vidéo de 22 minutes vous remet une fiche de référence complète pour construire ces composants selon les standards WCAG et RGAA, avec les bons attributs ARIA et la structure HTML attendue.
Une fiche de synthèse pour vos composants interactifs
Ce cours conclut la série consacrée aux composants accessibles en condensant l'essentiel de chaque réalisation : le menu burger pour la navigation mobile, l'accordéon pour le contenu repliable, la fenêtre modale pour les interactions bloquantes et le menu à onglets pour les vues dynamiques.
Pour chacun, vous retrouvez les attributs ARIA clés, les règles de construction et la structure minimale attendue.
Ce que vous allez maîtriser
- Les 4 piliers communs à tout composant accessible : état porté par le HTML, JavaScript simple synchronisateur, icônes muettes avec aria-hidden, masquage sémantique via l'attribut hidden
- Les attributs aria-expanded, aria-controls, aria-label et aria-labelledby appliqués au menu burger et à l'accordéon
- Le rôle dialog, aria-modal et la gestion du focus (focus trap, touche Échap, retour au déclencheur) pour la fenêtre modale
- Les rôles tablist, tab et tabpanel, aria-selected et la navigation aux flèches avec le roving tabindex pour les onglets
Un formateur expérimenté et publié
Carl Brison, technicien supérieur en multimédia depuis le début des années 2000, a créé de nombreux sites professionnels dont deux imprimeries en ligne. Auteur de livres informatiques publiés aux Éditions Ellipses, il transmet ici une approche exigeante : des interfaces utilisables par tous, y compris au clavier et au lecteur d'écran, qui renforcent aussi votre SEO technique.
Un fichier de travail accompagne la vidéo pour relire chaque fiche à tête reposée.
Si vous débutez sur le sujet, commencez par les fondamentaux des attributs ARIA, et retrouvez tous nos tuto HTML pour progresser en développement front-end.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Intégrer les 4 piliers communs des composants accessibles
Intégrer les 4 piliers communs des composants accessibles
Leçon 2
Construire un menu burger accessible avec aria-expanded et aria-controls
Construire un menu burger accessible avec aria-expanded et aria-controls
Leçon 3
Construire un accordéon accessible avec aria-labelledby et hidden
Construire un accordéon accessible avec aria-labelledby et hidden
Leçon 4
Construire une modale accessible : role dialog, aria-modal et gestion du focus
Construire une modale accessible : role dialog, aria-modal et gestion du focus
Leçon 5
Construire des onglets accessibles : tablist, aria-selected et roving tabindex
Construire des onglets accessibles : tablist, aria-selected et roving tabindex
Leçon 6
Aller plus loin : créer un bouton accessible sans balise button
Aller plus loin : créer un bouton accessible sans balise button
Table des matières
Leçon 1Intégrer les 4 piliers communs des composants accessibles
04m23
Leçon 2Construire un menu burger accessible avec aria-expanded et aria-controls
04m14
Leçon 3Construire un accordéon accessible avec aria-labelledby et hidden
03m40
Leçon 4Construire une modale accessible : role dialog, aria-modal et gestion du focus
04m10
Leçon 5Construire des onglets accessibles : tablist, aria-selected et roving tabindex
03m29
Leçon 6Aller plus loin : créer un bouton accessible sans balise button
02m04
