Des composants d’interface riche accessibles approuvés AcceDe Web
Depuis la version 2 du projet AcceDe Web, les fiches pour les composants d’interface riche proposent une liste de liens vers des scripts « clés en main ».
Ces scripts ont été retenus pour leur bon niveau d’accessibilité de base. Ils sont notamment tous accessibles au clavier seul et avec un lecteur d’écran (synthèse vocale et/ou plage braille).
Mais tous ne suivent pas parfaitement les recommandations énoncées dans les dites fiches. En particulier celles concernant les rôles, états et propriétés ARIA ainsi que les interactions au clavier.
C’est d’ailleurs pourquoi nous avons introduit ces listes de ressources par l’alerte suivante :
Avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements, variables en fonction de la version utilisée.
L’autre éventuel frein à leur utilisation est qu’ils reposent, pour la plupart, sur des librairies JavaScript (type jQuery).
Aussi, certains d’entre-eux n’assurent pas une rétro-compatibilité navigateur suffisante, etc.
Pour remédier à ces obstacles, nous vous proposons désormais des composants d’interface riche responsive en Vanilla JS approuvés AcceDe Web.
À noter qu’à l’heure actuelle, seules les fiches « Accordéons » et « Onglets » disposent de leur composant approuvé AcceDe Web (Cf. encart « Composant AcceDe Web »).
Mais d’autres sont en cours de développement et ne tarderont pas à être disponibles.
Atalan n’étant pas une société experte en développement web, nous avons sollicité l’agence front-end Switch pour réaliser ces composants et concevoir l’interface les présentant.
Nous tenons d’ailleurs à adresser un énorme merci et toutes nos félicitations à l’équipe Switch (Damien, Harold, Sébastien et Thomas) pour cet excellent travail !
C’est un réel plaisir pour nous de travailler à leurs côtés sur ce sujet. :)
Je vais d’ailleurs laisser la parole à Sébastien pour qu’il vous présente leurs choix techniques pour le développement de ces composants.
Témoignage de Sébastien de l’agence Switch
Le postulat de départ, lors de nos premières discussions avec les équipes d’Atalan, était de développer des composants riches sans aucune dépendance externe et assurant un très bon niveau d’accessibilité.
La partie conformité à l’accessibilité étant assurée par Atalan, nous avons pu nous concentrer pleinement sur les différents axes de développement du composant :
- une compatibilité large (les principaux navigateurs modernes jusqu’à Internet Explorer 9) ;
- aucune dépendance externe, le composant est écrit en JavaScript Vanilla ;
- un minimum de prérequis de fonctionnement : quelques attributs ARIA indispensables (
role,aria-controls,aria-labelledby,aria-multiselectable), le reste étant géré par le composant lui-même ; - laisser une totale liberté au développeur pour le rendu graphique du composant : pas de surcharge du DOM avec des classes, pas de style par défaut. Tous les comportements reposent sur les attributs ARIA. Tout est laissé au libre choix (et à la créativité !) du développeur ;
- exposer des hooks pour que le développeur puisse ajouter des comportements à l’ouverture ou à la fermeture du composant par exemple.
En ce qui concerne ce premier composant, les accordéons et les onglets sont gérés par le même script, les deux partageant les mêmes role dans ARIA.
Le script est mis à la disposition de tous sur Github et sur NPM et sa documentation se trouve ici : http://a11y.switch.paris/.
Les retours d’expérience sont évidemment les bienvenus !
C’est également un plaisir pour nous de travailler avec les équipes d’Atalan, cela s’est révélé être très formateur. Merci à eux :-)