Bonjour @Raphaelle et l’équipe de Rézosocial.
Je viens ici vous faire mes retours concernant l’accessibilité (a11y) de votre site vitrine.
Votre site est très chargé, avec beaucoup de pages, de composants, d’images, donc il y a beaucoup de choses à dire. Je vois aussi qu’il est fait avec Wordpress et en particulier Elementor, donc je ne sais pas à quel point ce sera facile de faire certaines modifications.
Beaucoup d’aspects du site sont bons : organisation des pages et niveaux de titres notamment.
En revanche, certains aspects sont problématiques d’un point de vue d’a11y :
Images
Le rôle des textes alternatifs des images est souvent mal compris. C’est régulièrement un gros problème pour les sites professionnels. Les modifications proposées dans cette section ont le mérite d’être facilement réalisables sans connaissances techniques, et d’améliorer drastiquement l’expérience des personnes utilisant des technologies d’assistance.
Les images décoratives qui n’apportent pas de sens devraient avoir un texte alternatif (alt) vide. Elles sont là pour aérer et décorer le site pour des personnes voyantes. Mais pour des personnes qui utilisent un lecteur d’écran, elles devraient être rendues invisibles par un alt vide.
Ces images n’apportent pas de sens à la page. Leur donner un texte alternatif n’apporte rien à la personne qui va lire ça, ralentit au contraire leur navigation.
Exemples d’images avec texte alternatif à enlever :
- « deux personnes travaillant ensemble sur un ordinateur »
- « Femme travaillant sur un ordinateur dans un data center »
Logos
Sur le site, de nombreux logos sont présents, que ce soient des clients, ou des partenaires. Dans ce cas, le logo se substitue au nom de la marque.
Le texte alternatif devrait donc être simplement le texte du logo, pour une expérience similaire pour les personnes qui voient bien le logo et celles qui utilisent un lecteur d’écran.
Mais la plupart des logos ont un alt qui commence par « logo », ou n’ont pas de alt du tout.
Exemples de alt actuels et de propositions de remplacement :
- « logo des enfants du canal » → « Les enfants du canal »
- « » → « Reporterre »
- « logo qualiopi » → « Actions de formation via le processus certifié Qualiopi »
- etc.
En définitive, ce serait bien de revoir l’ensemble des images du site et évaluer pour chacune d’entre elle si leur alt est nécessaire / suffisant / pertinent.
Listes
Les listes de logos ne sont pas sémantiquement présentées comme des listes. Elles peuvent être très longues, et pour les personnes qui naviguent au clavier, ça veut dire qu’elles vont devoir passer par chaque logo pour consulter la suite de la page.
Les deux options principales sont de faire directement des <ul> avec des <li> dedans (et éventuellement d’effacer le CSS propre aux <ul> pour ne pas casser sa mise en page), soit d’utiliser les rôles ARIA correspondants.
Autres éléments qui devraient être des listes :
- Page d’accueil :
- 3 cartes « Accompagnons », « le changement », « ensemble »
- Les cartes du sous-titre « Confiez votre informatique à un acteur engagé »
- Peut-être des ensembles de cartes sur des pages qui ne sont pas dans les 3 principales ? Je n’ai pas parcouru l’ensemble des pages du site.
Caroussels
Les caroussels d’images qui défilent ne sont pas accessibles.
Je ne suis pas sûre que ce soit un problème, car ils n’ont pas un rôle sémantique fort.
Noms de liens
Certains liens sont trop génériques pour être compris sans contexte. Quand on navigue au clavier, on saute souvent de lien en lien, sautant les textes et titres qui précèdent les liens. Il faudrait les rendre plus explicites pour pouvoir être compris sans les éléments environnants.
- Dans le footer : « cliquez ici » → « consultez notre politique de cookies »
- Page « Services informatiques », liens “j’ai un projet”. Selon les sections, ce pourrait être :
- “j’ai un projet de maintenance”, “j’ai un besoin de maintenance”
- “j’ai un projet de formation”
- etc
Barre de navigation
La page “services informatiques” dispose d’une seconde barre de navigation (« inventaire/ audit », « infogérance », « Infrastructure », …)
Cette barre devrait également être une liste, et avoir le role de navigation ou être un élément nav.
Voilà pour l’audit d’accessibilité. Ce sont là les principaux problèmes que j’ai rencontrés. Le site est trop étoffé pour que je fasse des retours complets sur du temps bénévole, mais si tout ça est réglé, le site sera déjà beaucoup, beaucoup mieux pratiquable pour les personnes qui utilisent des technologies d’assistance.
N’hésitez pas à nous tenir au courant des avancées et à demander des précisions si quelque chose n’est pas clair.