15 à 20% des internautes auraient un certain niveau de handicap nécessitant une adaptation dans l’accessibilité d’un site web. C’est à dire, pour un site web qui a 1000 visiteurs uniques chaque mois, 150 à 200 personnes ; ce qui n’est pas négligeable !
C’est pour cette raison que, lorsqu’on est développeur freelance, prendre en compte l’accessibilité web est important. Or, rares sont les développeurs sachant adapter leur code à ce type de problématiques, et ce pour plusieurs raisons, comme nous allons le voir.
Alors qu’est-ce que l’accessibilité web exactement ? Comment la tester et l’améliorer ? réponses dans cet article.
L’accessibilité d’un site web, trop souvent mise de côté
Qu’est ce que l’accessibilité web ?
Rendre un site web accessible, c’est permettre à ces 15 à 20 % de personnes d’avoir une utilisation normale (ou presque normale) d’un site web. C’est à dire, pouvoir utiliser toutes les fonctionnalités d’un site correctement, malgré un handicap.
Pour ce faire, un ensemble de normes a été créé, qu’un site web se doit de respecter au mieux pour être accessible aux plus nombreux.
Pour qui ?
Comme on l’a dit, l’accessibilité web se destine aux personnes étant dans l’incapacité de se servir d’un site web comme quelqu’un de 100% valide le ferait.
Cela concerne, entre autres, des handicaps :
- Physiques (mauvaise fonction motrice) ;
- Auditifs (surdité ou mauvaise audition) ;
- Visuels (cécité, daltonisme, myopie, etc.) ;
- Cognitifs – (Dyslexie, autisme, TDAH, etc.).
Mais l’accessibilité web peut aussi concerner les personnes âgées, ne souffrant pas toujours d’un handicap mais n’étant pas habituées aux nouvelles technologies.
Pourquoi ?
Il y a plusieurs raisons qui font que rendre un site web accessible est important.
Déjà, évidemment, pour ne pas se priver du cinquième des utilisateurs souffrant d’un handicap. Pour certains types de sites web ou de services, cela peut être même bien plus que ça.
Mais aussi pour le SEO (Search Engine Optimisation). En effet, certains concepts de SEO se recoupent avec l’accessibilité (notamment au niveau du HTML). Rendre un site web accessible, c’est donc participer à son bon référencement.
Mise de côté
Pourtant, malgré ces avantages, l’accessibilité web est souvent mise de côté. Mais alors pourquoi ?
Déjà car les développeurs sont peu ou pas du tout formés à cette problématique. Avoir une accessibilité « parfaite » demande en effet beaucoup de connaissances et de pratique.
Mais aussi, cela peut être couteux, aussi bien en temps (si on doit former un développeur, et le temps qu’il passe dessus) qu’en argent (ce même développeur ne fera pas de développement fonctionnel ; ou si on demande à un consultant externe de s’occuper de cette accessibilité). Certaines entreprises ne sont pas prêtes à faire cet effort, ce qui, en soi, peut se défendre si leur cible est très bien définie et compte peu ou pas de personnes déficientes (vente d’articles de sports extrêmes, etc.).
Comment tester l’accessibilité de son site web
Il y a plusieurs façons de savoir si l’accessibilité d’un site est adapté aux personnes souffrant de handicap ou non.
Déjà, le test le plus fiable reste le test humain. Faire tester un site web à des personnes âgées, souffrant de problèmes de vue ou cognitifs, par exemple, reste le meilleur moyen de repérer les failles d’accessibilité.
Mais, aussi, il existe des outils en ligne pour s’assurer de l’état d’accessibilité d’un site. Par exemple, on peut utiliser les DevTools fournis par le navigateur Chrome. Bien connu des développeurs, cette boite à outils, dont on parle ici, possède une fonctionnalité un peu moins utilisée : Lighthouse. Lighthouse permet de tester plusieurs éléments d’un site web : performances, SEO et, ce qui nous intéresse, l’accessibilité. Ainsi, après un test, on obtient un score sur 100 et une liste des améliorations possibles.
Il existe évidemment d’autres sites pour rentrer un peu plus dans les détails, comme Contrast Checker par exemple, permettant de vérifier que les couleurs de votre site web sont adaptées aux personnes ayant des problèmes de vue.
Comment améliorer l’accessibilité d’un site web
Maintenant qu’on a défini plus précisément l’accessibilité web et tout ce qui tourne autour, voyons comment, en tant que développeur, on peut l’améliorer.
HTML
La première chose qu’on peut faire pour optimiser un site web au niveau de son accessibilité, c’est d’optimiser son code HTML.
Voici quelques exemples de ce qu’on peut mettre en place dans son code HTML :
- Utiliser les attributs dans les tags HTML (par exemple, l’attribut ‘alt’ pour les images) ;
- Appliquer les bases de WAI-ARIA ;
- Bien structurer sa page HTML : titres, tableaux, paragraphes, etc. Car un outil qui lira le contenu d’un site web (text to speech) prendra en compte le HTML pour faire des pauses dans la lecture (entre les balises <p>, par exemple).
Ce ne sont que des exemples, pour retrouver l’ensemble des règles qui concernent le HTML et l’accessibilité, rendez-vous ici !
CSS
Ensuite, il faut aussi adapter le style CSS. Ici, cela vaut surtout pour les personnes ayant des problèmes de vue.
Voici là encore quelques exemples de règles à appliquer :
- Prendre en compte les contrastes pour rendre un texte lisible (par exemple, éviter du texte rouge sur un fond orange) ;
- Mettre une police d’écriture (font-size) assez grosse, voire donner à l’internaute la possibilité de l’ajuster (comme c’est le cas sur une Kindle par exemple) ;
- Ajuster l’écart entre les lignes et les mots (line-height) pour faciliter la lecture et le passage entre les lignes ;
- Faciliter la compréhension de l’interface, des liens ou des items sélectionnés (via différents styles – le bleu souligné pour des liens, l’item du menu plus foncé si c’est la page courante, etc.).
JavaScript
Si, dans le code, la majorité des améliorations se fait via le HTML et le CSS, JavaScript n’est pas totalement en reste. Par exemple, il faut faire attention à ce que le code HTML généré dynamiquement par JavaScript (que ça soit via un framework type React ou du VanillaJS) respecte bien les consignes déjà citées.
Aussi, en cas de vérifications faites côté front (comme la validation d’un formulaire via des regex), il faudra faire attention à la façon dont les éventuelles erreurs s’affichent (couleur, libellés, emplacement, etc.).
Fonctionnel
D’un point de vue plus générique cette fois, on peut prendre un peu de recul et parler du fonctionnel du site web, que ça soit au niveau de l’UX comme de l’optimisation de son utilisation.
On peut par exemple citer :
- L’ajout de fenêtres de confirmation (par exemple lors de la suppression d’un élément, pour éviter les clics et donc suppressions accidentelles) ;
- Permettre à l’utilisateur de se localiser sur le site, comme avec l’utilisation d’un fil d’ariane ;
- Une intégration réussie d’un design responsive, pour la visualisation sous différentes plateformes (responsive web design) ;
- Définir des actions à l’appui sur les touches tab et entrée, par exemple pour passer d’un champ de formulaire à l’autre, ou permettre de valider un formulaire ;
- Mais aussi améliorer les performances du site pour qu’il se charge plus vite et que l’utilisateur n’ait pas l’impression que rien ne se passe (minifier les images ainsi que fichiers CSS et JavaScript, charger le JavaScript de façon asynchrone, etc.).
Pourquoi s’y mettre dès maintenant
Comme on vient de le voir, il y a toute une liste de changements à effectuer dans un projet web pour rendre un site plus accessibles. Cependant, il ne sont pas tous simples à appliquer, et bien les implémenter prendra du temps et demandera une montée en compétences.
Il est pourtant important de se mettre à l’accessibilité web dès maintenant, et ce pour plusieurs raisons, parmi lesquelles :
- Attirer et retenir plus d’utilisateurs, même si ils ne sont pas notre cible première ;
- Donner également des bénéfices aux utilisateurs valides (couleurs plus agréables, utilisation plus fluide des formulaires, etc.) ;
- Amélioration du SEO (car il y a un certain chevauchement entre les bonnes règles d’accessibilité et d’optimisation SEO, par exemple avec les attributs ‘alt’ des images) ;
- Mais aussi car nous ne sommes pas à l’abri que la loi évolue, et oblige d’ici quelques années les sites web à être plus accessibles aux personnes souffrant de handicap.
J’espère que cet article aura pu vous éclairer un peu sur ce qu’est l’accessibilité web du point de vue d’un développeur, comment l’améliorer et pourquoi !
Avez-vous eu à travailler sur de l’accessibilité web ? Quelles ont été vos difficultés ? Dites-le nous en commentaire !
