1174 sujets

Accessibilité du Web

Bonjour,

Je suis en train de me renseigner sur l'impact d'une mise en place de RGAA 3 niveau A sur une application Angular 2.

Première question, quel est la différence entre WCAG 2.0 et RGAA 3 ?

Ensuite existe t'il une suite de tests automatisés qui puisse contrôler chaque éléments du DOM ? (J'ai trouvé une suite de tests qui m'a l'air pas mal mais je ne sais pas si ça correspond exactement https://www.axe-core.org/playground/))

Sinon comment tester avez vous des retours d'expérience a ce sujet sur des gros projets ?

Merci Smiley biggrin
Administrateur
Bonjour et bienvenue,

Personne n'ayant répondu jusqu'à présent, je vais quand même répondre tardivement Smiley smile

Le RGAA 3 est une méthode d'application des WCAG 2.0 : en respectant le RGAA 3, on respecte les WCAG 2.0.
Le site du RGAA 3 : http://references.modernisation.gouv.fr/rgaa-accessibilite/
Les nombreuses ressources (guides de l'inté, du dév, du chef de projet, mobile, des lecteurs d'écran et pour CMS, apps, bibliothèques de composnats, etc) liées : https://github.com/DISIC
Je tombe via le dépôt "RGAA Angular Bootstrap" sur https://disic.github.io/rgaa_bibliotheques-javascript/tutoriels/angular-ui.html . Même sans utiliser BS, la méthodo va être proche, nan identique Smiley lol

aXe est un très bon outil, dispo sous plusieurs formes et même intégré au récent et prometteur sonarwhal (outil auditant le serveur, le code, l'accessibilité, etc).
Autres outils :
- dans Chrome DevTools il y a un audit accessibilité
- Color Contrast Analyzer (.exe/.dmg) pour commencer, pour les contrastes de couleur du PSD/Sketch/Figma
- https://app.contrast-finder.org / http://contrast-finder.tanaguru.com dans un second temps, outil que le/la graphiste va adorer quand le contraste mesuré entre une couleur de texte (ou équivalent) et le fond n'est pas suffisant
- Opquast Reporting avec le référentiel RGAA ? (créé par Temesis du temps où Opquast et Temesis ne faisaient qu'un ; j'ai pas pensé à demander à A. Lévy et É. Sloïm qui s'occupait de ce projet. Opquast je suppose Smiley smile ), payant mais bien pratique pour auditer un échantillon de pages ET produire un rapport d'audit plus rapidement et avoir un historique.
- Asqatasun / Tanaguru : autre outil d'audit accessibilité, possiblement de beaucoup de pages (mais ce n'est pas forcément ce que l'on souhaite. Pour suivre un site en production pourquoi pas, sur un site en dév ou dont on suit la conception, un échantillon de 10-30 pages (les gabarits...) est probablement plus utile, cf. la galerie des sites labellisés par AccessiWeb)
- https://tenon.io de K. Groves (API, etc). Jamais utilisé et payant m'enfin ça ne peut être que de qualité


Retour d'expérience sur l'audit et les tests : la moitié se fait à la main. Doit se faire à la main (la pertinence de tel ou tel aspect ne peut être évalué par une machine).
Ce qui n'empêche pas au contraire d'automatiser tout ce qui peut l'être pour ne pas avoir à se taper du travail fastidieux (celui qui doit être fait par une machine genre l'absence de alt sur l'élément img Smiley tired et celui où elle peut aider l'évaluation ultérieure genre pour évaluer la pertinence des titres hN déjà avoir une liste des titres...)
Modifié par Felipe (05 Dec 2017 - 10:38)
Merci pour ta réponse Felipe,

Je te remercie pour toutes ces infos je vais regarder tout ça. Effectivement si RGAA 3 est la même méthode d'application de WCAG 2.0 ça m'aide à y voir plus clair.

Suite a mon post j'ai creusé le sujet, et je vais m'appuyer sur Angular Material (5.0.0-rc0) qui intègre en natif certaines bonne pratiques.

En effet dans la documentation officielle chaque composants ont une rubrique "Accessibility" pour optimiser ses composants. Je ne sais pas si c'est suffisant car je ne suis loin d'expert en accessibilité mais cela permettra justement de gagner un peu de temps sur la partie qui "Dois se faire à la main".
Exemple : https://material.angular.io/components/sidenav/overview#accessibility

Pour l'automatisation je suis effectivement parti sur des tests avec aXe-core pour Jasmine (Suite de tests Angular) qui se base sur la méthode d'application WCAG 2.0 : https://www.axe-core.org/examples/jasmine.html

Un exemple de son utilisation sur l'excellente chaine Youtube A11yCast qui propose des tutoriaux sur l’accessibilité Smiley cligne : https://www.youtube.com/watch?v=jC_7NnRdYb0&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=14

Si tu as le temps de regarder et me donner ton avis je suis preneur.

Merci encore
Modifié par belew (05 Dec 2017 - 11:02)
Administrateur
Angular et moi faisant 2... je ne suis pas en mesure de te conseiller sur quoi que ce soit concernant ce framework Smiley cligne
Mais aXe est un très bon outil, avec énormément "d'adaptateurs" donc si ça fonctionne avec Jasmine, go Smiley smile

Je n'ai pas encore regardé A11yCast mais c'est remonté tellement de fois dans mon fil Twitter récemment que ça doit être bien Smiley lol
Modifié par Felipe (14 Dec 2017 - 17:13)