Quelques conseils simples pour rendre un site Web plus accessible

par Jean-Marie D’Amour M.Éd.

L’accessibilité du Web est le résultat d’une conjonction des efforts des utilisateurs ayant une limitation visuelle qui doivent bien maîtriser leurs outils d’adaptation (grossissement, synthèse vocale ou braille) et des développeurs Web qui doivent améliorer leurs connaissances sur les règles d’accessibilité publiées par le W3C et les appliquer.

Lorsque ces deux conditions sont réunies et que les organismes et entreprises qui mettent en ligne leur contenu sur le Web sont sensibilisés à l’importance d’un accès pour les personnes avec des limitations visuelles, auditives, motrices ou cognitives, on peut parler d’un contexte propice à l’amélioration de l’accessibilité du Web.

Les personnes ayant une limitation visuelle se servent généralement d’un logiciel de lecture d’écran pour accéder au contenu des sites Web. Celui-ci comporte deux volets :

• Synthèse vocale ou braille : Le logiciel interprète ce qui est affiché sur l’écran pour le transmettre sous forme de texte sonore, via un logiciel de synthèse vocale (Text To Speech), ou l’afficher sur un écran braille.
• Grossissement : Le logiciel permet à l’usager de grossir le texte affiché à l’écran. Il faut savoir qu’en grossissement, l’utilisateur ne peut voir qu’une portion d’écran à la fois. En 2X, il voit un quart de l’écran seulement; en 3X, il en voit un neuvième; en 4X, un seizième, etc. Il doit donc déplacer sa fenêtre de visualisation dans l’ensemble de l’écran. Le grossissement peut aussi être combiné à la synthèse vocale surtout lorsque le grossissement est plus important et donc la zone de visualisation plus réduite.

Il n’est pas toujours possible de rendre un site Web entièrement accessible à court terme, car cela peut exiger des changements importants ou même une refonte complète. Nous vous proposons donc quelques actions simples pour en améliorer rapidement l’accessibilité et le faire à faible coût.

Comment rendre un site Web plus accessible : 8 cibles

De façon pratique, les experts en accessibilité du Web s’entendent pour dire que lorsque les huit éléments suivants sont correctement programmés au niveau d’un site Internet, il est possible d’atteindre une accessibilité de base pour tous les groupes d’usagers. Les éléments suivants découlent des normes WCAG 2.1 (https://www.w3.org/TR/WCAG21) définies par le consortium du World Wide Web (W3C).

Lorsque les correctifs proposés s’appliquent aux gabarits des pages, ils peuvent être apportés une seule fois tout en s’appliquant à l’ensemble du site. Nous vous suggérons de commencer par ces corrections pour maximiser l’impact de vos efforts.

1. Contrastes de couleurs

S’assurer d’un contraste suffisant à l’aide d’un outil qu’on peut télécharger gratuitement sur Internet (https://developer.paciellogroup.com/resources/contrastanalyser). Il permet de prélever la couleur du texte, puis la couleur de l’arrière-plan. L’outil effectue automatiquement les calculs et retourne la réponse instantanément. Le même outil peut suggérer des couleurs appropriées lors du design d’une page Web : il s’y trouve une zone de liste déroulante qui suggère des couleurs dans le même ton. Les changements apportés aux contrastes de couleurs s’appliquent généralement à l’ensemble du site.

Lorsque l’utilisateur malvoyant circule dans la page Web, il bénéficie d’un contraste suffisant entre le texte et le fond de page qui lui permet de lire tout le texte présent sur la page. Il est important de noter que cela va aussi aider tous les utilisateurs de plus de 40 ans même s’ils ont une vision normale. En effet, passé cet âge la perception des contrastes diminue progressivement.

Selon une l’étude « Changement social pour un Web accessible » portant sur près de 1000 sites Web québécois francophones, il s’agit de l’erreur la plus fréquente.

2. Images avec équivalents textuels

Formuler un équivalent textuel approprié dans le code de la page Web pour chaque image porteuse d’un message et pour toutes les images-liens afin de connaître leur destination. L’exercice prend une moyenne de 2 minutes par page.

Lorsque l’utilisateur non voyant ou malvoyant circule dans la page Web, les images et les liens-images sont ainsi perçus par son logiciel lecteur d’écran, ce qui lui permet d’avoir entièrement accès au contenu et de s’y retrouver. L’absence d’équivalent textuel approprié sur un lien-image a comme résultat que la synthèse vocale, ou l’écran braille, transmet seulement le nom de fichier de l’image, nom qui n’a généralement aucun sens, par exemple « Image001 ».

Ce travail doit être fait sur chaque page, mais nous vous conseillons de commencer par les images incluses dans les gabarits de page afin que ces corrections se répercutent sur l’ensemble du site.

3. Programmation JavaScript compatible avec les lecteurs d’écran

JavaScript est une technologie qui permet de rendre les pages Web plus interactives. Les programmeurs doivent toutefois s’assurer que la programmation JavaScript sera compatible avec les logiciels lecteurs d’écran et doivent donc effectuer des tests pour vérifier que toutes les fonctionnalités sont utilisables avec ce type d’adaptation.

Il arrive trop souvent que des fonctionnalités aient été prévues seulement pour la souris et ne peuvent pas être activées avec un logiciel lecteur d’écran. Par exemple, des menus déroulants dont l’utilisateur ignore la présence et qu’il ne pourra pas parcourir parce qu’il ne peut les ouvrir. Les autres problèmes les plus fréquents concernent les carrousels, les sections accordéons, les panneaux d’onglets et la validation des formulaires.

Lorsque ces éléments interactifs sont bien conçus, l’utilisateur non voyant ou malvoyant peut naviguer sans difficulté sur le site Web et pourra jouir des mêmes fonctionnalités que les autres visiteurs sans incapacités.

Les éléments interactifs se trouvent souvent dans les gabarits de page ou sont des composants réutilisables qu’il suffit de corriger une seule fois.

Pour plus d’information à ce sujet, vous pouvez consulter la section Formation/WAI-ARIA et HTML5  du Laboratoire de promotion de l’accessibilité du Web (https://labo.raamm.org/formation/aria-html5/).

4. Champs de formulaire correctement étiquetés

Établir une relation directe entre le texte de l’étiquette et le contrôle de formulaire dans le code de la page Web. Cette opération prend approximativement 5 minutes par page de formulaire. L’apparence de la page est identique, mais la différence est de taille puisque le formulaire devient soudainement accessible.

Lorsque l’utilisateur non voyant ou malvoyant circule dans les champs de formulaire d’une page Web avec un logiciel de synthèse vocale ou un écran braille, l’étiquette du champ lui est lue automatiquement et il peut se déplacer et choisir les éléments de listes, les cases à cocher et les boutons. Il peut aussi écrire à l’intérieur des zones de saisie.

5. Structure des titres logique

Coder correctement les niveaux d’affichage de texte (Titres 1, Titres 2, etc.). L’exercice prend une moyenne de 5 minutes par page. L’apparence de la page n’en est pas affectée et les titres sont alors reconnus par les logiciels lecteurs d’écran. Ils le seront aussi par les robots indexeurs, ce qui améliorera le classement du site.

Lorsque l’utilisateur non voyant ou malvoyant parcourt la page avec un logiciel lecteur d’écran, il détecte la présence de titres correctement définis au niveau du code qui lui servent de points de repère pour accéder plus facilement au contenu désiré. Si la structure des titres est logiquement hiérarchisée, cela facilitera la compréhension de la structure du contenu.

6. Liens correctement identifiés

Soigner la formulation des liens afin de faciliter la vie à certains groupes d’utilisateurs, mais aussi d’augmenter les chances de référencement du site, puisque les robots indexeurs tiennent compte des mots significatifs qui se trouvent à l’intérieur des liens.

Lorsque l’utilisateur non voyant ou malvoyant circule dans une page Web à l’aide d’un logiciel de synthèse vocale ou d’un écran braille, il peut appeler la liste des liens pour repérer plus rapidement le lien qui l’intéresse. Des liens correctement définis lui permettent de comprendre leur nature au lieu de liens tels que « plus de détails », « cliquer ici » ou « lire la suite », qui perdent toute signification lorsque lus hors contexte dans la liste des liens.

7. Mécanisme d’accès rapide au contenu

Prévoir un lien vers le contenu principal dès le tout début de la page. Cet élément est facile et peu coûteux à mettre en place. Un titre de niveau 1 placé au début du contenu principal est un autre moyen simple de pouvoir y accéder facilement.

Lorsque l’utilisateur n’ayant pas une vision globale de l’écran accède à la page Web, il peut repérer le contenu principal presque instantanément et s’y diriger pour le lire sans avoir à parcourir à chaque fois tous les menus de navigation.

8. Identification de la langue principale de la page

S’assurer d’un code de langue approprié sur chacune des pages Web d’un site Internet : par exemple « FR » au lieu de « EN-US ». Cette opération prend en moyenne moins de 15 secondes.

Si la langue principale n’est pas correctement déclarée, le logiciel de synthèse vocale peut lire le texte affiché en français avec les accents et les intonations de l’anglais, ce qui donne un résultat déconcertant et inintelligible.

L’accessibilité des documents électroniques

Les logiciels lecteurs d’écran permettent de lire plusieurs types de documents électroniques.

• Les documents en format Word sont lisibles, mais peuvent être améliorés en suivant quelques conseils que vous trouverez à la section intitulée Les documents (https://labo.raamm.org/formation/les-documents-electroniques/).
• Les documents en format PDF de type image ne sont aucunement accessibles car il s’agit d’une sorte de photocopie sans reconnaissance du texte.
• Les documents PDF en format texte sont partiellement accessibles, mais il est assez coûteux de les rendre complètement accessibles étant donné le temps requis et le peu de ressources qualifiées pour le faire.
• Les documents en format HTML sont les documents les plus universellement accessibles.