Plan de site — Navigation
Blog & Blues Techniques et Standards de la Qualité Web

Accueil > weblog

- Lire le billet précédent - Lire le billet suivant -

Utiliser Clip pour masquer du contenu de manière accessible ?

Par Laurent Denis, le 15 août 2004.

Peut-être une piste à suivre : utiliser la propriété CSS clip pour masquer un contenu dans les navigateurs graphiques tout en le laissant accessible aux lecteurs d'écran, offrant ainsi une alternative au display: none / visibility: hidden et à la méthode de Paul Bohman.

En effet, en prenant par exemple le cas des logo placés en titre et gérés par CSS :

h1 span {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
h1 {
width: 200px;
height: 50px;
background-image:url(titre.jpg);
background-repeat:no-repeat;
}

<h1><span>Texte du titre</span></h1>

... permet d'afficher un titre mis en image tout en masquant l'intitulé texte contenu dans le span, puisque clip supprime totalement la zone d'affichage de l'élément lorsque les valeurs respectives de top et bottom, left et right sont égales.

[edit] Note : Le code ci-dessus utilise une double syntaxe pour remédier à un bug apparent d'IE6.0 Win en mode Quirks. En mode Strict, la ligne clip: rect(1px 1px 1px 1px); devrait pouvoir être omise. [/edit]

Le gain éventuel ?

  • Une méthode plus accessible que celle du display:none et du visibility: hidden, lesquels sont en fait interprétés dans un certain nombre de cas par les lecteurs d'écran actuel, et manquent du coup leur objectif. La propriété clip, en revanche, ne semble pas interprétée au moins par Jaws (des tests approfondis seraient évidemment nécessaires) 
  • Une méthode qui permettrait dans un certain nombre de cas de supprimer l'élément span. Bien que celui-ci soit en l'occurence tout à fait légitime, un titre h1 au plus simple serait plus élégant )

La suppression du span n'a qu'un inconvénient mineur : elle oblige à gérer une position absolue appliquée cette fois directement au titre.

Par exemple, appliquée à la feuille de style d'OpenWeb, cette méthode du clip donne apparemment un résultat satisfaisant dans IE6 et IE5.5Win, Firefox, Mozilla et Opera 7.5x, mais échoue dans IE5.0 (Je n'ai pas cherché plus avant à rectifier pour ce dernier).

Le code original pour OpenWeb :

#logo{
margin:4em 0 0 5%;
}

<div id="logo">
   <h1>
      <a href="/"
      title="Retour en page d'accueil">
         <img src="/img/logo.png"
         width="358" height="94"
         alt="OpenWeb, pour les standards du web" />
      </a>
   </h1>
</div>

Le code modifié pour l'utilisation de clip ;

#logo{
margin:4em 0 0 5%;
position: relative;
height: 94px;
}
h1 {
background-image: url(logo0000.png);
background-repeat: no-repeat;
background-position: top left;
padding-left: 358px;
position: absolute;
clip: rect(auto 358px 94px auto);
clip: rect(auto, 358px, 94px, auto);
height: 94px;
}

<div id="logo">
   <h1>
      <a href="/"
       title="Retour en page d'accueil">
       OpenWeb, pour les standards du web
       </a>
   </h1>
</div>

Cette fois, nous ne jouons pas sur un effacement totale de la zone de visibilité :

  • le contenu textuel du titre est déplacé de 358px à droite, c'est à dire la largeur réservée à l'affichage du logo en arrière plan ;
  • la zone de visibilité du titre est rognée pour ne laisser apparaître que les 358px en largeur nécessaire à cette image...

Trackbacks

Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.

Commentaires

Laurent Denis, le 15 août 2004

Adapté là encore très rapidement et sans tests approfondis, le logo en clip semble convenir également à la Fondation Mozilla, y compris cette fois dans IE5.0...

Laurent Denis, le 15 août 2004

Bon un dernier : on peut même se servir du titre en clip pour mettre un titre h1 sous la guêpe de Clément Hardoüin même s'il n'en veut pas...  )

Laurent Denis, le 15 août 2004

Tout de même, ce serait dommage d'oublier de cliper Raphaël Goetter et son Alsacréations.

Francis, le 15 août 2004

Tout ça pour ne pas mettre d'image dans les <h1> ?

Laurent Denis, le 15 août 2004

Eh bien... Oui. Ou plutôt, pour trouver des solutions à proposer en remplacement de la FIR, qui n'est pas une solution satisfaisante pour l'accessibilité.

Cela dit, personnellement, la présence d'une image de logo dans un titre ne me choque pas outre-mesure smiley clin d'oeil

ElMoustiko, le 16 août 2004

J'ai utilisé cette méthode pour faire la redirection d'une veille version d'un site vers la nouvelle, et c'est impecable : elmoustikodesign.free.fr

Par contre, j'ai pas compris pourquoi tu indiquais clip: rect(1px 1px 1px 1px);

C'est non valide CSS d'apres le W3C et sous IE 6 et firefox & co ca fonctionne très bien sans. C'est à cause d'une autre version d'IE ?

@++

Laurent Denis, le 16 août 2004

ElMoustiko, la syntaxe sans virgule est valide CSS2, mais non reconnue par le validateur (CSS2 pouvait être interprétée de deux façons divergentes sur ce point et fait l'objet d'une correction dans CSS2.1).

Voir blog-and-blues.org/weblog...

Pour les virgules, tu nous fais découvrir une petite particularité d'IE60 : la syntaxe avec virgules n'est supportée qu'en mode Quirks (présence du prologue XML dans ta page), mais pas en mode Strict (Supprime ton prologue pour tester) où seul la syntaxe sans virgules est apparemment prise en compte.

[edit] Je mets en ligne le test de ta page sans prologue XML, avec les deux variantes pour le clip... [/edit]

ElMoustiko, le 16 août 2004

Et le prologue, il ne faut pas l'afficher ? Je pensais que si..., donc au final, je dois mettre les 2 écritures, et enlever le problogue xml alors ?

Et comment se fait-il que le validateur ne "valide" pas cette syntaxe, si elle est bel et bien valide ? Non pas que je sois esclave des validateurs (pas vraiment puisque je n'utilise que très peu...) Ca parait etrange...

@++ merci de ces indications

ElMoustiko, le 16 août 2004

Euh, je crois avoir réponse à ma question dans l'article que tu as mis plus haut ! Merci pour les infos, il me faudra corriger pas mal de pages !

HoPHP, le 07 décembre 2004

Y'a un gag...

Sur cette présente page, au passage de la souris sur certaines zones (entrée et sortie de la barre bleue "TrackBack"), le code (en rouge) saute et c'est assez moche. Sur la page test d'ElMoustiko (blog-and-blues.org/test/e... la souris saute au passage sur l'image du bas. Bizarre...

P.S. Je suis sur Firefox 1.0

@++, HoPHP

Laurent Denis, le 07 décembre 2004

@HoPHP > C'est dû dans les deux cas à des bugs des navigateurs Gecko... que j'avoue n'avoir pas encore pris de temps de regarder en détail smiley clin d'oeil

thomas mathey, le 23 juin 2005

He bien, on en découvre tous les jours ! Un grand merci en tout cas pour cette astuce, j'ai comme l'étrnage impression que l'on utilise qu'un 10ième des possibilité de css2 et quand sortira le 3 ?

Philippe Worontzoff, le 24 juin 2005

CSS3 est prévu pour 2007, mais va savoir quand il sera bien intégré aux navigateurs modernes... En tout cas, CSS3 sera une grande évolution !

Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.