Cette année, Wanadev, représenté par Thibaut, Timotée et Louis, s’est rendu à la Paris Web 2022. Pour cette 17e édition, et comme toujours, on parle d’accessibilité et de qualité, des sujets trop souvent mis de côté. Voici un résumé de ce qu’on y a appris. Accessibilité, écoconception et bonnes pratiques du métier seront les thèmes abordés dans cet article, pour vous faire prendre conscience de leur importance.

Article co-écrit par Louis Gourain et Thibaut Blairon

I - Accessibilité

Durant 30 minutes, Raphaël Yharrassarry, lead UX designer, nous explique les limitations que créent les services numériques. Les problématiques apportées sont multiples. Les outils numériques sont souvent trop complexes et demandent des compétences auxquelles tout le monde n’a pas accès. Environ 28% des personnes s’estiment peu compétentes pour effectuer les démarches en ligne. On retrouve ce problème, par exemple, dans le service public, pour faire une demande de RSA ou de bourse d’étude. On a tendance à oublier la diversité des profils des citoyens, en ne prenant pas en compte leur potentielle difficulté à utiliser les outils numériques: ceci mène à une perte d’autonomie globale.

Raphaël nous montre ensuite ce qu’il est possible de faire pour améliorer ces services. La possibilité de changer de mode de relation (téléphone, mail, etc…) en cours de démarche ou la simplification des termes administratifs dans un français accessible sont des aménagements possibles.

Si on s’intéresse à la partie technique, l’écriture du code HTML est la base d’une page web. C’est ici que sont écrites les informations affichées. Ce code est donc d’une importance capitale. Bien écrit, il peut changer la vie des internautes. Manuel Matuzovich nous réapprend à écrire du bon HTML et à utiliser les bonnes balises pour les bons usages. Inutile de rajouter des balises ARIA quand le HTML n’est pas écrit correctement (lien vide, texte alternatif manquants, …). De même, il est important d’écrire du contenu qui n’est pas visible afin que des informations explicites via des images ou d’autres médias puissent être accessibles via du texte dans le but de les rendre accessible aux lecteurs d’écran. Il nous rappelle aussi que les titres d'une page web ont le même rôle que le sommaire d'un manuel. De manière générale, le design guide un peu trop le contenu HTML. Pour nous présenter les mauvaises pratiques, il nous montre que les boutons sont des cas d’écoles de HTML mal écrit] via le site : https://www.buttoncheatsheet.com/. Le site htmhell est également un bel annuaire de code HTML à éviter.

^ Il y a environ 70% d'erreurs d'accessiblité en plus lorsque les attributs ARIA sont utilisés par rapport à une page qui n'en utilise pas. — Manuel Matuzovich

Pour parler un peu de chiffres, 96.8% des sites ont des problèmes d'accessibilité, d'après WACG. Le site webaim analyse l’accessibilité des 1 000 000 de pages les plus visitées, ce qui correspond en 2022 à 50 829 406 erreurs (50.8 erreurs par page en moyenne), un chiffre en baisse de 1.1% par rapport à l’année précédente. Pour aller plus loin, nous vous conseillons cet article : https://christianheilmann.com/2022/04/12/one-million-broken-web-sites-and-a-way-to-prevent-that

Avant même d’écrire une ligne de code HTML, les interfaces et les mises en page de nos pages web sont réfléchies par des designers. Ce sont eux qui répondent aux besoins clients et qui restituent visuellement la façon dont les utilisateurs vont exploiter le service Malheureusement, la majorité des designers ont tendance à penser que les utilisateurs sont à l’aise avec les outils numériques. Il faut penser aux handicaps, qu’ils soient permanents ou temporaires (connexion limitée, bras dans le plâtre, etc.). Écrire des personae plus inclusifs prenant en compte des handicaps comme la dyslexie, le daltonisme ou même des personnes malvoyantes par exemple, permet d’améliorer les conditions d’utilisation de tous les utilisateurs. On appelle cela l’extrême design. C’est ce que nous explique Romy Duhem-Verdière lors de sa conférence. Un site doit pouvoir être consulté via la vue, l’ouïe ou le toucher, comme si la page web était une partition de musique et comme si chaque utilisateur venait la consulter avec son instrument. On notera que plus l’accessibilité est prise en compte tôt/rapidement, moins sa mise en place sera coûteuse. Pour vous accompagner dans cette phase de conception, il existe un guide avec des règles non exhaustives : https://design-accessible.fr/checklist

II - Ecoconception

L’écoconception consiste à réduire les impacts environnementaux et économiques des services numériques en les rendant le plus efficient possible lors de toutes les étapes de leur cycle de vie. Les services numériques éco-conçus seront par nature plus légers visuellement et techniquement. On nous a présenté le livre Ecoconception Web : les 115 bonnes pratiques. On l’a commandé et commencé à le feuilleter chez Wanadev. On compte l’utiliser comme base pour mettre en place un manifeste interne de règles à suivre sur l’ensemble de nos projets. Florie Bugeaud-Remond nous présente des chiffres: on retient principalement que 80% des impacts environnementaux d’un produit ou d'un service sont déterminés durant sa conception.

Pour parler d'éco-conception en termes techniques, on parle souvent d’HTML. En effet, certains attributs HTML sont très puissants et peuvent faire gagner du temps et du code, si on sait bien les utiliser. Il faut se tenir au courant des évolutions, car il y en a chaque année. C’est un moyen de simplifier et d’homogénéiser les interfaces entre les sites. S'appuyer au maximum sur des langages les plus simples et les moins gourmands comme l'html pour simplifier le code, c'est de cette façon qu’il faut voir l’écoconception technique de nos services.

Toujours dans le cadre de l’écoconception, on parle aussi de l’impact écologique de nos services. En ce sens, il existe le Référentiel général d'écoconception de services numériques (RGESN), mis en place par une équipe de 100 bénévoles dirigée par Denis Didier. Ce référentiel d’état s’inscrit au même niveau que le très connu RGPD ou encore le RGAA pour l’accessibilité. Il regroupe 79 critères classifiés dans plusieurs thématiques: stratégie, spécifications, architecture, UX/UI, contenus, front, backend, hébergement. Ces critères ont été sélectionnés et testés par des professionnels du numérique. Toujours en version bêta, une V1 devrait être publiée en octobre 2022.

III - Bonnes pratiques

L’accessibilité et l’écoconception découlent en grande partie de la mise en place des bonnes pratiques dans nos métiers. Comme nous l’avons vu avec Harmonie, dans sa présentation "Les 10 phrases à ne plus dire à votre DPO", la mise en place de stratégies pour œuvrer à la protection des données personnelles de nos utilisateurs peut aussi contribuer à l’écoconception. En effet, une de ces stratégies est de mettre en place un cycle de vie de la donnée, avec un système d’archivage, qui, de ce fait, limiterait la taille de nos bases de données. C'est une des nombreuses bonnes pratiques qu'on peut retrouver dans les référentiels les plus connus du GreenIT : RGESN, 115 bonnes pratiques du collectif conception numérique responsable et le GR 491 de l'INR. Ces référentiels donnent avant tout des bonnes pratiques du métier qui visent à optimiser nos services numériques.

Techniquement, l'optimisation a lieu dès le HTML, comme le souligne Manuel Matuzović dans sa présentation où il attire notre attention sur le fait qu'écrire du bon HTML n'est pas si facile, comme pourrait le laisser penser sa syntaxe simpliste. "A div is not a button", "No ARIA is better than bad ARIA", quelques phrases marquantes de sa présentation qui nous guident vers le bon HTML.

Pour le CSS, Ahmad, avec sa stratégie "Defensive CSS", nous propose des astuces pour éviter que des contenus (textes, images, etc.) inattendus viennent casser notre design. À nouveau, ces astuces nous amènent vers plus d'accessibilité, en permettant aux utilisateurs d’adapter la présentation à leurs besoins (en augmentant la taille du texte par exemple).

Enfin, dans sa présentation "Découvrez le «bon HTML» et économisez du JS et du CSS", Gaël nous rappelle à son tour que, dans l'arbre de décision d'implémentation d'une fonctionnalité, il faut commencer par le HTML, continuer avec le CSS, puis le JavaScript. On limite le poids de notre application, grâce à cette bonne pratique.

@ Autocomplete: attribut de remplissage auto depuis le navigateur. (Requis WCAG)

Le mot de la fin

Durant ces deux jours de conférences à la Paris Web 2022, nous continuons de prendre conscience de l’impact des métiers du numérique sur la société et sur l'avenir de nos métiers. En tant que professionnels, nous sommes les premiers responsables des services numériques produits.

Pour mettre en place tous ces concepts de développement de service, il est important de se projeter à la place des utilisateurs handicapés, par exemple via des vidéos de témoignages. Concrètement, tous ces sujets demandent beaucoup d’investissements qui ne sont pas toujours en accord avec la réalité professionnelle. Dans un premier temps, il est plus judicieux de s’attaquer à des projets de petites ou moyennes tailles plutôt qu’aux gros chantiers. Il est aussi possible de mettre en place un schéma pluriannuel d’accessibilité, comme celui du gouvernement, afin de mieux déployer l’accessibilité sur le long terme.

Toutes ces pratiques de conception de nos services numériques convergent vers l'écoconception et l'accessibilité de nos produits. La mise en place des bonnes pratiques dans nos métiers nous permet de la rendre disponible au plus grand nombre et d’avoir un impact positif sur le monde.

Et vous, que faites-vous aujourd’hui et que ferez-vous demain pour améliorer le monde des services numériques ?

Chez Wanadev, nous sommes loin d’être irréprochables, mais nous avons à cœur d’améliorer constamment nos pratiques pour rendre nos produits accessibles au plus grand nombre et avoir un impact vertueux sur le monde.

Replay : https://www.paris-web.fr/direct/

Programme : https://www.paris-web.fr/2022/