L’accessibilité numérique au sein de PagesJaunes

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 L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. . 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 Une webapp (application web) est un logiciel accessible via un navigateur Internet, qui permet aux utilisateurs d'interagir dynamiquement avec du contenu et des fonctionnalités, sans avoir besoin d'installer un programme sur leur appareil. 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 Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. . En gros une balise vide qui n’indique rien. Aïe !

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 Le World Wide Web Consortium (W3C) est une organisation internationale qui développe des standards ouverts pour assurer la croissance à long terme du web, comme HTML, CSS, et XML. !

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 Le Continuous Delivery (CD) est une pratique de développement logiciel où les modifications de code sont automatiquement testées et préparées pour être déployées en production de manière fréquente et rapide, réduisant ainsi le temps de mise en production 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 Le référencement naturel, ou SEO (Search Engine Optimization), est l'ensemble des techniques visant à améliorer la visibilité d'un site web dans les résultats de recherche des moteurs comme Google, sans utiliser de publicité payante. , 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