Bac à sable
Mon bac à sable de briques d'interface accessibles
Carrousels, onglets, fenêtres modales ou menus déroulants : j'expérimente et partage ici des briques interactives pour t'aider à concevoir des interfaces accessibles, même dans les cas les plus complexes.
Le HTML natif d'abord
Pourquoi recréer en JavaScript ce que le navigateur sait déjà faire ? Dans ce bac à sable, j'explore les possibilités du HTML natif pour construire des composants accessibles, en privilégiant les comportements intégrés au navigateur et en limitant le JavaScript et les attributs ARIA au nécessaire.
Documenté comme un Design System
Chaque brique dispose d'une démonstration interactive et d'une documentation technique : code source, comportements attendus au clavier, gestion du focus et attributs ARIA lorsque nécessaire.
L'objectif : proposer des exemples concrets, faciles à comprendre, à tester et à réutiliser dans tes projets.
Les briques d'interface
La carte qui se retourne
Un bouton natif retourne la carte, et la face cachée l'est aussi pour le lecteur d'écran.
Technique : details et summary
Les filtres
Chaque filtre dit combien d'articles il garde, avant même qu'on le coche.
Technique : Boutons radio et :has()
Le carrousel
Une liste qui défile avec 2 flèches, sans lecture automatique, que le clavier parcourt carte par carte.
Technique : scroll-snap et boutons
Les onglets
Un seul arrêt de tabulation sur la liste, et les flèches pour changer d'onglet, comme le décrit l'APG.
Technique : tab, tablist et tabpanel
L'accordéon
Une FAQ dont chaque question est un titre et un bouton, qui s'ouvre au clavier.
Technique : h3, button et aria-expanded
La fenêtre modale
Le focus entre dans la fenêtre et revient au bouton à la fermeture, sans script dans les navigateurs récents.
Technique : dialog et command
Le menu déroulant
Des liens qui restent de simples liens, sans rôle de menu, dans une liste qu'Échap referme.
Technique : popover