Introduction

Il y a parfois des cas où le contenu doit être mis à la disposition des utilisateurs de lecteur d’écran mais caché aux personnes voyantes. Dans la plupart des cas, si le contenu (en particulier le contenu qui fournit des fonctionnalités ou de l’interactivité) est suffisamment important pour les utilisateurs de lecteur d’écran, il devrait probablement être mis à la disposition de tous les utilisateurs. Les cas où des informations ou des instructions sont fournies uniquement aux utilisateurs de lecteurs d’écran sont davantage un reflet d’une mauvaise conception et d’une mauvaise accessibilité. Cependant, il existe quelques cas où une information est évidente visuellement mais peut ne pas l’être pour les utilisateurs de lecteurs d’écran. Dans ces cas, il est approprié de coder une instruction à propos de cette information de telle manière qu’elle soit lue par un lecteur d’écran mais invisible aux utilisateurs voyants.

Techniques pour cacher du texte

Il existe plusieurs mécanismes pour cacher du contenu. Il est important qu’une technique mise en œuvre donne le résultat souhaité et qu’elle soit accessible.

visibility: hidden; et/ou display:none;

Ces styles cachent le texte à tous les utilisateurs. Le texte est retiré du flux visuel de la page et est ignoré par les lecteurs d’écran. Ne pas utiliser ce style CSS si vous voulez que le contenu soit lu par un lecteur d’écran. Mais utilisez le si vous voulez que le contenu ne soit pas lu par les lecteurs d’écran.

width:0px;height:0px

Comme ci-dessus, parce qu’un élément sans hauteur, ni la largeur est retiré du flux de la page, la plupart des lecteurs d’écran ignoreront ce contenu. Les attributs HTML width et height avec une valeur à zéro pourraient donc donner le même résultat. Ce n’est pas une approche correcte pour cacher visuellement du contenu, mais cela permet au contenu d’être lu par un lecteur d’écran.

text-indent: -1000px;

Cette approche déplace le contenu de 1000 pixels vers la gauche – en dehors donc de l’écran visible. Les lecteurs d’écran liront toujours le texte avec ce style. Cependant, si un lien ou un élément de formulaire est équipé de ce style, il peut résulter en une indication de focus (les lignes pointillées ou les « fourmis en marche » qui entourent un lien avec le focus) qui s’étendra de l’endroit où l’élément doit être situé dans la page à l’endroit où il est en fait réellement situé (loin à gauche). Ce n’est pas très joli. En tant que tel, il s’agit d’une option correcte si l’élément ne contient pas d’éléments de navigation.

Positionner le contenu hors écran de manière absolue

Utilisez les CSS pour déplacer le contenu caché à une position hors écran est considéré générallement comme la méthode la plus utile et la plus accessible pour cacher visuellement du contenu.

Positionner le contenu hors de l’écran

Les styles suivant sont recommandés pour cacher visuellement du contenu qui sera lu par un lecteur d’écran.

La classe CSS .hidden doit alors être indiquée dans le code de l’élément qui doit être caché de la manière suivante :

Les utilisateurs voyants ne verront pas du tout le contenu caché. Il est en fait affiché hors de leur portée – bien caché à gauche de la fenêtre visible du navigateur. Les utilisateurs de lecteurs d’écran auront accès au contenu comme s’il n’était pas caché. Les lecteurs d’écran liront le contenu normalement, en ignorant complètement les styles utilisés dans cette technique.

Analysons le code en détail.

position:absolute; dit au navigateur de supprimer l’élément du flux de la page et de commencer à le positionner. left:-10000px; déplace le contenu de 10000 pixels à gauche. top:auto; indique au navigateur de positionner verticalement le contenu à la même position où il était à l’origine. L’omission de top pourrait avoir comme conséquence que le style left soit ignoré dans certains cas et dans certains navigateurs. En bref, cette partie du code déplace l’élément de 10000 pixels vers la gauche.

width:1px; height:1px; overflow:hidden; indique au navigateur de donner la taille 1px par 1px à l’élément et de cacher visuellement tout ce qui ne rentre pas dans ces dimensions. Il existe quelques cas où le positionnement (à gauche) peut ne pas fonctionner alors que tous les autres styles restent activés. Dans ce cas, l’élément reste dans sa position initiale et prendra une taille de 1 pixel.

Conclusion

Quand les techniques CSS présentées ici sont utilisées pour masquer le contenu, les utilisateurs voyants ne sauront jamais que le contenu est présent (à moins qu’ils ne désactivent les styles). Les utilisateurs de lecteurs d’écran, d’autre part, ne pourront jamais se rendre compte que ce contenu est invisible pour les utilisateurs voyants. Ces deux types d’utilisateurs seront en mesure d’utiliser le contenu de manière intuitive sans qu’une modification du code ne soit nécessaire. Cela peut fournir des indications contextuelles importantes, impossibles à saisir autrement pour les utilisateurs de lecteur d’écran du fait de leur nature visuelle. Lorsqu’elle est utilisée judicieusement, cette technique peut résoudre certains problèmes entre les exigences de l’accessibilité et les exigences de la mise en forme visuelle des pages Web. Ce n’est pas la seule technique ou le seul moyen pour résoudre ce problème, mais c’est une des solutions que les développeurs Web peuvent utiliser en cas de besoin.