PagesJaunes a mandaté la société Urbilog il y a maintenant 1 an et demi afin de réaliser un audit sur le taux d’accessibilité numérique du site www.pagesjaunes.fr. Quelques mois plus tard, le verdict tombe : le taux de conformité du site est de 31%.
L’intégration web du site étant confiée en totalité au centre de service d’artwaï, nous avons très rapidement commencé le chantier avec les équipes de développements de PagesJaunes. Et il y avait du boulot !
Réfléchir non pas une mais des expériences utilisateurs
Au début de la formation, la première question qu’on nous a posé est : “Comment une personne non-voyante fait-elle pour se servir un verre d’eau sans en mettre partout et être sur qu’on ne déborde pas ?” On s’est hasardé à répondre “mettre son doigt dans le verre pour savoir le niveau d’eau”. Ok, mais si c’est un café brulant ? Raté.
Lorsque l’on démarre un projet, il y a toute une phase de conception où l’on réfléchit à l’expérience utilisateur. Comment l’utilisateur va-t-il interagir avec notre site, quel parcours va-t-il faire au sein du site ? On réfléchit à la manière dont nos usagers vont naviguer dans nos webapp mais plus rarement quels sont les moyens dont ils disposent pour le faire.
Nos UX sont souvent réfléchies pour un utilisateur technophile, sur desktop, avec une bonne connexion wifi. Mais quid de l’expérience utilisateur de cette cadre trentenaire dans le métro parisien qui peine à avoir la 3G ? Quid de ma grand-mère équipée d’un Windows Vista en bout de ligne ADSL ? Et ce chef d’entreprise dont le siège de l’agence web Rennes est basé à Langouët ? Et aussi ce robot Google qui vient crawler le site ?
Définir l’accessibilité pour en comprendre l’utilité
On aurait facilement tendance à définir l’accessibilité par “moyens mis en œuvre pour rendre un site web utilisable par des personnes non voyantes”. En réfléchissant de cette manière, l’accessibilité devient une contrainte, car on ne va pas se mentir, l’inclusion des situations de handicap subit toujours bon nombre d’idées reçues. Pourtant, si on définit l’accessibilité plutôt comme ceci “moyens mis en place pour rendre un site web utilisable par n’importe qui, dans tous les contextes, qu’ils soient techniques ou environnementaux”, on trouve dans l’accessibilité des parallèles avec la web performance. Et ça, ça plait aussi bien à l’équipe Perf de PagesJaunes qu’à la team d’artwaï. L’accessibilité, à l’instar de nombres d’inventions crées pour les personnes en situation de handicap (la création des SMS) est finalement profitable à tout le monde.
En ces temps où nombre de commerces sont fermés et avec l’explosion des services de prise de rendez-vous ou de click and collect, les travaux d’accessibilité sur le site de PagesJaunes ont permis de simplifier les interactions avec les commerces de proximité.
La sémantique HTML à l’honneur
Retour aux sources !
Travailler l’accessibilité quand on est intégrateur de site web, c’est revenir aux basiques de notre métier qu’on a tendance à laisser de côté avec la pratique.
L’exemple le plus flagrant est celui de dropdown, menu burger, accordéons, soufflets, quelque soit son appellation. Le principe est le même :
Au clic sur un élément X, un élément Y s’affiche. Dans la majorité des cas, l’élément X est codé avec un <span> ou une <div>, rendant la navigation au clavier impossible car <span> et <div> sont des balises non tabulables. Il existe pourtant une balise tout prête pour ce cas de figure : <button>. Quand j’ai commencé mon métier, un développeur full-stack m’a dit :
Utilise un <a> plutôt qu’un <button>,
c’est moins chiant à styler.
Derrière cette phrase se cache une ribambelle de mauvaises pratiques nuisibles à l’accessibilité.
Quand la forme ne doit pas primer sur le fond
C’est comme ça que PagesJaunes s’est retrouvé avec un menu burger non tabulable (c’est à dire non utilisable au clavier), et en plus, avec une seule icône burger en CSS. En gros une balise vide qui n’indique rien. Aïe !
Mais ce n’est pas le seul exemple ! Qui n’a jamais codé un tableau en div ? Utilisé une balise <h3> au lieu d’un <h2> pour des raisons de style CSS ? Ou géré l’ordre des blocs HTML via le CSS (coucou flexbox) ?
Le critère 9.3. du RGAA vérifie ceci :
Dans chaque page web, chaque liste est-elle correctement structurée ?
Quand on se penche sur ce point, on se rend compte que des listes, il y en a partout ! Des listes d’articles, des listes de menus, et dans le cas de PagesJaunes, des listes de résultats de recherches. D’ailleurs, la page qui remonte ces résultats, on l’appelle chez PagesJaunes la “Liste réponse” . Tout est dans le nom… Reste donc à structurer ça avec une belle liste <ul> où chaque réponse est un <li>.
Prendre le temps de réfléchir à son intégration HTML avant de foncer tête baissée dans le CSS, c’est aussi un gage de qualité du code que l’on fournit. D’ailleurs, un des critères du RGAA vérifie que le code HTML est bien valide selon les standards du W3C !
Comment faire perdurer l’accessibilité ?
Après une année de travail, nous avons atteint l’objectif que nous nous étions fixé. PagesJaunes.fr a atteint un taux moyen de 80% d’accessibilité numérique sur ses pages ! Une des craintes des équipes de développement de PagesJaunes était de ne pas conserver ce taux et de le laisser dégringoler au fil du temps.
Tout d’abord par la formation d’un maximum de métiers (développeurs, juristes, product owner, designers…). L’accessibilité est l’affaire de tout le monde. Elle doit être intégrée dans les mentalités pour continuer à vivre.
PagesJaunes possède aussi une chaîne de continuous delivery qui permet de faire des batteries de tests. Ainsi, chaque module doit passer dorénavant le test de validation HTML du W3C avant de pouvoir être mis en production. Les tests vérifient aussi que chaque page possède un plan de titrage sans trou, que chaque lien possède un contenu textuel etc.
L’accessibilité ne peut pas être testée de manière automatisée à 100%, mais cela amène tout de même un filet de sécurité (et qui a déjà fait ses preuves !).
De nouveaux réflexes d’intégration pour une meilleure accessibilité
Tout bon intégrateur a des réflexes, comme vérifier la mise en page de son site en format mobile, tablette et desktop. Je conseille donc dorénavant d’ajouter ces nouveaux réflexes à nos intégrations :
- Prendre le temps de réfléchir à la structure HTML sans se soucier du CSS. Il parait que ça soigne la divite aiguë en plus.
- Naviguer avec la tabulation au clavier au sein de la page pour vérifier que tous les éléments tabulables le sont (et au passage, vérifier que le focus est visible).
- Vérifier que chaque lien possède un contenu pertinent sans le contexte autour.
- Passer la page au validateur HTML.
Finalement, l’accessibilité, tout comme la webperformance, la sécurité, l’éco-conception ou le SEO, sont des moyens destinés à servir les valeurs originelles du web : une source d’informations illimitée, qui doit être accessible pour toutes et tous, partout.
Source : www.solocal.com