Accessibilité numérique: Pourquoi notre site web a-t-il cette apparence?
Un site web attractif et moderne, mais accessible aux personnes aveugles et malvoyantes - comment faire? Voici les 10 points les plus importants que nous avons pris en compte.
La refonte complète d’un site web volumineux comme celui de la fsa représente beaucoup de travail. Comment intégrer des centaines de pages dans une nouvelle structure? Comment s’assurer qu’aucune information importante ou qu’aucun outil éprouvé ne soit oublié? Mais notre question la plus importante était celle de l’accessibilité pour nos membres: comment faire en sorte que toutes les informations soient trouvées rapidement et de manière fiable, même avec un lecteur d’écran ou un fort agrandissement de l’écran?
Notre site web doit correspondre à la «meilleure pratique» actuelle en matière d’accessibilité pour les personnes aveugles et malvoyantes ou, dans le meilleur des cas, la dépasser, tout en n’offrant pas de restrictions esthétiques ou fonctionnelles aux personnes ayant une bonne vue. Nous avons pris en compte les dix points suivants pour nous rapprocher le plus possible de cet objectif.
1. L'accessibilité commence par un bon concept
Au début d’un site sans barrières, il faut un bon concept: comment créer des chemins aussi courts que possible vers toutes les informations, des «chemins de clics» aussi courts que possible – comment trouver rapidement tout ce que le site web a à offrir? Nous avons opté pour une structure basée sur des thèmes: Le site ne doit pas refléter notre organisation (que de nombreux utilisateurs ne connaissent pas en détail), mais être organisé en groupes thématiques pertinents. Dans toutes nos décisions, nous avons également tenu compte de la directive WCAG (voir liens), qui définit les normes et les «meilleures pratiques» en matière d’accessibilité numérique. Notre objectif était et est toujours de correspondre au classement «AAA», c’est-à-dire à la meilleure pratique, sur au moins 80 % de nos pages. Et bien sûr, sur toutes les autres pages, au moins «AA», c’est-à-dire la norme minimale.
2. WordPress: tout le monde peut contribuer à faire tomber les barrières
Avec WordPress, notre nouveau système de gestion de contenu (CMS) est l’un des plus connus. Il présente plusieurs avantages en termes d’accessibilité: WordPress fonctionne en open source ; chacun peut donc concevoir lui-même des extensions et des designs pour éliminer les barrières. Comme il est très répandu, il existe déjà de nombreuses extensions correspondantes ; si nécessaire, on peut en programmer une soi-même. Et la fsa peut présenter les «meilleures pratiques» pour un site WordPress sans barrières. Nous espérons qu’elle sera ainsi un bon exemple pour les nombreux autres utilisateurs de WordPress.
Cette image a un but décoratif. Normalement, elle n'a pas besoin d'un texte Alt (ici, à cause de cette légende, nous en avons quand même écrit un). / Source d'image: fsa
3. Les images: Alt-Text et bons contrastes
Le texte Alt (abréviation de texte alternatif) rend les images accessibles aux personnes aveugles: les images publiées sont décrites aussi brièvement que possible et aussi longuement que nécessaire. Les lecteurs d’écran lisent cette description à l’endroit où se trouve l’image. Bien qu’il soit si important, le texte Alt manque malheureusement souvent. Nous avons configuré notre backend de manière à ce que le texte Alt soit demandé de manière proéminente pour chaque image publiée. Nous avons finalement renoncé à le rendre obligatoire: Les images décoratives sans contenu informatif peuvent parfois être si importantes pour l’esthétique de la page que nous ne voulions pas y renoncer complètement. Pour ce type d’images, nous laissons tomber le texte Alt, car il n’offre que peu de valeur ajoutée et peut même être gênant.
Le choix des images et des visuels clés est également important pour les personnes malvoyantes: tous les éléments visuels doivent avoir des contrastes suffisamment forts. Les dégradés de couleurs ou les motifs sauvages sont défavorables. Les symboles ou autres illustrations doivent avoir des lignes suffisamment épaisses. Pour vérifier si nous répondons aux exigences des WCAG, nous avons vérifié toutes les décisions visuelles à l’aide du calculateur de contraste (voir liens).
4. La mise en forme: marquer les titres, les boutons, etc.
Les titres, les intertitres ou les énumérations ne sont reconnus comme tels par les lecteurs d’écran que s’ils sont formatés en conséquence. Mettre le texte en gras et en plus grand ne suffit pas. Dans l’esprit de l’accessibilité, nous évitons en outre de manière générale d’utiliser des éléments fortement formatés qui perturbent le flux de lecture par des remarques sur leur formatage. Les tableaux, par exemple, sont presque illisibles avec une liseuse.
De même, les éléments tels que les boutons, les vidéos intégrées ou les pop-ups ne sont souvent pas bien reconnaissables. Ils doivent être signalés comme tels. Lorsque WordPress n’offre pas cette possibilité, les «ARIA-Lables» entrent en jeu. Grâce à ARIA, le code HTML permet d’écrire sur tous les éléments de manière à ce que les lecteurs puissent les reconnaître. Sur notre site, cela est nécessaire par exemple pour les formulaires ou les messages d’erreur.
5. Colonne des liens et des téléchargements: Pas de mots liés dans le corps du texte
Sur la plupart des sites Web, les liens sont intégrés dans le corps du texte au moyen de mots liés – par exemple comme ceci. Pour les personnes aveugles, cela peut être très peu pratique: Après chaque mot lié, le lecteur d’écran ajoute «lien». Si de nombreux mots sont reliés, le texte devient difficilement compréhensible. C’est pourquoi nous rassemblons tous les liens et téléchargements pertinents dans une colonne spécialement prévue à cet effet sur le bord de la page.
6. Bandeau de menu: les lecteurs ne masquent pas le texte.
Celui qui lit une page avec un lecteur d’écran se voit lire au début tous les éléments du menu et ne peut pas ignorer le texte. Il convient d’en tenir compte en particulier pour le «hamburger», les trois traits que l’on voit en haut de nombreux sites Web à la place d’un menu visible. Comme les personnes voyantes peuvent masquer les informations contenues dans le «hamburger», de nombreux points de menu y sont souvent placés. Un menu accessible devrait toujours être concis et clair, même s’il est caché pour les voyants.
7. Navigation dans la page: moins de recherche et de défilement
Les personnes malvoyantes ont souvent fortement zoomé sur l’écran et ne voient que de petites parties d’une page à la fois. Même avec un lecteur d’écran, il n’est pas possible de «survoler» une page. Le plus simple est donc de ne proposer que très peu d’informations par page. Les pages volumineuses sont toutefois plus habituelles et améliorent fortement la clarté du contenu.
Nous avons donc opté pour une navigation dans la page: Si une page contient beaucoup de tuiles et de liens, il y a une deuxième navigation sous le menu principal. Sur celle-ci, on trouve des liens d’ancrage vers les sections les plus importantes de la page. Si l’on clique dessus, l’affichage passe directement à la section correspondante. Ainsi, même avec une liseuse ou un zoom puissant, on accède rapidement à n’importe quel endroit d’une page volumineuse.
La police de caractères choisie pour le nouveau site web s'appelle Atkinson Hyperlegible. Même floue, elle est relativement lisible. / Source d'image: wikipedia.org/wiki/Atkinson_Hyperlegible
8. La police: aussi lisible que possible
Le choix de la police de caractères est particulièrement important pour nos utilisateurs malvoyants. En principe, les polices sans empattement sont préférables, car les empattements sont irritants en cas de zoom important. Les polices dites «humaniste antiqua» sont particulièrement adaptées car elles utilisent des caractères bien distincts, même dans les détails. Notre choix s’est porté sur la police «Atkinson hyperlégible», disponible gratuitement, qui est également recommandée par la fédération allemande des aveugles et des malvoyants.
A cela s’ajoute une mise en page accessible du texte: en cas d’écriture colorée ou d’arrière-plan coloré, il faut des contrastes forts. Même en cas d’inversion des couleurs et en mode sombre, les contrastes doivent être corrects. Le changement automatique de couleur du navigateur peut être modifié à cet effet. Il convient en outre d’éviter les grands espaces blancs dans lesquels on perd l’orientation et le texte doit être le plus linéaire possible – des insertions soudaines dans une autre taille de police ou même un autre sens de défilement sont irritantes.
9. Tout n'est pas nécessaire
On s’attendrait à trouver certaines fonctions sur notre site Web, mais en réalité, elles ne sont pas nécessaires en termes d’accessibilité pour la plupart des personnes aveugles et malvoyantes ou peuvent même les gêner. C’est le cas de la fonction d’agrandissement: les personnes concernées règlent généralement l’agrandissement directement dans le navigateur de la manière qui leur convient le mieux. Elle est alors identique sur tous les sites web visités. Ou alors, elles travaillent avec des outils d’aide au zoom numériques ou analogiques bien réglés. Il en va de même pour la fonction de lecture: tous les systèmes d’exploitation ont leur propre lecteur d’écran et il existe de nombreuses applications et appareils spéciaux à cet effet. Nous avons également renoncé à la possibilité de masquer toutes les images: Au lieu de cela, nous gardons nos images aussi peu gênantes et aussi accessibles que possible.
10. Faire tester et persévérer!
On ne peut jamais penser à tout du premier coup. C’est pourquoi nous avons défini un groupe de test aussi représentatif que possible, qui nous a accompagnés du premier concept jusqu’à la page finale et nous a signalé les éventuelles barrières. Et nous continuons à garder l’esprit ouvert: Les aides changent, les besoins changent – et on peut toujours faire mieux! Nous prenons volontiers en compte les remarques et les besoins de nos utilisateurs. Faites-nous savoir si vous rencontrez des problèmes pour accéder à nos contenus ou si une modification de la page faciliterait votre visite. De préférence en indiquant les outils que vous utilisez. Nous vous remercions de votre soutien.