Aller au contenu

Comment rendre un site accessible

L’accessibilité du Web est une combinaison d’applications Web (outils) adaptées et de connaissances de la part des développeurs du Web (ressources humaines). Lorsque ces deux éléments sont présents et que les organismes et entreprises qui mettent en ligne leur contenu à travers le Web sont sensibilisés à l’importance d’un accès pour les personnes avec des déficiences visuelles, auditives, motrices, cognitives, neurologiques ou liées à la parole, 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 revue d’écran pour accéder au contenu des sites Web. Celui-ci comporte deux volets :

  • Synthèse vocale : Le logiciel tente d’identifier et d’interpréter ce qui est affiché sur un écran pour ensuite le retranscrire en un texte sonore, c’est-à-dire un logiciel de TTS (Text To Speech).

  • Grossissement de caractère : Le logiciel de revue d’écran 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.

Comment rendre un site Web accessible : les 10 cibles

De façon pratique, les experts en accessibilité du Web s’entendent pour dire que lorsque les dix é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 dix éléments suivants découlent des normes WCAG 1.0 définies par le consortium du World Wide Web (W3C) :

1. Images avec équivalents textuels

Formuler un équivalent textuel approprié dans le fichier de la page Web pour chaque image-lien significative. L’exercice prend une moyenne de 2 minutes par page.

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

2. Navigation indépendante de JavaScript

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 de revue d’écran et doivent donc effectuer des tests pour vérifier que toutes les fonctionnalités sont utilisables avec ce type d’adaptation.

Ainsi, l’utilisateur non voyant ou malvoyant pourra naviguer sans difficulté sur le site Web et pourra jouir des mêmes fonctionnalités que les autres visiteurs sans incapacités.

3. Contrastes de couleurs

S’assurer d’un contraste suffisant à l’aide d’un outil qu’on peut télécharger gratuitement sur Internet (paciellogroup.com/ressources/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.

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.

4. Textes pouvant être grossis

Utiliser des unités de mesure relatives (en %) au lieu d’unités de mesure rigides (pixels) pour les tailles de caractères. Une feuille de style bien faite permet d’effectuer le changement en quelques secondes. Il est aussi possible d’offrir le choix entre 3 présentations : à 100%, 150% et 200%.

Lorsque l’utilisateur malvoyant ainsi que d’autres groupes d’utilisateurs circulent dans le site Internet, une page qui présente beaucoup de texte en petits caractères et dont la taille d’affichage peut être ajustée à la hausse avec les fonctions du navigateur, devient ainsi entièrement accessible.

5. Titres correctement définis

Prévoir des niveaux d’affichage de texte (Titres 1, Titres 2, etc.) au niveau du code. 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 reconnus par les logiciels de revue 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 de synthèse vocale, il détecte la présence de titres correctement définis au niveau du code qui lui servent de points de repères pour accéder facilement au contenu désiré.

6. Ouverture de nouvelles fenêtres avec avertissement

Prévoir un avertissement lors de l’ouverture d’un lien dans une nouvelle fenêtre « pop-up ».

Lorsque l’utilisateur non voyant ou malvoyant active un lien qui l’intéresse pour en savoir plus, il est averti qu’une nouvelle fenêtre sera ouverte, ce qui lui permet de basculer entre la fenêtre d’origine et la nouvelle fenêtre.

Deux scénarios principaux sont concernés par cet élément :

L’utilisateur navigue avec un logiciel de grossissement et la fenêtre « pop-up » s’est ouverte sans que ce changement soit perceptible dans la zone qu’il peut voir à l’écran.

L’utilisateur navigue avec une synthèse vocale et ne sait pas qu’il doit basculer vers la fenêtre d’origine pour revenir à la page précédente.

7. Champs de formulaire correctement étiquetés

Prévoir 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 4 minutes par page. 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, l’étiquette du champ lui est dictée et il peut se déplacer et écrire à l’intérieur des zones de saisie.

8. Liens correctement définis

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, il parcourt généralement les liens un à la suite de l’autre. 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 offerte par le logiciel de revue d’écran.

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

Prévoir un lien vers le contenu principal présenté dans les premiers liens apparaissant sur le site Web. Cet élément est facile et peu coûteux à mettre en place.

Lorsque l’utilisateur n’ayant pas une vision globale de l’écran accède à la page d’accueil, il peut repérer le contenu presque instantanément et s’y diriger pour le lire. Ceci évite à l’utilisateur de parcourir tous les contenus de l’en-tête et des colonnes avant d’accéder au contenu principal et lui permet de gagner beaucoup de temps.

10. Langue principale déclarée

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.

Lors de sa première visite sur le site, l’utilisateur est conduit à une page où il se fait demander de choisir la langue dans laquelle il veut se faire servir le contenu. Il choisit le français et, effectivement, la page d’accueil est écrite en français. 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 aux utilisateurs de revue d’écran

Les logiciels de revue d’écran permettent la lecture par synthèse vocale et transcription instantanée en braille électronique.

  • Les documents en format Word sont accessibles
  • Les documents en format PDF de type image ne sont aucunement accessibles.
    (Ces documents contiennent du texte, mais le format est comme si l'on prenait une photo)
  • Les documents PDF en format texte sont partiellement accessibles.
  • Les documents en format HTML et en format RTF sont accessibles

Pour en savoir plus : labo.raamm.org