Apprendre HTML5 & CSS3 rapidement et facilement
Apprendre HTML5 & CSS3 rapidement et facilement
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 1Créer une mise en page
09m01
Leçon 2Créer un menu à onglet HTML & CSS
08m28
Leçon 3Définir les sections du menu à onglet
06m08
Leçon 4Faire fonctionner le menu à onglet
05m58
Leçon 5Accessibilité à mettre en place
04m07
Leçon 6Attribuer des rôles
08m23
Leçon 7Mettre en relation l'onglet et la section
03m41
Leçon 8Donner les infos au lecteur d'écran
07m07
Leçon 9Mettre à jour le CSS
11m14
Leçon 10Gestion du focus
06m07
Leçon 11Navigation avec la souris
05m42
Leçon 12Navigation avec le clavier
10m36
Leçon 13Afficher les visuelles sur la page
10m43
Leçon 14Donner le focus à tous les évènements
04m55
Aperçus
