Un site Web accessible à tous

Conseils généraux

AnySurfer ( https://www.anysurfer.be/fr ) est un excellent point de départ. Dans la rubrique Documentation , vous trouverez toutes sortes de conseils, répartis dans des catégories portant e.a. sur le contraste, la lisibilité, la navigation et la structure, les (alternatives aux) illustrations, animations, captcha’s… de votre site Web.

Conseil.  AnySurfer peut aussi examiner votre site Web (contre paiement) et attribuer des labels aux sites qui répondent aux directives. Equal.brussels ( https://bit.ly/3okiP2S ) a consacré une brochure intéressante (en PDF) à ce sujet et, pour d’autres conseils pratiques en vue d’améliorer votre site Web, rendez-vous sur les sites uOttawa ( https://bit.ly/3AShXaI ), Graphiste ( https://bit.ly/3gm5i6E ) et Ada Tech School ( https://bit.ly/3gm5p24 ).

Quelles directives ?

Le W3C (World Wide Web Consortium) a défini les Web Content Accessibility Guidelines (WCAG) ( https://bit.ly/3IXDmSO ) sur l’accessibilité du contenu en ligne. Ces directives concrètes ont déjà été élargies à plusieurs reprises afin de s’adapter à l’évolution du contexte. Une nouvelle version 2.2 des normes est d’ailleurs prévue pour juin 2022.

Assez ironiquement, ces directives ne sont guère accessibles. WebAIM ( https://webaim.org/standards/wcag/checklist ) les a heureusement réunies dans une liste de contrôle claire et AnySurfer ( https://bit.ly/3ol05QG ) en a réalisé une traduction française bien pratique.

Conseil.  Si vous tombez sur un site Web qui ne répond pas aux normes, vous pouvez adapter – en un clin d’œil et en temps réel – son apparence et donc son accessibilité à l’aide du plug-in Adapte mon Web ( https://adaptemonweb.fr/product.html ), et changer ainsi e.a. taille et type de police, interligne, contraste, luminosité, synthèse vocale. Vous pouvez également créer un profil d’accessibilité spécifique.

Contraste et couleurs

Pour que les textes soient clairement lisibles sur votre site Web, il faut que le contraste entre la couleur du texte et celle de l’arrière-plan soit suffisamment grand. Le WebAIM Contrast Checker ( https://webaim.org/resources/contrastchecker ) vous indique les meilleures combinaisons pour les polices de grandes et de petites tailles. Autres outils pratiques dans ce cadre : Contrast Checker ( https://www.contrastchecker.com ) et Color Safe ( http://www.colorsafe.co ).

Une autre approche

Vous voulez voir votre site Web comme si vous étiez une personne malvoyante ? Servez-vous de l’extension Chrome SEE ( https://bit.ly/3rwROtI ) ou d’une application mobile comme Chromatic Vision Simulator ( http://asada.website/cvsimulator/e/index.html ). L’extension Chrome Colorblindly ( https://bit.ly/3IU8z9g ) vous aidera à développer un site Web adapté aux daltoniens.

Textes lus à voix haute

Un outil de synthèse vocale comme ReadSpeaker ( https://www.readspeaker.com/fr ) vous permet de faire lire à voix haute les textes de votre site Web pour les malvoyants. Mais quid des illustrations ?

Conseil.  Vous pouvez les rendre accessibles en ajoutant des alternatives textuelles (que ReadSpeaker peut aussi lire à voix haute). Vous le faites via les alt tags dans le code source de votre site. AdResults Alt Tags Checker ( https://adresults.com/tools/alt-tags-checker ) contrôle que des illustrations ne sont pas passées à travers les mailles du filet.