Description du projet

Résumé

Au terme d’un an de travail, le Regroupement des aveugles et amblyopes du Montréal métropolitain (RAAMM) met à la disposition de la communauté une banque d’exemples de composants interactifs accessibles. Ces composants reprennent quelques fonctionnalités courantes des sites Web : 

• Accordéons
• Boîte de dialogue modale
• Champ d’autocomplétion
• Menus déroulants en accordéons
• Menu hamburger en accordéon
• Notes de bas de page
• Panneaux à onglets
• Tuiles
• Validation de formulaire

Les exemples ont été dûment testés pour assurer leur accessibilité technique et fonctionnelle, ainsi que leur utilisabilité pour des clientèles vivant avec des limitations. Chaque composant s’accompagne d’une fiche qui en documente les points clés, notamment : ses principes de fonctionnement, ses requis fonctionnels et techniques, ainsi que d’autres recommandations et renseignements pour une intégration réussie.

Publics cibles

Les fiches de composants et leurs exemples s’adressent notamment aux personnes responsables de la conception et de l’intégration de composants interactifs dans des sites Web.

Cependant, toute personne s’intéressant de manière plus générale à l’accessibilité numérique peut également tirer partie de cette ressource. Plusieurs notions abordées ne nécessitent pas de connaissances en codage ou en programmation et sont à la portée de profils non techniques.

Contexte et objectifs du projet 

Les composants interactifs demeurent un aspect incontournable de la conception de sites Web modernes. Cependant, diverses clientèles de l’accessibilité, dont des personnes aveugles et malvoyantes desservies par le RAAMM, rencontrent fréquemment des enjeux d’accessibilité avec ce type de contenus, notamment au chapitre de la compatibilité avec les outils d’adaptation et avec la navigation au clavier.

De plus en plus, il est possible de trouver sur le Web des ressources pour la conception de composants dits accessibles. Néanmoins, ces ressources ne répondent pas toujours pleinement aux besoins :

• Les contenus offerts sont majoritairement anglophones, ce qui peut causer une barrière de langue.
• La qualité des exemples en circulation est variable. Certains composants sont annoncés comme respectant les normes d’accessibilité, sans que ce soit réellement le cas. La compatibilité avec divers outils d’adaptation (principe de robustesse) est un aspect souvent négligé. Enfin, les exemples qui vont au-delà de la conformité, en tenant compte de l’utilisabilité et de l’ergonomie, se font plus rares.
• Il est souvent nécessaire de cumuler plusieurs sources documentaires pour réunir toute l’information requise. Les personnes en apprentissage de l’accessibilité numérique ne sont pas toujours outillées pour jauger la pertinence et la fiabilité des sources collectées.

La banque de composants interactifs accessibles se veut une piste de solution aux enjeux précédemment identifiés. Nous espérons qu’elle contribuera à améliorer l’accessibilité de sites Web conçus au Québec, en bonifiant les outils à la disposition des parties prenantes d’un projet Web.

Principaux apports du projet

• Une documentation francophone, uniformisée et centralisée : Les fiches de composants regroupent, en français, diverses informations souvent réparties dans des ressources distinctes. La structure uniformisée des fiches aide au repérage et facilite la lecture. Les exemples de composants tiennent compte de particularités propres à la langue française pour la transposition de certaines caractéristiques d’accessibilité.
• Une attention particulière portée à l’accessibilité fonctionnelle et à l’utilisabilité :
  • Les exemples de composants s’appuient sur un respect des Règles d’accessibilité des contenus Web (WCAG) 2.2, niveau AA, avec la prise en compte de certains critères de niveau AAA. Pour assurer la robustesse et la convivialité des composants, ceux-ci ont fait l’objet de tests utilisateurs et de tests fonctionnels avec divers outils d’adaptation (lecteurs d’écran, loupes d’écran, logiciel de commandes vocales, etc.). Nous avons bonifié l’utilisabilité de certains exemples en tenant compte des rétroactions de personnes testeuses.
  • La documentation consigne de manière systématique les requis fonctionnels de chaque composant, ce qui n’est pas le cas d’une majorité de ressources existantes, qui en font un traitement inégal. Des points de vigilance d’utilisabilité sont aussi mentionnés dans plusieurs fiches. 
• Une occasion d’améliorer des contenus existants et de produire de nouveaux exemples : Certains exemples sont issus de bases existantes, que nous avons révisées pour proposer des améliorations d’accessibilité et de convivialité. D’autres exemples ont été entièrement codés par le RAAMM. Grâce au projet, le RAAMM peut maintenant compter sur une section centralisée de son Laboratoire qui réunit l’information pertinente à la conception de composants interactifs accessibles.
• Une structure qui concilie les besoins en information de profils techniques et non techniques de l’accessibilité : 
  • Les exemples de composants listés en début de fiche permettent à tous publics d’observer le comportement attendu des outils d’adaptation et de la navigation au clavier, ainsi que d’autres caractéristiques d’accessibilité.
  • Les premières sections de la documentation se consacrent à des notions généralistes, telles que la définition des principes du composant et de ses requis fonctionnels. Ces contenus, qui ne nécessitent pas de connaissances en codage, aident à comprendre les besoins d’accessibilité de chaque composant et à détecter de potentiels obstacles, dans le cadre de tests fonctionnels.
  • Les sections subséquentes fournissent des explications plus techniques à l’intention des personnes chargées du codage et de l’intégration du composant. 
  • La cohabitation de ces informations au sein d’une même fiche contribue à préserver une approche holistique de la conception de composants interactifs accessibles. Elle favorise une meilleure communication entre les profils techniques et non techniques qui doivent collaborer vers un même objectif.
• Des exemples de composants adaptables au contexte de développement : Ces exemples sont avant tout fournis pour illustrer les comportements attendus sur le plan de l’accessibilité. Ils demeurent utilisables en production et peuvent être repris tels quels. Cela dit, il est également possible d’en faire une transposition adaptée au cadre de développement et aux spécificités d’un projet, en tenant compte des requis et points de vigilance documentés.
• Un intérêt collatéral du projet pour l’apprentissage des outils d’adaptation : En raison du grand nombre de composants interactifs présentant des obstacles à l’accessibilité, il peut être difficile, pour les personnes en situation de handicap, d’apprendre à se servir de leur outil d’adaptation en étant exposées à des composants qui se comportent tel qu’attendu. Le RAAMM croit donc que les exemples de composants représentent un potentiel pour les formations en réadaptation, en tant que matériau d’apprentissage accessible.

Remerciements et personnes contributrices

Le RAAMM tient d’abord à remercier le programme DATAide, dont le soutien financier a permis de concrétiser ce projet. Nos remerciements sincères s’adressent également à toutes les personnes testeuses qui ont contribué à l’évaluation des composants et qui nous ont fourni de précieuses rétroactions permettant de consolider ces exemples.

Enfin, le RAAMM est fier du travail accompli par son équipe de projet, composée de deux personnes employées de l’organisation et de deux collaborateurs externes.

Employées du RAAMM

Émilie Viau, coordonnatrice des services en accessibilité numérique du RAAMM

• Coordination principale du projet et expertise sénior en accessibilité numérique
• Tests et analyses d’accessibilité
• Recherche et développement
• Prototypage, codage et révision des exemples de composants accessibles
• Rédaction des fiches de composants
• Co-coordination des tests utilisateurs
• Intégration Web du projet au site du Laboratoire

Sandrine Bastarache, conseillère en affaires publiques

• Co-coordination du projet
• Recherche et développement
• Collaboration aux tests et analyses d’accessibilité
• Relecture des fiches de composants
• Coordination des tests utilisateurs

Collaborateurs externes

Jean-Marie D’Amour

• Expertise sénior en accessibilité numérique
• Tests et analyses d’accessibilité
• Relecture des fiches de composants

Shad Gagnon (Ekloweb)

• Révision du codage des composants
• Intégration Web du projet au site du Laboratoire