Votre site internet doit être accessible à tous les visiteurs, y compris les visiteurs malvoyants et aveugles.
Lorsqu’on ne s’est jamais intéressé de près à cette question, on se dit tout simplement : « les personnes aveugles ne lisent pas, elles n’utilisent donc pas internet, pourquoi devrais-je prendre du temps pour leur faciliter l’accès à mon site?« .

C’est compréhensible : si vous ne côtoyez aucune personne malvoyante, vous ne pouvez pas tout savoir c’est bien normal. Or, l’accessibilité web pour les visiteurs malvoyants est tout simplement indispensable.
En effet, si vous prenez une minute pour regarder les chiffres :

• La fédération des aveugles de France recense 207000 aveugles et malvoyants profonds : qui distinguent au mieux les silhouettes, sinon aucune lumière et 932000 malvoyants moyens (qui ne peuvent pas distinguer un visage à 4 mètres, et ne peuvent pas lire).
• Au total, 2 millions de personnes sont atteintes d’un trouble de la vision en France! Une partie du public que vous ciblez avec le site web de votre entreprise se trouve forcément dans cette partie des français.
• Les causes de la cécité sont très souvent liées à l’âge et à des pathologies ( DMLA, cataracte, glaucome, rétine pigmentaire, rétinopathie diabétique, etc.)

L’accessibilité de votre site web aux personnes aveugles et malvoyantes est donc indispensable. Pour des raisons commerciales, mais aussi et surtout civiques : vous contribuez ainsi à faire reculer l’exclusion des publics porteurs de handicaps.

Les aides techniques  d’accessibilité web visiteurs pour les visiteurs malvoyants

✅ Les logiciels d’agrandissement.

Ils permettent, vous l’aurez compris, de zoomer sur une partie de l’écran ou d’en agrandir tout le contenu.
Certains retranscrivent vocalement l’information.
Ils ont aussi d’autres options très utiles aux personnes malvoyantes :

• l’amélioration du pointeur de la souris
• l’amélioration des couleurs, et le choix de différentes palettes de couleurs en fonction des besoins
• l’amélioration du curseur texte

Toutes ces options facilitent encore la lecture et diminuent la fatigue oculaire.

Les plus répandus sont SuperNova et ZoomText.

Pour les déficiences visuelles légères, le zoom du navigateur ou de Windows peut être suffisant : Firefox zoome jusqu’à 200% et Chrome 500%. A cette échelle, une caractère en police 11 mesurera déjà plusieurs centimètres.

Mais ZoomText peuvt zoomer jusqu’à 36 fois. A ce niveau, la disposition de la page n’a plus rien à voir avec ce que le développeur a prévu.

Dans la vidéo ci-dessous, une cellule d’un tableau Excel agrandi par SuperNova mesure plus de 20 centimètres.

Peu de développeurs connaissent ces outils, et y pensent lorsqu’ils créent des interfaces.

✅ Les lecteurs d’écran,

qui retranscrivent l’information vocalement, ou en braille.

Les plus courants sont NVDA (opensource et optimisé pour Firefox), JAWS (optimisé pour Internet Explorer) et VoiceOver qui s’utilise avec iOs.

Le logiciel de lecture d’écran est utilisé avec un logicel d’agrandissement, ou seul. Il est également utilisé par les personnes qui ne peuvent pas lire (dyslexiques, dyspraxiques).
Lorsque l’utilisateur n’utilise pas la souris, il navigue à l’intérieur des pages avec son clavier. La touche Tab permet de passer d’élément en élément.

C’est une vue unidimensionnelle, qui ne prend pas en compte l’organisation globale de la page.

Un visiteur valide a une compréhension instantanée de l’organisation du contenu. En un coup d’œil il situe et reconnait des éléments familiers :

• un menu burger
• un header plein écran avec le slogan de l’entreprise
• une liste d’articles sous forme d’images des produits
• des témoignages clients avec leurs photos
• des icône de réseaux sociaux

Comment fonctionne le lecteur d’écran?

Le logiciel commence au tout début de la page, et il lit chaque élément du DOM de manière linéaire lorsque l’utilisateur les parcourt.

Pour une personne non-voyante, une page web est alors une simple liste d’éléments HTML qu’il parcourt jusqu’à trouver celui qu’il cherche.

Le logiciel lit à haute voix (ou retranscrit en braille) chaque nouvel élément textuel qu’il rencontre. Les images, infographies et tableaux n’ont aucun sens pour lui, il ne peut lire que les textes.

Son utilisation demande de retenir de très nombreux raccourcis clavier : pour augmenter la vitesse de lecture, couper la lecture, connaitre la couleur, la police, etc. Sa prise en main demande un temps assez long.

Pour ces dispositifs, les développeurs doivent être vigilants lors de la construction des pages.
Des erreurs ou omissions peuvent rendre l’utilisation de la synthèse vocale tout simplement cauchemardesque, ou faire perdre tout son sens à votre contenu.
Il est aussi courant de se retrouver complètement coincé dans une page.

Exemple : le logiciel Jaws

Dans la vidéo ci-dessous, un utilisateur fait une démonstration de l’utilisation de Jaws. Il se trouve dans une grande confusion lorsqu’il se retrouve confronté à un carrousel. Il sait simplement qu’il se trouve sur le site des restaurants Cheesecake Factory, mais lui n’a qu’une succession de titres qui changent toutes les 5 secondes, et il lui est impossible de savoir où se diriger.

Le lecteur d’écran décrit à l’utilisateur s’il se trouve par exemple dans le <header> ou dans un <p>, et se repère avec la hiérarchie des titres (<h1> à <h6>), mais il peut se perdre dans un code HTML qui utilise des balises « neutres » telles que des <span> et des <div>. Or un carrousel est constitué de <div> et de JavaScript, que le lecteur d’écran ne comprend pas non plus.

(Vous ne pourrez sans doute pas comprendre ce que dit le logiciel dans la vidéo. Les utilisateurs règlent la vitesse de lecture : vous lisez plus vite dans votre tête qu’à voix haute, et le logiciel est fait pour lire à la même vitesse que lorsque vous lisez un article. Même si l’utilisateur a fait l’effort de ralentir le débit au tout début de la vidéo, c’est tout simplement incompréhensible pour une oreille non-exercée).

✅  Les plages braille

Un petit boitier qui affiche en  braille les informations transmises par un logiciel de lecteur d’écran.

Elle utilise le braille informatique, plus précis, qu’elle affiche sous forme de points qui s’activent en relief sur une surface plane.

Ce genre d’appareil coute excessivement cher : entre 5000 et 10000€ pour un produit de bonne qualité, et est parfois financée par les entreprises pour leurs salariés dans les pays développés.

Elle comporte souvent des touches de navigation basiques (espace, entrée, retour arrière)  et un clavier Perkins de 6 touches qui correspondent aux 6 points de la matrice braille.

Tout ces dispositifs sont très performants, mais leur confort d’utilisation dépend vraiment des efforts de conception déployés par les développeurs des sites web sur lesquels ils sont utilisés.

Ils sont entièrement dépendants du DOM et du choix des balises HTML.
Or, les sites sont aujourd’hui conçus pour être esthétiques et interactifs. On s’attache beaucoup au mouvement, à la fluidité, aux images. Nous aimons les onglets, les carrousels, les fenêtres d’alerte. Certains aiment aussi les fenêtres pop-up…

Les développeurs ont une grande responsabilité pour ne pas rendre le web inaccessible à toute une partie de la population. Ils doivent aussi à leurs clients un effort d’accessibilité web pour les visiteurs malvoyants, sans quoi ils les priveraient d’une grande partie de leur public-cible.

Nous verrons plus en profondeur dans l’article suivant tous les problèmes auxquels ils peuvent se trouver confrontés.  Et surtout, comment améliorer l’accessibilité web pour vos visiteurs malvoyantsgrâce aux bonnes pratiques d’accessibilité web.