Les composants JavaScript sont devenus incontournables dans la conception d'interfaces modernes : menus déroulants, carrousels, modales, onglets…
Bien utilisés, ils enrichissent l'expérience utilisateur. Mais mal implémentés, ils peuvent rapidement se transformer en barrières à l'accessibilité numérique, excluant une partie des internautes.
Dans cet article, nous passons en revue les erreurs les plus fréquentes et les bonnes pratiques pour créer des composants dynamiques accessibles à tous.
La gestion du focus : un point souvent négligé
Problème : Un composant JS qui ouvre une modale ou une pop-in sans gérer correctement le focus clavier.
Conséquences :
- Les utilisateurs naviguant au clavier ou avec un lecteur d’écran continuent de “naviguer” derrière la fenêtre.
- Il devient difficile, voire impossible, de fermer facilement la fenêtre.
- Confusion sur les informations présentes à l’écran.
Bonnes pratiques :
- Déplacer le focus automatiquement vers la modale dès son ouverture (via
element.focus()). - Restreindre la navigation clavier à l’intérieur de la modale (focus trap).
- Restaurer le focus à son emplacement initial, une fois la fenêtre fermée.
Info : la librairie focus-trap peut vous être utile pour laisser le focus enfermé à l’intérieur de la modale
Des attributs ARIA mal utilisés ou absents
Problème : De nombreux composants interactifs (accordéons, onglets, carrousels, menus…) sont affichés, masqués ou mis à jour sans mettre à jour leurs attributs ARIA.
Conséquences :
- Les lecteurs d’écran ne perçoivent pas correctement les changements d’état (ouvert/fermé, sélectionné, visible/invisible).
- Des contenus masqués restent accessibles au focus ou lus à tort.
- L’expérience utilisateur devient confuse, voire inutilisable pour les personnes utilisant un lecteur d’écran ou la navigation au clavier.
Bonnes pratiques :
- Mettre à jour dynamiquement les attributs ARIA (
aria-expanded,aria-hidden,aria-selected, etc.). - S’assurer que les éléments masqués visuellement le soient aussi pour les technologies d’assistance (
aria-hidden="true",display: noneen CSS). - Utiliser des rôles explicites si nécessaire (ex :
dialog), mais ne pas surcharger les éléments inutilement.
Exemple : dans un accordéon, le bouton de titre met à jour un attribut aria-expanded, il prend la valeur “true” ou “false” en fonction de l’état du panneau associé (ouvert/fermé).
Autre exemple : dans un carrousel, seuls les éléments visibles doivent être lus pas les technologies d’assistance et être pris au focus, les autres doivent être masqués (par exemple avec aria-hidden="true" ou la propriété CSS display :none).
Pour en savoir plus sur le développement accessible, nous proposons des formations qui pourraient vous intéresser.
Navigation clavier incomplète ou absente
Problème : Un carrousel ou un menu déroulant ne réagit qu’à la souris.
Conséquences :
- Les utilisateurs naviguant au clavier ne peuvent pas accéder à l’information.
- L’interface devient inutilisable dans certains contextes (mobilité réduite, commandes vocales, etc.).
Bonnes pratiques :
- S’assurer que chaque interaction possible à la souris est faisable au clavier.
- Respecter les conventions d’ordre de tabulation (tab, shift+tab), et les touches standard : Entrée, Échap, Flèches.
Exemple : dans un menu accessible, l'activation de la touche Entrée permet d’afficher/masquer le menu et l'activation de la touche Échap de le fermer.
Composants custom qui réinventent la roue
Problème : Créer un select personnalisé, des onglets maison ou une modale sur-mesure sans respecter les standards d’accessibilité.
Conséquences :
- Complexité inutile.
- Risques d’erreurs sur le plan de l’UX et de l’accessibilité.
- Composants impossibles à utiliser pour certains utilisateurs.
Bonnes pratiques :
- S’appuyer sur les composants natifs quand c’est possible.
- Sinon, suivre les modèles de conception WAI-ARIA officiels du W3C pour construire les composants sur mesure.
Info : les modèles de conception ARIA proposent des implémentations types de modales, carrousels, etc.
Difficile de savoir par où commencer ? N’hésitez pas à nous contacter pour vous faire accompagner.
Conclusion :
Le JavaScript permet de créer des interfaces riches, dynamiques, interactives. Mais s’il est mal utilisé, il devient un facteur majeur d’exclusion.
Avec des pratiques claires, des tests utilisateurs et de la rigueur technique, on peut construire des composants complexes mais accessibles à tous.
Envie d'en savoir plus ? Découvrez comment se déroule un audit d'accessibilité numérique et comment il peut vous aider à améliorer le niveau d'accessibilité de votre site.
