Maîtriser l'accessibilité web !
« On a des développeurs frontend de classe S, du markup impeccable, et on design même l'interface de nos outils marketing, alors l'accessibilité, ce sera du gâteau ! » Avec une telle confiance, le projet web accessible de Liberogic a commencé… mais s'est avéré être le début d'une bataille épique. Ayant fixé l'objectif ambitieux de la conformité complète WCAG 2.2, nous nous sommes engagés dans des années de formations continues et de débats sans fin. Pour être honnête, nous avons pris conscience de l'ampleur réelle du défi.
En y repensant, lors des premières formations en accessibilité du projet, il y a quelques années.
« Quelle est la différence entre WCAG et JIS X 8341-3:2016 ? »
« WCAG 2.0 et JIS X 8341-3:2016 sont identiques ! »
Un long chemin a commencé par cet échange élémentaire.
« Je comprends bien ce critère de cette façon ? »
« Non, celui-ci relève de cet autre critère. »
Après d'innombrables cycles de débat et de correction, nous avons enfin pu mettre en place une organisation capable de viser la conformité WCAG 2.2 niveau AA.
Refondre notre propre site web !
« Notre site web ne correspond plus vraiment à notre activité… »
C'est parti d'une simple remarque pour mener à la refonte de notre site.
« Tant qu'on y est, misons tout sur l'accessibilité, le SEO et tout ce qui compte ! »
Nos excellents collaborateurs, malgré leurs agendas chargés, se sont (probablement) lancés avec enthousiasme dans ce projet.
« Ce contraste de couleur ne respecte pas les normes ! »
« Mais le design est joli pourtant… »
« Peut-on l'ajuster dans le respect des règles ? »
Et ainsi de suite, nous avons tâtonné entre design et accessibilité.
Au niveau du markup, nous avons méticuleusement coché tous les éléments d'une liste de vérification exigeante.
Enfin terminé !
Bien que considérablement en retard sur le calendrier initial, nous avons ressenti une solide confiance dans les progrès techniques réalisés.
Score parfait avec Lighthouse ! Et excellente évaluation sur PageSpeed Insights aussi !
Notre site construit avec Astro + microCMS + Cloudflare obtient naturellement de excellents scores sur Lighthouse. L'accessibilité est bien sûr impeccable ! L'outil d'audit d'accessibilité de Lighthouse utilise la bibliothèque axe-core très fiable, ce qui signifie que nos efforts de conformité WCAG sont évalués de manière assez directe.
Concernant les performances, avec de nombreuses images et plusieurs animations, nous avons d'abord stagné un peu. Mais en optimisant le chargement des Web fonts, en révisant la compression et le format des images, et en ajustant les priorités de chargement des ressources, grâce à des ajustements méticieux, ce moment est enfin arrivé !
＼ Score parfait ! ／
Tous les éléments de Lighthouse sur la version desktop sont au score maximal ! Et la rumeur était vraie. « Ah ! Quand on obtient 100 sur tous les éléments de Lighthouse, Google affiche des feux d'artifice célébration ! »
« Sérieusement !? Notre ancien site atteignait à peine 80-90 points ! C'est sûrement grâce à Astro aussi, mais c'est incroyable ! »
Afficher la transcription vidéo (en japonais)
（lighthouseでスコア100点を記録した時の花火の様子）
Nous avons également obtenu 100 points sur PageSpeed Insights, l'outil de mesure des performances des sites web fourni par Google.
Simplement, PageSpeed Insights n'offre pas d'effets spéciaux (feux d'artifice). Comme nous avons eu des situations où l'un affichait 99 et l'autre 100, nous demandons à Google d'ajouter quelque animation festive de ce côté aussi. 🎇
À titre informatif, les scores de Lighthouse et PageSpeed Insights varient en fonction des conditions réseau, de l'état du serveur et de la situation du navigateur au moment de la mesure, donc même si nous avons atteint 100 points, nous devons être conscients que ce score ne peut pas toujours être maintenu.
Obtenir un score de performance parfait sur mobile, c'est mission impossible, non ? …Voilà à quoi ça ressemble. (↑ Pas de capture à l'époque, donc c'est une capture relativement récente)
Le vrai but se situe au-delà du score
« Non, mais en réalité, d'un point de vue utilisateur, n'est-ce pas le résultat évident ? »
Plutôt que de poursuivre le score, je crois que c'est en mettant l'accent sur la conception pour tous ceux qui utilisent réellement le site web que nous obtenons la meilleure évaluation. « Un score de 100 » n'est qu'une étape. Le vrai but, c'est de créer un site web confortable et facile à utiliser pour tout le monde !!
Actuellement, nous implémentons diverses fonctionnalités expérimentales pour vérifier la faisabilité opérationnelle, et le score Lighthouse a baissé depuis. Je crie innocemment « pourquoi, pourquoi… ? » à répétition, mais bien sûr, pour tout le monde, la vérification de la faisabilité opérationnelle est bien plus importante que mes caprices.
Et c'est ainsi que notre exploration inépuisable se poursuit.
Président tout en restant un homologue constant. Il aime comprendre les nouvelles technologies, ressent de la joie à l'instant où quelque chose devient pratique, et est un véritable passionné du terrain. Il s'enthousiasme pour les technologies futures et souhaite continuer à explorer de nouvelles expériences, quel que soit son âge.
Morimoto
Chef de projet / Directeur / Fondateur en 2007