Les Règles d'Or des Formulaires Accessibles
Principe fondamental : Chaque champ doit avoir un label explicite, des instructions claires et une gestion d'erreur compréhensible.
🔄 HTML vs ARIA : Quand Utiliser Quoi ?
Règle d'or : Toujours privilégier HTML sémantique. ARIA ne vient qu'en complément quand HTML ne suffit pas.
🌳 Arbre de Décision
📋 Exemples Pratiques
✅ HTML First - Champ Obligatoire
<label for="nom">Nom *</label>
<input id="nom" type="text" required>
Pourquoi HTML ? L'attribut required bloque la soumission ET informe les lecteurs d'écran.
🔧 ARIA en Complément - Champ Personnalisé
<div role="textbox" contenteditable="true"
aria-required="true"
aria-describedby="help-text"></div>
<div id="help-text">Format: JJ/MM/AAAA</div>
Pourquoi ARIA ? Élément personnalisé qui nécessite des informations supplémentaires pour l'accessibilité.
✅ HTML First - Validation Email
<label for="email">Email</label>
<input id="email" type="email" pattern="[^@]+@[^@]+\.[^@]+">
Pourquoi HTML ? type="email" et pattern fournissent validation native et clavier adapté.
🔧 ARIA en Complément - État d'Erreur
<input type="email" aria-invalid="true"
aria-describedby="email-error">
<div id="email-error" role="alert">
Format email invalide
</div>
Pourquoi ARIA ? aria-invalid et role="alert" communiquent l'état d'erreur aux technologies d'assistance.
✅ HTML First - Groupement
<fieldset>
<legend>Informations personnelles</legend>
<label for="prenom">Prénom</label>
<input id="prenom" type="text">
</fieldset>
Pourquoi HTML ? fieldset et legend créent un groupement sémantique natif.
🔧 ARIA en Complément - Groupe Personnalisé
<div role="group" aria-labelledby="addr-title">
<h3 id="addr-title">Adresse</h3>
<!-- Champs d'adresse -->
</div>
Pourquoi ARIA ? Quand fieldset ne convient pas stylistiquement, role="group" offre une alternative.
💡 Bonnes Pratiques de Choix
Priorité HTML
Toujours commencer par vérifier si HTML natif peut répondre au besoin. C'est plus robuste et universel.
ARIA en Complément
Utiliser ARIA uniquement pour combler les lacunes d'HTML ou pour des composants personnalisés.
Tester Systématiquement
Valider avec des lecteurs d'écran que l'information est bien transmise aux utilisateurs.
Documentation
Documenter les choix ARIA pour faciliter la maintenance et la compréhension de l'équipe.
🧩 Éléments de Formulaire Essentiels
🏷️ Labels et Étiquettes
Association explicite entre champs et étiquettes
<label for="email">Email</label>
<input id="email" type="email">
<input placeholder="Email">
✅ Validation et Erreurs
Messages d'erreur clairs et accessibles
aria-invalid="true"
aria-describedby="error-msg"
Erreur en rouge uniquement
📦 Groupes de Champs
Organisation logique avec fieldset et legend
<fieldset>
<legend>Adresse</legend>
Champs sans regroupement
💡 Instructions et Aide
Guidance claire pour l'utilisateur
aria-describedby="help-text"
Instructions cachées
🧪 Formulaire Démonstratif
🔍 Fonctionnalités démontrées
- Labels explicites : Chaque champ a un label associé
- Champs obligatoires : Marqués visuellement et sémantiquement
- Instructions d'aide : Textes explicatifs liés aux champs
- Validation accessible : Messages d'erreur annoncés
- Groupes logiques : fieldset/legend pour organiser
- Navigation clavier : Tous les éléments accessibles au clavier
🎯 Exemples Concrets de Formulaires Accessibles
📞 Formulaire de Contact Complet
Un formulaire de contact professionnel respectant toutes les bonnes pratiques d'accessibilité.
🔍 Points d'accessibilité mis en œuvre :
- Fieldsets et legends : Groupement logique des champs
- Labels explicites : Chaque champ a un label associé
- Attributs required : Champs obligatoires identifiés
- Autocomplete : Facilite le remplissage automatique
- aria-describedby : Textes d'aide liés aux champs
- Messages d'erreur : role="alert" et aria-live
- Navigation clavier : Ordre logique de tabulation
🔍 Formulaire de Recherche Avancée
Un formulaire de recherche avec filtres multiples et suggestions automatiques.
🔍 Points d'accessibilité mis en œuvre :
- role="combobox" : Champ de recherche avec autocomplétion
- aria-expanded : État d'ouverture des suggestions
- aria-autocomplete="list" : Type d'autocomplétion
- aria-owns : Relation avec la liste de suggestions
- details/summary : Filtres repliables accessibles
- aria-live : Annonce du nombre de résultats
- Groupement logique : Fieldsets pour les filtres
👤 Formulaire d'Inscription Sécurisé
Un formulaire d'inscription avec validation en temps réel et indicateurs de sécurité.
🔍 Points d'accessibilité mis en œuvre :
- Autocomplete : Attributs pour faciliter le remplissage
- Validation temps réel : Feedback immédiat avec aria-live
- Indicateur de force : Progressbar pour le mot de passe
- Bouton toggle : Afficher/masquer le mot de passe
- Liens externes : Indication d'ouverture dans nouvel onglet
- Groupement logique : Fieldsets pour organiser les sections
- Messages d'état : Feedback sur la disponibilité email
🎮 Exercices Interactifs
Mettez en pratique vos connaissances avec ces exercices interactifs. Modifiez le code et voyez le résultat en temps réel !
📋 Critères RGAA pour les Formulaires
Critère 11.1 - Étiquetage
Chaque champ de formulaire a-t-il une étiquette ?
✅ Conforme
<label for="nom">Nom</label>
<input id="nom">
❌ Non conforme
<input placeholder="Nom">
Critère 11.10 - Contrôle de saisie
Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?
✅ Conforme
aria-invalid="true"
aria-describedby="error"
❌ Non conforme
Erreur sans indication ARIA
Critère 11.13 - Aide à la saisie
La finalité d'un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique ?
✅ Conforme
autocomplete="email"
autocomplete="given-name"
❌ Non conforme
Pas d'attribut autocomplete