Utilisation des CSS : rendre un élément en ligne invisible

Utilisation des CSS : rendre invisible un contenu nécessaire aux utilisateurs de lecteurs d’écrans

Voici un très bon article qui nous en apprend beaucoup sur la manière de rendre un élément en ligne invisible grâce aux techniques CSS.

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.

Voir l’article en ligne…

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éralement comme la méthode la plus utile et la plus accessible pour cacher visuellement du contenu.

Lire la suite…