Accessibilité web et handicap : les bonnes pratiques

Creation de site internet

Les visiteurs de votre site internet qui sont malvoyants ou aveugles utilisent des aides techniques pour parcourir vos contenus textuels.

Ces dispositifs parcourent le DOM et se repèrent grâce aux balises HTML.

Il est donc du devoir des développeurs de maitriser l’accessibilité web :

  • bien comprendre le fonctionnement des lecteurs d’écran (ou encore mieux : an avoir déjà utilisé un!)
  • et savoir comment concevoir des sites web optimisés pour leur fonctionnement. Pour que les visiteurs déficients visuels ne se retrouvent pas face à des contenus qu’ils ne pourront pas déchiffrer.

 

Les problèmes d’accessibilité

Pourquoi le lecteur d’écran peut ne pas fonctionner ?

Un logiciel de lecture d’écran parcourt tout le contenu textuel de votre site. L’utilisateur le contrôle au clavier pour se déplacer partout sur la page.
Il utilise les liens et les menus de navigation, et il lit les descriptions des images.

Le pire qui puisse arriver à l’utilisateur est de ne pas savoir où il se trouve et sur quoi il clique. Parce qu’il manque d’informations claires.

  • Une page au titre obscur
  • des liens mystérieux
  • des titres peu clairs
  • une image simplement nommé « img1.jpg »…

Impossible de s’y retrouver lorsqu’on ne comprend absolument pas comment la page est construite et à quoi correspond chaque élément.

Les onglets

posent aussi problème, surtout s’ils ne sont pas décrits de manière très explicite.
L’utilisateur se retrouvera coincé dans un onglet sans le savoir. Et il finira par tout simplement quitter le site.

Les liens qui ouvrent une nouvelle fenêtre

ont le même effet déstabilisant.

D’un seul vous vous retrouvez… ailleurs.
Et pas moyen de revenir en arrière.

Les effets d’animation en JavaScript

sont souvent utilisés pour leur dimension esthétique :

  • les carrousels
  • les fenêtres modales
  • les jolies listes déroulante etc.

Mais le lecteur d’écran ne prend pas forcément pas en charge le JavaScript. Et cette jolie disposition de l’information restera totalement obscure pour votre visiteur malvoyant.

La navigation au clavier est périlleuse

et l’utilisateur se retrouve parfois piégé. C’est ce qu’on appelle un « piège au clavier« !

En navigant avec la touche Tabulation, votre visiteur se retrouve coincé dans une zone de la page sans pouvoir en sortir.

 

 

Problèmes concernant les logiciels d’agrandissement

Les visiteurs malvoyants qui utilisent un logiciel d’agrandissement peuvent profiter en plein écran de chaque petit défaut.
Les problèmes de contraste sont les plus gênants.

Un texte pas assez contrasté ne se détache pas assez du fond et est difficile à déchiffrer.

Les logiciels d’agrandissement ne sont pas tendres avec votre mise en page.

Vous avez passé une heure à choisir vos marges et à hésiter entre 1.4em et 1.5em pour ne pas décaler votre contenu milimetré.

Et voilà qu’un visiteur malvoyant arrive et zoome en X36.
Effectivement dans ces conditions votre mise en page un peu bancale devient complétement anarchique.

Les PDF ne sont d’ailleurs pas toujours utilisable avec les logiciels d’agrandissement, car les lecteurs de PDF ne permettent pas (ou du moins pas automatiquement) de réajuster la taille des lignes au contenu (comme le fait le zoom du navigateur).

Une liste de 10 bonnes pratiques de base

Cette liste n’est pas du tout exhaustive.

Mais c’est en tout cas un bon début. Ce sont des préconisations basiques de la Fédération des aveugles de France.

  • Renseigner clairement la balise title. C’est la première information lue par le logiciel. Mieux vaut éviter de mal commencer…
    Aisni, dès le départ, votre visiteur sait où il se trouve.
    Si votre page s’appelle contact : il sait de quoi on parle.
    Mais si elle n’a pas vraiment de nom, il va devoir aprcourir la page pour le deviner.
  • Utiliser des forts contrastes pour bien différencier le texte du fond. Vous pouvez utiliser l’outil Color Contrast Analyser pour être certain.e de vos choix.
  • Ne pas utiliser uniquement la couleur pour indiquer les informations.
    Vous pourriez penser qu’un bouton rouge et un bouton vert seront bien compris par tout le monde.
    Sauf que si vous ne voyez ni le rouge ni le vert, non, ce ne sera pas clair… DOnc n’oubliez pas d’ajouter un texte très explicite (genre « oui » et « non », ou « accepter » et « refuser »)
  • Structurer le contenu HTML en utilisant à bon escient les balises. Par exemple, ne pas utiliser un <h1> pour afficher une information en plus grand…
    Si un visiteur choisit de parcourir tous les <h1> de la page (par exemple sur un site d’information, pour parcourir els titres), il ou elle risque de s’y perdre.
    Il est important d’être rigoureux.se sur ce point.
  • Utiliser des fichiers CSS séparés, et non la balise des <p>style= »# »</p> qui embrouillent aussi la synthèse vocale.
  • La page doit rester lisible même avec le CSS désactivé.
  • Les textes doivent s’aligner correctement même avec un zoom important. Une sorte de responsive inversé. Les textes ne doivent pas se chevaucher ou se superposer.
  • Pour les images : remplir l’attribut alt pour décrire les images qui sont porteuses de sens. Pas uniquelent des mots clés pour Google.
    Si une image est purement décorative (comme une image de fond), une alternative textuelle vide signalera à la synthèse vocale qu’elle n’a pas d’utilité particulière et qu’elle peut l’ignorer.
  • S’assurer que tout est navigable au clavier, sans piège au clavier, et ne pas supprimer la prise de focus (qui entoure la partie sur laquelle l’utilisateur est arrivé au clavier pour le situer).
    Ne pas utiliser outline: 0 ou outline: transparent pour l’état :focus.
  • Signaler les liens qui s’ouvrent dans une nouvelle fenetre : <a href= »/donner.html » target= »_blank » title « Faire un don (nouvelle fenêtre) »>Faire un don</a>« 
  • Les liens doivent être clairement signalés. Si vous utilisez text-decoration: none, les liens doivent rester clairement identifiables.
  • Les intitulés des liens doivent être explicites. Même si ils sont sur des images, grâce à l’attribut alt.
    Éviter les liens de type « cliquez ici » ou « continuer », qui sont incompréhensible si la synthèse vocale parcourt tous les liens à la suite.
  • Les formulaires : les étiquettes sont primordiales. Retrouvez tous les exemples de bonnes ou mauvaises utilisation des label sur cette page. L’utilisateur doit toujours savoir à quoi correspond un champ, c’est primordial, on ne peut pas se connecter à son compte ou effectuer un paiement si on ne connait pas l’ordre des champs à remplir.
  • Il est possible de laisser des informations accessibles uniquement aux lecteurs d’écran, en créant une classe dédiée, comme le fait le framework Bootstrap avec sa class « sr-only ». (« sr » = screen reader).
    <a href=« … »>En savoir plus<span class=« sr-only »> sur nos offres mobiles</span></a>
  • Etre vigilant aux composants tels que calendriers, carrousels, dropdown menus, modals, etc. Ils doivent être utilisables au clavier, et être compris par les lecteurs d’écran. L’utilisation d’attributs Aria est recommandée.
Pour faire vous-même une sorte de mini-audit de votre site, vous pouvez essayer de naviguer au clavier.

Positionnez votre curseur dans la barre d’adresse, puis parcourez toute la page avec la touche Tabulation. Et essayez de cliquer sur les liens avec la touche « Entrée » pour parcourir d’autres pages.

Ces quelques conseils sont tous assez faciles à mettre en place. La partie la plus compliqué : c’est de ne pas les oublier.

 

Des oublis sont toujours possibles, le plus important étant d’en avoir conscience, et il n’est jamais trop tard pour les corriger.

Vous trouverez encore une fois toutes les normes officielles dans les 141 passionnantes pages du RGAA et des informations plus pratiques dans ce guide à destination des décideurs.

a propos - creation de site internet à dijon

Hello !

Je suis Morgane,

Je crée des sites web audacieux pour les entrepreneures créatives.

ebook créer son site web 1

E-books offerts

4 ressources gratuites
à télécharger

exemple site internet hypnotherapeute

Améliorer son site

en une journée

ebooks offerts

Mes meilleurs conseils pour votre site web

Lequel pourrait vous aider?

ebook créer son site web 1

30 étapes

Créer son site internet soi-même

ebook créer son site web 1

18 conseils

Créer un portfolio de photographe

ebook créer son site web 1

10 astuces

Améliorer son site internet rapidement

Réservez

Une journée VIP

Une journée complète pour travailler sur votre site WordPress

crééer site internet soi même coach

avant de partir

Avez-vous pensé à lire ces articles?

Utiliser les modèles Divi pour créer un site web plus vite

Utiliser les modèles Divi pour créer un site web plus vite

L’un des grands avantages de Divi, c’est son incroyable catalogue de modèles de sites web. Lorsque Divi est installé sur votre site internet Wordpress, vous avez un accès direct à plus de 2000 modèles de pages. Et ces templates Divi sont tous gratuits, sans aucun...