4.8/5 Trustpilot (1392 avis)
Créer un menu à onglet accessible en HTML, CSS et JavaScript (ARIA, RGAA)
Créer un menu à onglet accessible en HTML, CSS et JavaScript (ARIA, RGAA)
Créer un composant d’onglets 100 % accessible (RGAA 4.1)
Dans ce cours en vidéo, nous allons apprendre à concevoir un composant d’onglets moderne, esthétique et conforme aux bonnes pratiques d’accessibilité définies par le RGAA.
L’objectif est de proposer une expérience optimale pour tous les utilisateurs, y compris ceux naviguant au clavier ou utilisant un lecteur d’écran.
Au programme de ce tuto accessibilité
- Structure HTML sémantique : utilisation des rôles ARIA (
tablist,tab,tabpanel) et des associations explicites (aria-controls,aria-labelledby). - Accessibilité clavier : gestion de la navigation avec Tab, flèches gauche/droite, Home, End.
- Gestion des états et du focus : synchronisation visuelle via
aria-selected,tabindexethidden. - Styles adaptés : mise en évidence du focus visible uniquement au clavier.
- JavaScript accessible : logique directe sans fonctions externes, avec bascule dynamique entre les onglets et mise à jour automatique des attributs d’accessibilité.
Compétences acquises à la fin du tuto :
- Créer un composant d’onglets utilisable à la souris et au clavier.
- Structurer et annoter le code pour qu’il soit compréhensible par les technologies d’assistance.
- Respecter les critères RGAA liés à la navigation, au focus, aux états et au masquage des contenus.
- Améliorer l’expérience utilisateur pour tous les profils, sans compromis sur le design.
Ce tutoriel s’adresse aussi bien aux développeurs débutants qu’aux intégrateurs confirmés souhaitant rendre leurs interfaces conformes aux normes d’accessibilité.
Pour suivre ce tuto dans de bonnes conditions :
- Vous devez avoir visualisé le tuto sur la navigation par clavier
Pour aller plus loin sur les connaissances en RGAA :
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Créer une mise en page
Créer une mise en page
Leçon 2
Créer un menu à onglet HTML & CSS
Créer un menu à onglet HTML & CSS
Leçon 3
Définir les sections du menu à onglet
Définir les sections du menu à onglet
Leçon 4
Faire fonctionner le menu à onglet
Faire fonctionner le menu à onglet
Leçon 5
Accessibilité à mettre en place
Accessibilité à mettre en place
Leçon 6
Attribuer des rôles
Attribuer des rôles
Leçon 7
Mettre en relation l'onglet et la section
Mettre en relation l'onglet et la section
Table des matières
Leçon 1
Créer une mise en page
09m01
Leçon 2
Créer un menu à onglet HTML & CSS
08m28
Leçon 3
Définir les sections du menu à onglet
06m08
Leçon 4
Faire fonctionner le menu à onglet
05m58
Leçon 5
Accessibilité à mettre en place
04m07
Leçon 6
Attribuer des rôles
08m23
Leçon 7
Mettre en relation l'onglet et la section
03m41
Leçon 8
Donner les infos au lecteur d'écran
07m07
Leçon 9
Mettre à jour le CSS
11m14
Leçon 10
Gestion du focus
06m07
Leçon 11
Navigation avec la souris
05m42
Leçon 12
Navigation avec le clavier
10m36
Leçon 13
Afficher les visuelles sur la page
10m43
Leçon 14
Donner le focus à tous les évènements
04m55
Aperçus
