Remplacement d'images : halte au display none !

Une image (balise <img>) peut être rendue accessible aux personnes handicapées, notamment en renseignant l'attribut obligatoire "alt" qui constitue alors un texte alternatif.

Une image d'arrière-plan (propriété CSS "background-image") n'a pas cette chance puisque rien n'apparait dans la structure, dans le code HTML. Il faut alors déployer certaines techniques pour qu'un texte de remplacement puisse être exploitable pour certains médias, mais masqués aux navigateurs habituels graphiques.

La technique la plus couramment employée, l'utilisation de la règle CSS "display : none" est, contrairement au but souhaité, complètement inaccessible à certains lecteurs d'écrans...

Le problème

Apparemment logique et pratique, la méthode FIR (Fahrner Image Replacement) applique une règle "display : none" sur le texte de remplacement d'image comme le montre Laurent Denis dans son article nommé "Mettre un titre en image et rester accessible" :

<h1>
    <span>Blog & Blues</span>
</h1>  

h1 {
  background-image:url(/images/logoclip.png);
  background-repeat:no-repeat;
  height:100px;
  }
span {display:none;}

Tout semble parfait : l'image d'arrière-plan est appliquée sur l'élément <h1> et apparaît sur les navigateurs graphiques, tandis que le texte de remplacement, balisé dans un <span> ne devrait apparaître que sur les lecteurs d'écrans ou les navigateurs qui n'interprêtent pas les feuilles de style.

Malheureusement, comme l'explique et l'illustre très bien le site A List Apart, cette technique de remplacement est... parfaitement inaccessible !

Voilà bien le comble puisque le résultat obtenu va à l'inverse de celui escompté.

Quelques éclaircissements

Mais l'explication est simple : le comportement prévu de la propriété "display" est de s'appliquer à tous les rendus, aussi bien visuels qu'auditifs ou contextuels.
En clair, "display : none" ne doit pas se limiter aux médias graphiques, mais concerner tous les médias : l'élément ne doit tout simplement pas être pris en compte du tout.

L'illustration des tests effectués par A List Apart démontrent que plusieurs lecteurs respectent les spécifications à la lettre et ne proposent aucun rendu des éléments affectés d'un "display : none" ou un "visibility : hidden" :

lecteurs écrans et display none

Ce billet n'est pas fait pour évoquer toutes les méthodes de remplacement d'image, avec leurs forces et faiblesses (vous en trouverez un certain nombre ci-dessous), mais se contente de mettre le doigt sur une technique très souvent employée à tort, par méconnaissance.

Webmasters soucieux de l'accessibilité de vos documents, faites attention à ne pas les rendre inaccessibles à force de vouloir trop bien faire !

Résumé général : Ne pas espérer masquer proprement un contenu en utilisant "display : none" ou "visibility : hidden". Ces règles sont parfois interprêtées par les lecteurs d'écran et le contenu sera alors inexistant pour eux, donc tout de même "inaccessible".

Annexe : liste de quelques liens utiles

Par Raphael GOETTER - dimanche 29 janvier 2006 à 15:27

Standards et Accessibilité - #220 - Lu 30953 fois - Intérêt du billet: 2.56(52) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le dimanche 29 janvier 2006 à 16:17, par Jérémie :: site :: #

La question est, est-ce que les navigateurs vocaux sont bogués ? À savoir, si display:none n'est appliqué qu'à l'écran (media=screen), est-ce qu'il continue de ne pas être lu ?

Le dimanche 29 janvier 2006 à 16:27, par Raphael :: site :: #

@Jérémie > Je ne suis pas sûr d'avoir compris la question.
Comme cela est dit : "display" ne *doit pas* s'appliquer uniquement au média screen. L'élément en display none, devrait être complètement ignoré, par tous les lecteurs.

En clair, ceux qui prennent en compte le contenu d'un élément en display none (Jaws par exemple) ne suivent pas les Spécifications.

Le dimanche 29 janvier 2006 à 17:38, par Laurent Denis :: site :: #

Pour les détails sur display et les lecteurs d'écran, voir forum.alsacreations.com/t...

Le dimanche 29 janvier 2006 à 20:53, par clb56 :: #

@Jérémie > Comme leur nom l'indique les lecteurs d'écran (screen en anglais) transcrivent le media screen. Donc leur comportement est tout à fait normal.

Le lundi 30 janvier 2006 à 06:50, par QuentinC :: site :: #

[quote=Jérémy]
En clair, ceux qui prennent en compte le contenu d'un élément en display none (Jaws par exemple) ne suivent pas les Spécifications.
[/quote]

JAWS ne prend justement pas en compte les éléments affectés à display:none ou visibility:hidden.

Le lundi 30 janvier 2006 à 09:28, par Shemu :: site :: #

Merci pour ce billet qui apporte quelques éclaircissements à certaines de mes questions.

Ceci dit, je me pose la question de l'accessibilité de certaines skin de CSSZenGarden. Certaines participations ne sont-elles pas à revoir ?

Le lundi 30 janvier 2006 à 09:28, par Raphael :: site :: #

@QuentinC > Curieux, ce que tu dis irait à l'encontre de l'étude d'A List Apart.
Selon leur conclusion, Jaws lit le contenu, il prend les éléments en compte, malgré le display none.

Le lundi 30 janvier 2006 à 09:46, par Raphael :: site :: #

@Shemu > CSSZenGarden est à prendre comme une cour de récréation, un jeu où le but est de montrer la puissance des CSS.
Les participants ne sont pas obligatoirement très calés en accessibilité et il est vrai que beaucoup abusent du display none.
Les auteurs du Zengarden en sont conscients. Ils en parlent d'ailleurs dans le livre que je te conseille vivement (le Zen des CSS) en expliquant eux-aussi qu'il faut éviter display none et préférer d'autres méthodes.

Le lundi 30 janvier 2006 à 11:29, par Shemu :: site :: #

@Raphael > Je savais bien qu'il fallait que je le demande au Père Nouel ce livre... :(

Le lundi 30 janvier 2006 à 12:40, par Christophe :: site :: #

Excellent ! Visiblement le sujet du matin... car je relisais le post de Blog&Blues justement sur ce propos ;) Post du 19 août 2004 qui est listé parmi les liens utiles de ce billet.

Le lundi 30 janvier 2006 à 14:20, par BPierre :: site :: #

Un lecteur d'écran ne devrait-il pas plutôt utiliser le media "speech" s'il est proposé?
Ca résoudrait ce problème, tout en permettant d'améliorer l'accessibilité en proposant une CSS optimisée pour ces lecteurs (changement de la position du menu par exemple).

Le mardi 31 janvier 2006 à 17:40, par Rémy :: #

J'utilise un palliatif à cette utilisation aussi abusive qu'inadaptée du "display:none;".

Dans le cas d'une image d'en-tête, un logo par exemple, j'utilise un balisage double : l'image ET son complément de description (non pas la description longue, qui est un autre attribut "longdesc").

Exemple d'un logo d'une entreprise fictive "Enterprise":

<h1><img src="logo_enterprise.png" alt="[logo] Enterprise" />
<span> : le leitmotiv de l'entreprise</span></h1>

J'applique un "display:none" uniquement sur le <span> inclus dans le <h1> (et non sur l'image), ce qui laisse le logo (et donc son texte de remplacement) tout à fait accessible.

Cette méthode est accessible aux lecteurs texte/vocaux également, de même qu'aux lecteurs braille.

Bien sûr, et comme BPierre l'a justement fait remarquer, une feuille CSS appliquée aux médias de type "speech" est faisable et probablement préférable.

Le jeudi 2 février 2006 à 07:21, par Nico :: site :: #

Je ne comprends pas le fonctionnement des lecteurs d'écrans : pourquoi ne prennent-ils pas le media speech (ou aural) au lieu de lire une CSS pour le media screen ?

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.