L'histoire d'un projet accessibilité : HaudaCity

L'accessibilité, vous connaissez ? Nous faisions des sites accessibles ... mais ça c'était avant !

Contexte

Le 24 avril 2018 nous a été soumis un projet pour la refonte du site web de l'association "HaudaCity".

Cette association toulousaine accompagnée par le Parcours ADRESS a mis en place une plateforme numérique collaborative autour du handicap. Elle est destinée aux personnes handicapées mais aussi aux personnes valides qui souhaitent comprendre les handicaps et y apporter un autre regard. Elle vise ainsi à faciliter le quotidien de ces personnes en proposant entre autres un répertoire d’outils complet.

Vu son objet et son public, ce site doit absolument être accessible. Or le site en place souffrait de problèmes d’accessibilité mais plus largement d’ergonomie même pour des personnes dites valides tant sur la partie publique du site que la console d’administration. Cette refonte était l’occasion pour l’association de repenser la structure complète du site en tirant les leçons d’une année d’utilisation et de retours des visiteurs.

Pour Com3elles ce projet est l’occasion d’une nouvelle expérience tournée vers le public handicapé et est une source d’inspiration pour tous nos futurs projets. Rendre la communication éthique et responsable passe aussi par la réalisation d’outils incluant plus de personnes !

Accessibilité, que dit la loi ?

Les institutions publiques doivent respecter la loi handicap du 11 février 2005 tandis que la loi de 2016 pour une république Numérique étend l’obligation d'accessibilité aux organismes délégataire d’une mission de service public.  
Pour les autres structures (privées, association, entreprises) il est obligatoire de respecter la loi lorsque le chiffre d’affaire dépasse un certain montant.
La technologie évolue et il est de plus en plus facile de mettre en place un site accessible, alors pourquoi attendre la mise en application d’une loi pour changer la vision des designers et développeurs quand il est déjà possible de se tourner vers des solutions simples et efficaces.?

Source : access42

Études préalables

En préparation de ce projet, de nombreuses recherches ont été menées au sujet des règles de qualité web et d’accessibilité.

L’une des premières recherches nous a conduit sur le site AcceDe, une référence qui nous a permis de découvrir des outils, des informations pratiques et opérationnelles de la conception graphique à l’intégration, en passant par le développement et le contenu éditorial.

Ce n’est pas une découverte pour nous mais citons-le tout de même, le W3C (World Wide Web Consortium) est un organisme de standardisation qui vise à rendre le web accessible à tous grâce à un ensemble de règles html standardisées.

Le W3C a lancé :

• le WAI (Web Accessibility Initiative) qui vise à simplifier les actions technologiques de développement et d’informations liées à l'accessibilité pour les rendre disponibles et ouvertes à toutes et tous, sans pré-requis techniques.
• le WCAG 2.0 (Web Content Accessibility Guidelines) qui comporte des directives représentées sous forme de thématiques (contenus perceptibles, utilisables compréhensibles, robustes) qui portent essentiellement sur l'accessibilité nous a aussi permis de mieux comprendre les éléments à mettre en place.

Les directives évoquées peuvent être mesurées par trois niveaux allant du niveau A au niveau le plus élevé qui est de AAA. Le niveau A est le niveau minimal à respecter pour lever les barrières obstructives au contenu, c’est “ce qui doit être fait”, tant dis que la meilleure note de AAA donne une vision de “ce qui peut être fait” et améliore le confort lors de la navigation.

Partage et collaboration avec les équipes

Pour rendre ce site accessible, une étude préalable avec l’aide de Pascale Casanova sur les différents types de handicaps a été réalisée et nous a permis de mieux les comprendre, de mieux les appréhender pour apporter des solutions concrètes et adaptées en terme de design et de solutions techniques.

Les handicaps peuvent être d’ordre cognitif, neurologique, physique, visuel ou bien auditif.

Ils peuvent aussi être relatifs à l'âge, à des situation de handicap récurrent, temporaire, persistant ou encore situationnel.

Cette diversité de types de handicaps fait qu’il existe des solutions techniques et des outils eux aussi variés pour utiliser les sites Internet :

• les lecteurs audio pour les handicaps auditifs
• une structure de contenu clair, hiérarchisée et balisée pour les personnes ayant des difficultés de compréhension
• la navigation par clavier (via la touche tabulation) pour les handicapés moteur
• des outils permettant de réduire ou d'agrandir la taille des polices, de maximiser les contrastes, de transcrire certains textes, pour les personnes ayant des difficultés à voir.

Grâce à l’équipe de Haudacity, nous avons pu tester ces outils sur des sites existants dont certains dits accessibles... édifiant !

Le cahier des charges

D’abord un site

Le cahier de charges établi par Pascale Casanova exprimait des besoins “classiques”. A savoir :

• un site responsive
• plusieurs espaces membres avec plusieurs niveaux de modifications
• pouvoir s'inscrire à différents modules et être en mesure d’apporter du contenu simplement, de l’imprimer et de faire des dons.
• il comportait aussi un cadre technique avec des mots clés identifiés et choisis pour améliorer le référencement.

Mais aussi des demandes spécifiques à ce projet :

• respecter les critères d'accessibilité autant pour la partie visible du site que pour la console d’administration tout en s’adaptant à la demande du client
• ne pas se “contenter” d’appliquer des règles issus de référentiels trouvés sur Internet mais “passer” des tests effectués par de vrais personnes en situations de handicaps.
• migrer le contenu de l'ancien site sur un autre CMS Open Source (l’ancien ne convenant pas du tout) tout en respectant la charte graphique de l'association.
• reprendre l’éventail et la diversité des couleurs présentes sur l’ancien site de la plateforme (leur expérience montrait qu’elles permettent une navigation plus simple des utilisateurs en les aidant à se repérer)
• le nouveau site doit aussi être respecter un design de qualité. Accessible aux personnes atteintes de différents types et degrés de handicaps sans négliger l’agrément pour des personnes valides

Inclure TOUS les handicaps

Une solution technique pour un type de handicap n’est pas forcément bonne pour un autre, il nous a donc fallu parfois trouver un juste équilibre, et jongler entre ces dernières.

Il était aussi important de savoir se libérer des normes car des fois elles ne sont pas si bonnes. Par exemple : l’utilisation d’onglets ! Pratique au niveau UX pour mettre plusieurs type d’informations sans charger l’interface. Niveau normes d’accessibilité cela passe bien mais dans la réalité les retours ont été unanimes : trop complexe à gérer, nous avons donc dû revoir notre copie !

Une préversion avec des onglets

La solution retenue, plus simple mais plus accessible

 Un vrai défi comme nous les aimons et un projet réellement enthousiasmant. C’est le plus Com3elles !

Étapes de réalisation

Le choix du CMS

Avant d’entamer la réalisation du site nous avons procédé à une étude comparative concernant le choix d’un CMS adéquat à la mission de ce projet.
Nous avons choisi d’utiliser Joomla! pour sa flexibilité et son intérêt pour le WCAG.

On vous voit venir … “mais bien sûr ! … c’est votre CMS préféré donc vous n’êtes pas objectifs”. C’est pas faux ! (spéciale dédicace à @mnatsian)
Et pourtant oui, nous avons réellement comparé ;-)

Il faut rappeler que Joomla! est le premier CMS à intégrer ces normes dans l’administration. La future version de Joomla 4 vise encore plus haut avec une administration de niveau AA.

Notons également que Joomla! est nativement (sans installer le moindre plugin, widget ou autre extension) le mieux équipé pour réaliser des sites communautaires (droits d’accès, historique, édition en front, …) et lorsqu’il est couplé à un CCK comme Flexicontent, il permet de simplifier les saisies et le workflow pour rendre le site efficace dans la partie publique (front-end) comme privée (back-office).

Le site étant une plateforme de ressources avec des types de fiches différentes et des filtrages de contenus, le CCK s’imposait pour éviter la multiplication des extensions et donc entre autres des logiques d’interface et d’ergonomie.

Tout est pensé nativement dans Flexicontent pour rendre la gestion simple et efficace même pour les personnes atteintes de handicaps. Citons par exemple : l’optimisation des images à la volée, l’inclusion des vidéos automatisée, la mise en page responsive sans code etc...

Le design

Avant de commencer le design, un benchmark autour de l’accessibilité à été effectué pour mieux appréhender la démarche. Le site de l’organisme certificateur en accessibilité “AccessiWeb” nous a particulièrement servi de base pour commencer les recherches en nous appuyant sur les sites “les mieux notés”. De nombreux travaux ont été recensés notamment le site de la fédération des aveugles de France et le site du RIVP qui propose une navigabilité et un choix de couleurs simple ainsi qu’un menu caché de navigation interne navigable au clavier.  

A ce titre il nous a fallu revoir nos processus tels que les mockups, les règles classiques de design pour nous adapter à des problématiques plus terre à terre. Le contraste, la position d’un menu dans la page, le focus, les zones d’accessibilité ARIA etc… Tout mettre de côté pour ré-apprendre !

La reprise et l’adaptation de la charte graphique

Ce projet avait pour base l’ancien site de l’association qui manquait de dynamisme et dont la navigation n’était pas optimale pour les personnes handicapées.
Nous sommes donc partis de la charte graphique déjà établie et nous sommes inspirés des couleurs d'HaudaCity pour en faire plusieurs déclinaisons adaptées aux différents types de handicaps. La charte graphique est sobre, c’est un bon point pour nos objectifs à atteindre !

Les couleurs, un choix pas uniquement esthétique

Différentes problématiques ont pu être remontées au niveau du choix des couleurs qui devaient correspondre aux attentes de Madame Casanova , la cliente, mais aussi aux règles d’accessibilité générales : le contraste doit être suffisant entre le fond et le teste. Pour réaliser au mieux la page d’accueil nous avons intégré les couleurs des rubriques en fond pour aider à la reconnaissance. Ce genre de design n’est peut être pas très “tendance” mais il est en revanche très pratique pour les utilisateurs qui sont, rappelons le, pour la plupart des personnes handicapés.

L’objectif était d’arbitrer entre l'esthétisme d’un côté et l'accessibilité de l’autre qui vise à rendre pratique et intuitive la navigation de ce site internet.

Pré-maquette

Après avoir fait valider notre proposition de menu déroulant auprès de Madame Casanova, nous avons pu appliquer la charte colorée à l'ensemble des rubriques et des sous rubriques, qui a été cette fois-ci adaptée dans le but d’améliorer la navigation et la rendre plus facile pour les handicaps visuels et/ou cognitifs.

L’intégration : les outils et l’ergonomie

Quelques éléments se sont montrés pratiques pour la navigabilité. En voici une liste non exhaustive mais qui permet de comprendre les bases indispensables à la réalisation de ce type de site :

• un menu pour permettre à l’utilisateur handicapé d'aller directement au contenu ou à la page d’accessibilité, lui évitant de perdre du temps sur un contenu qu’il souhaite passer. Ce menu est caché par défaut pour ne pas gêner les visiteurs non-handicapés.
• un “menu haut” présent sur toutes les pages, qui permet une redirection rapide sur les parties essentielles du site, comme par exemple le plan de site qui est indispensable à la bonne navigation des personnes en situation de handicap
• une barre de recherche, une fois de plus présente sur toutes les pages qui assure une aide efficace prouvée dans ce cas de figure
• un fil d’Ariane pour aider à tout moment l'internaute à se repérer
• un menu latéral qui complète le menu principal et qui possède un marqueur de page contrasté pour indiquer le lieu de navigation où se situe l’utilisateur, de préférence à gauche pour que la navigation à 200% et les affichages responsives restent simples et logiques
• une structuration HTML avec un balisage sémantique propre (h1-h5), une définition des zones accessibles aria, des fonctions de description pour tous les boutons et les formulaires.
• la pseudo-classe CSS :focus a été un élément important afin de cibler les éléments concernés à l’aide de la touche tabulation (tab), notamment pour les personnes atteintes d’un handicap moteur. Cette pseudo-classe CSS souvent délaissée dans le design habituel est pourtant vitale. Non content de la remettre au goût du jour nous avons fait des remontées à Cédric Keiflin, le concepteur de Template CreatorCK, pour qu’il y intègre les recommandations d’accessibilité ainsi que d’autres fonctionnalités annexes. Depuis nous l’aidons à faire évoluer ses différents composants comme l’ajout de touches clavier pour les liens de menus dans MaximenuCK

Pour l’interface de gestion (administration) nous avons pu tester Joomla! en situation réelle, et les retours ont été bons dans l’ensemble dès le premier coup ! Nous avons pour habitude d’adapter le panneau d’administration pour les utilisateurs avec des liens directs vers les fonctions essentielles ainsi que des modules de listes de contenus pour facilement trouver les articles à valider, à modifier etc. Pour ce projet c’était d’autant plus important et nous avons travaillé encore plus finement cette interface.

Pour les contributeurs nous avons choisi de construire une administration light depuis la partie publique du site. Avec un simple accès, ils peuvent aisément ajouter des articles et gérer facilement ces derniers, le tout avec une modération de la part de l’équipe d’HaudaCity. En choisissant cette solution nous maîtrisons l’expérience utilisateur en simplifiant les formulaires et en évitant de changer les habitudes des contributeurs.

Les tests d'optimisations techniques

Pour commencer citons AChecker ou le validateur automatique du W3C qui permet d'évaluer la structure HTML d’une page afin de s’assurer qu’elle soit accessible à tous.
Nous avons aussi et surtout utilisé Wave , un outil mesurant l'accessibilité des sites internet qui nous semble plus récent (prise en compte du html5 et des balises ARIA) et plus pertinent. Cet outil permet d’aider les développeurs et donne une vision précise à l’aide de différents icônes signalant les problèmes d'accessibilité, les alertes, les fonctionnalités, les niveaux de contraste ou bien encore les éléments de structure.

Pour ce qui est de l’analyse des contrastes entre la couleur de fond et la couleur de la police d'écriture, nous avons utilisé un outil nommé colour contrast analyser. Cet outil permet de donner une note allant de “A” à “AAA” qui correspond au niveau d’accessibilité et de corriger le niveau de contraste directement afin d’optimiser le rendu et la lisibilité du texte .

Nous avons éliminé toutes les erreurs fatales, réduit les notifications de recommandation d'accessibilité par 4. Nous en avons laissé volontairement car cela pouvait nuire à l'expérience utilisateur classique. Exemple : enlever les liens en double impliquait d’enlever le lien sur l'image et le lien "lire la suite"… moins sympa mais surtout moins pratique ...

Tout au long du projet nous avons eu la chance de travailler avec des personnes souffrant de différents types de handicap qui ont constitué un parfait panel de testeurs. Pour les dernières optimisations, ces utilisateurs ont pu naviguer sur le site et nous renvoyer directement des informations nécessaires et des recommandations techniques.

Quelques retours utilisateurs et débug en cours de production

“Test réalisé avec la dernière version du lecteur d’écran NVDA qui vient de sortir et Firefox version 60.0.2, sur mon PC fixe sous Windows 7.

Ce site qui m’a paru très fluide, me semble globalement bien adapté à la navigation à l’aide d’un lecteur d’écran, car les pages sont bien structurées (utilisation de balises titres, des  régions, de listes d’éléments ...)”

“Certains libellés de champs de formulaire n’apparaissent pas toujours sur ma plage Braille mais sont correctement lus par la synthèse vocale : je ne sais pas te dire si le problème  vient du site ou de ma configuration...”

“Difficultés rencontrées par une personne aveugle utilisant une synthèse vocale, pour supprimer le pop-up de demande d'autorisation des cookies... visiblement il n'est pas aisé de trouver le bouton ok, pouvez-vous vous assurer que c'est bien étiqueté ?​”

Présentation de notre réalisation

La page d’accueil

Une page de catégorie avec système de filtrage multicritères interactif

Un modèle de page unifiée pour un meilleur confort de lecture

Un panneau d’administration avec des accès rapides adaptés

Conclusion

Après avoir étudié le concept d'accessibilité web et avoir eu une vision d'ensemble des différents types de handicaps, nous avons pu appliquer et suivre les différentes recommandations à la plateforme web HaudaCity. C’est en échangeant constamment avec les utilisateurs que nous avons pu implémenter directement de nouvelles solutions sur le site aussi bien au niveau de l’UX design que du webdesign et de la programmation.

Mais au delà des normes, c’est l’expérience humaine qui a été la plus forte et enrichissante. Un grand merci à toute l’équipe de HaudaCity qui nous a aidé à dépasser la documentation stricte pour mieux découvrir un aspect trop délaissé de la conception de site web. Cette expérience acquise est le début, nous l'espérons, de nouvelles collaborations portées vers une communication plus ouverte et plus respectueuse de tous.

De notre côté l’enthousiasme continue car vos humbles serviteurs sont maintenant intégrés dans l’équipe Accessibilité pour Joomla!4 qui vise une norme WCAG AA autant dans la partie publique que dans la partie administration ce qui serait une première mondiale ! Encore un beau projet auquel nous sommes fiers de participer.

Article co-rédigé par

• Baptiste Richard, stagiaire qui a largement contribué au projet et à l’article
• Yannick Bergès, responsable du projet chez Com3Elles
• Céline Robert pour la relecture

 Retrouvez le témoignage de Pascale Casanova