Lecteurs d'écrans et visibilité CSS

Pour illustrer mes propos de vais parler des liens d'évitement que l'on voit souvent en haut des pages Internet. Souvent, ces liens proposent aux utilisateurs d'accéder directement à certaines parties de la page (Aller directement au contenu, Aller directement au menu ...).

Cas particulier des liens d'évitement

Il apparaît que ces liens ne sont pas très utiles aux personnes valides, en revanche, ils sont très utilisés par les personnes souffrantes d'un handicap visuel qui utilisent un lecteur d'écran comme JAWS.

J'ai constaté une erreur assez fréquente chez beaucoup d'intégrateur HTML : attribuer à ces liens des propriétés CSS les rendant invisibles, telles que :

display:none;
visibility:hidden;

Cela rendra les liens d'évitement inaccessibles aux lecteurs d'écran, tout simplement. Le seul moyen de pouvoir s'en servir serait de désactiver la feuille de style, ce qui n'est pas le cas des utilisateurs.

Contrainte graphique

Il est facilement concevable d'imaginer que ces liens ne sont pas intégrés dans la charte graphique, et qu'un client ne souhaite pas visuellement en avoir sur ses pages. Il existe alors un moyen "acceptable" de ne pas s'en priver, grâce à la propriété overflow de CSS .

Imaginons que vos liens d'évitement soient dans un calque identifié par la chaîne "squizze" comme c'est le cas sur ce site :

<div id="squizze">
  <a href="#contenu">Aller au contenu</a>
  <a href="#menu">Aller au menu</a>
</div>

Nous allons tout d'abord attribuer un position absolue au calque, puis le placer en dehors des limites de l'écran, ensuite, pour éviter l'apparition de scrollbars, utiliser la propriété overflow .

div#squizze a
{
  position:absolute;
  top:-10000px;
  overflow:hidden;
}

L'objet et les liens d'évitement seront ainsi toujours accessibles à la tabulation, et aux lecteurs d'écran, ce qui est très important.

Un petit plus

Si un utilisateur valide navigue à la tabulation, il peut être bon que le lien actif apparaisse à l'écran, pour que l'utilisateur sache ou il en est, avec CSS , cela ne fonctionnera pas sur tous les navigateurs, mais c'est une première approche :

div#squizze a:focus
 {
   top:0px;
 }

Vous pouvez appliquer un petit patch pour les utilisateurs d'internet Explorer 6 en Javascript , très honnêtement, je n'ai pas jugé très utile de le faire.

Un petite modification dans le HTML :

<div id="squizze">
  <a href="#contenu" onfocus="show(this);" onblur="hide(this);">Aller au contenu</a>
  <a href="#menu"  onfocus="show(this);" onblur="hide(this);">Aller au menu</a>
</div>

Il faut inclure un petit script :

function show(el)
{
  el.style.top = "0px";
}
function hide(el)
{
  el.style.top = "-10000px";
}

Ainsi, vos liens d'évitement pourront être utilisés !