Lire l'APG : modèles, touches et exemples
Utilisez le guide comme spécification pour chaque composant interactif.
Lire l'APG : modèles, touches et exemples est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Découvrez l'APG
Le guide des pratiques de création ARIA est le guide officiel du W3C pour créer correctement des composants personnalisés. En cas de doute, c'est votre spécification. 📘
Ne le réinventez pas
L'APG fournit des modèles éprouvés pour les onglets, les menus, les boîtes de dialogue et bien plus encore. Vous reprenez une recette testée au lieu de deviner vous-même les rôles et les touches.
Anatomie d'un modèle
Chaque modèle de l'APG comporte les mêmes sections : une présentation, l'interaction au clavier, les rôles et attributs ARIA requis, ainsi que des exemples fonctionnels à étudier.
Le clavier est le contrat
Le tableau Interaction au clavier vous indique exactement ce que chaque touche doit faire. Les utilisateurs s'attendent à ces touches ; considérez donc ce tableau comme une exigence stricte.
Le tableau des rôles
Le tableau Rôles, états et propriétés WAI-ARIA répertorie chaque attribut dont le composant a besoin et précise quand chacun change. N'en omettez aucun.
Étudiez les exemples
Chaque modèle est fourni avec un exemple fonctionnel et son code source complet. Lisez-le, testez-le avec un lecteur d'écran, puis adaptez le balisage à votre propre interface.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>Le natif d'abord, toujours
L'APG commence par un avertissement : privilégiez le HTML natif lorsqu'il existe. Ne recourez à ces modèles que si aucun élément réel ne convient.
Les états changent à l'exécution
Les modèles distinguent les rôles fixes des états qui changent. Vous définissez aria-expanded ou aria-selected avec JavaScript au fil des interactions de l'utilisateur, et non une seule fois dans le HTML.
Le focus fait partie de la spécification
De nombreux modèles décrivent précisément où le focus doit aller et comment il se déplace. Suivre cette chorégraphie du focus est aussi important que l'ARIA elle-même.
Testez par rapport au modèle
Une fois le composant créé, parcourez-le en suivant le tableau des touches de l'APG, touche par touche. Si chaque ligne est validée, vous avez reproduit le comportement éprouvé.
C'est un guide vivant
L'APG est versionné et mis à jour au fil de l'évolution d'ARIA ; consultez donc l'édition actuelle plutôt qu'un ancien article de blog qui le reprend.
Vérification rapide
Vous êtes sur le point de créer un composant personnalisé. Vers quoi l'APG doit-il vous orienter en premier ?
Récapitulatif
L'APG est la spécification de votre composant : privilégiez le natif, puis suivez les rôles, les états, les touches et le focus de chaque modèle. Testez votre composant avec ses tableaux et vous livrerez un comportement déjà familier aux utilisateurs. ✅
Questions Fréquemment Posées
La leçon « Lire l'APG : modèles, touches et exemples » est-elle gratuite ?
Oui — le texte complet de « Lire l'APG : modèles, touches et exemples » 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 « Lire l'APG : modèles, touches et exemples » ?
Utilisez le guide comme spécification pour chaque composant interactif. 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 1 sur 4.
Combien de temps prend la leçon « Lire l'APG : modèles, touches et exemples » ?
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
- Lire l'APG : modèles, touches et exemples
- Combobox et saisie semi-automatique bien conçus
- Menu, barre de menus et bouton de menu
- Treegrid et autres modèles avancés