L'attribut title, les éléments hidden et les textes en image de fond

Bonjour à tous.

La question que je vais poser n'a actuellement pour moi aucune application pratique, c'est donc purement "pour ma culture" que je la pose. Un sorte d'investissement dans le temps si on veut.

Bon, j'ai lu sur ce forum que, si une image fait partie du contenu, il fallait l'intégrer dans le code HTML. Certains sites que j'ai pu réaliser durant mon stage précédent sont totalement à contrepied de cette affirmation. Titres de sections ou éléments de menus en image se retrouvent en background par CSS, avec le texte en visibility: hidden.

J'ai essayé de pallier l'éventuel problème d'accessibilité engendré par cette pratique en ajoutant un attribut title aux éléments qui subissaient ce traitement. Est-ce efficace ou parfaitement inutile ?

J'ai déjà une vague idée pour deux cas :
1. Feuille de style désactivée.
Dans ce cas, pas de problème, mon visibility: hidden n'est pas interprêté, on voit bien le contenu textuel de l'élément.

2. Images bloquées (pour une raison X ou Y).
Là, c'est un peu plus problématique. Au survol de la zone où il devrait y avoir quelque chose, le navigateur affiche une infobulle qui contient la même chose que le contenu textuel caché. Mais encore faut-il savoir qu'il y a quelque chose à survoler !

Quid des navigateurs non graphiques ? (w3m, Lynx...) Des lecteurs d'écran ? Comment interprètent-ils et / ou rendent ils l'attribut title ?

J'étais le premier à défendre les standards et l'accessibilité sur le Web dans l'entreprise où j'effectuais mon stage, mais la contrainte des délais et la volonté d'impressionner le client de la part de mes supérieurs m'ont poussé bien souvent à mettre mes convictions au placard.

Le rendu visuel et la rapidité de livraison étaient privilégiés à la conformité aux normes du W3C et parfois (souvent ?) à la structuration sémantique de la page (usage de tableaux à outrance, jusqu'à plus soif).

Salut,

Il y a beaucoup, beaucoup de chose dans ton message.

bon sur le title :

Sam_Lam a écrit :

Là, c'est un peu plus problématique. Au survol de la zone où il devrait y avoir quelque chose, le navigateur affiche une infobulle qui contient la même chose que le contenu textuel caché. Mais encore faut-il savoir qu'il y a quelque chose à survoler !

Quid des navigateurs non graphiques ? (w3m, Lynx...) Des lecteurs d'écran ? Comment interprètent-ils et / ou rendent ils l'attribut title ?

Il me semble bien que le premier point très délicat de l'attribut title concernant l'accessibilité, c'est que cette fonctionalité est inopérante en navigation clavier.

Par ailleurs ton "Mais encore faut-il savoir qu'il y a quelque chose à survoler !" est très juste.

Concernant les lecteurs d'écran deux choses :
. Je crois que title n'est pris en compte que pour certains éléments : <a>, <lablel>, <acronym> (pas sur pour ce dernier)

de plus si l'élément en question est caché par visibility:hidden; alors jaws notamment interprête celà comme un display:none; (c'est un bug). Et dans ce cas j'ai des doutes sur le fait qu'un de ses attributs puisse être encore interprété.
Modifié par clb56 (06 Dec 2006 - 17:25)

Sur la pertinence des choix :

Sam_Lam a écrit :

Bon, j'ai lu sur ce forum que, si une image fait partie du contenu, il fallait l'intégrer dans le code HTML. Certains sites que j'ai pu réaliser durant mon stage précédent sont totalement à contrepied de cette affirmation. Titres de sections ou éléments de menus en image se retrouvent en background par CSS, avec le texte en visibility: hidden.

Sur ce point il y a vraiment deux aspects à prendre en compte et il vaut mieux ne pas mélager les deux.

1. Pertinence du choix en fonction du sens
2. problèmes liés à l'accessibilité

1.
prenons les cas qui fait beaucoup débat ces temps ci.

Soit un document avec deux images

. Le logo de ma compagnie

. Une photo de toute la petite famille d'Artie (un champs d'artichaut donc).

De manière totalement évidente la 2ème photo fait partie du contenu. C'est tellement évident qu'on pourrait la précédé d'un titre <hn> par exemple qui ouvrirait la section où elle se trouve ainsi qu'un texte en relation directe avec elle.

Pour le logo c'est beaucoup moins évident et on imaginerait mal par exemple avoir ceci :

<hn>Mon logo</hn>
<p>
<img src="" alt="Nom de ma compagnie" />
</p>

Avec donc un <hn> annonçant le logo.

Je pense qu'on peut donc dire que les deux images n'ont pas le même statut.

Est ce une hérésie que d'utiliser un logo de la manière décrite ci dessus ?

Non pas du tout

Pourquoi ?

Parce qu'en terme de contenu ce qui est visé est bien obtenu et ce contenu c'est la présence de la marque de mon identité.

Avec l'image du logo c'est bon et si on désactive les images alors c'est bon aussi, pour autant que le alt soit bien renseigné ="Nom de ma compagnie" ou mieux ="Nom et slogan de ma compagnie".


Le fait de ne pas utiliser la balise <img> est il lui une hérésie ?

Non pas du tout

pourquoi ?

Parce que en terme de contenu avoir :

<p>Nom et slogan de ma compagnie</p>

suffit pour atteindre ce qui est visé : la présence d'une marque de mon identité dans le document

Et celà je peux le styler et le mettre en valeur de la manière que je veux, jusque et y avec un logo, et jusqu'au point d'essayer de substituer complètement, avec habileté , ledit logo au texte.

Cela ne pose pas problème rien n'est perdu, ni en terme de sens ni en terme de contenu.

Voilà...

...

...

Sauf qu'il y a aussi cette petite histoire de l'accessibilité. Et là ça se complique grave mortel !
Modifié par clb56 (06 Dec 2006 - 18:20)

a écrit :
Il me semble bien que le premier point très délicat de l'attribut title concernant l'accessibilité, c'est que cette fonctionalité est inopérante en navigation clavier.

Très juste. Encore un gros moins à cette approche.

a écrit :
Par ailleurs ton "Mais encore faut-il savoir qu'il y a quelque chose à survoler !" est très juste.

Cela m'avait paru évident. Cela dit, un grand espace vide peut-mettre la puce à l'oreille. Il n'en reste pas moins qu'on perd beaucoup en ergonomie et en facilité d'accès à l'information.

a écrit :
Je crois que title n'est pris en compte que pour certains éléments : <a>, <lablel>, <acronym> (pas sur pour ce dernier)

En l'occurrence, c'est sur des <hn> et des <a> que j'ai utilisés ces artifices. Il me semble également qu'il est pris en compte pour la balise <img>, en tout cas par FireFox et IE, IE se rabattant sur l'attribut alt si l'attribut title est absent. Je pense que cet attribut a également sa place sur une image "de titre" incluse dans le HTML, tout autant que l'attribut alt, même si cela peut paraître redondant.

Par exemple <img src="logo.gif" alt="Logo de MonSite.com" title="MonSite.com : tout ce que vous avez toujours voulu savoir sur moi" />

a écrit :
de plus si l'élément en question est caché par visibility:hidden; alors jaws notamment interprête celà comme un display:none; (c'est un bug).

Je sais que c'est sale (du bon vieux quick & dirty comme on en voit trop), mais le contenu texte est inclus dans un <span>, lui-même inclus dans le <a> ou le <hn> concerné.

En gros, ça donne :

<ul>
  <li>
    <a href="rubrique1" id="menuItem1" title="Titre rubrique 1"><span class="hidden">Titre rubrique 1</span></a>
  </li>
  <li>
    <a href="rubrique2" id="menuItem2" title="Titre rubrique 2"><span class="hidden">Titre rubrique 2</span></a>
  </li>
  <li>
    <a href="rubrique3" id="menuItem3" title="Titre rubrique 3"><span class="hidden">Titre rubrique 3</span></a>
  </li>
<ul>

<h1 id="titreHome" title="Bienvenue sur MonSite.com">
  <span class="hidden">Bienvenue sur MonSite.com</span>
</h1>

EDIT :
D'après ce document sur le remplacement par des images, il n'est pas malvenu d'utiliser l'attribut title pour restituer le contenu d'un élément que l'on remplace par une image via CSS.

Mais, tout bien considéré, la meilleure solution, en termes de sémantique, semble être de laisser l'image dans le flux HTML, avec l'attribut alt, et éventuellement l'attribut title, convenablement renseigné(s).
Modifié par Sam_Lam (07 Dec 2006 - 10:46)

Par acquit de conscience, je suis allé voir le site en question sans CSS avec image, puis avec CSS sans image, puis sans CSS ni images.

Dans le premier cas, tout est clair, on garde un structure à peu près logique, les éléments du menu et titres rendus par des images retrouvent leur équivalent textuel. Tout va bien.

Dans le second cas, c'est plus problématique. Les images dans le flux HTML sont rendues par leur attribut alt, mais les menus et titres remplacés par des images laissent un grand vide. Les liens des menus sont toujours sélectionables au clavier et leur attribut title permet de déceler leur présence à la souris, mais les titres sont bel et bien perdus.

Dans le troisième cas, joie et bonheur, on retrouve toutes nos informations. Moralité, si, pour une raison ou pour une autre, les images ne peuvent être chargées, autant désactiver la CSS... si le navigateur le permet.

D'ailleurs, je viens de découvrir que lorsqu'on bloque les images pour un site particulier dans les options de FireFox 2.0, l'attribut alt n'est plus rendu, tandis que si on bloque toutes les images, il est bien présent... Curieux...

Sam_Lam a écrit :
Cela m'avait paru évident. Cela dit, un grand espace vide peut-mettre la puce à l'oreille. Il n'en reste pas moins qu'on perd beaucoup en ergonomie et en facilité d'accès à l'information.

Une solution partielle, si l'image de fond utilisée ne contient pas de zones transparentes, est de spécifier une couleur avec un fort contraste par rapport au reste de la page. Par exemple :

#nav span {position: absolute; left: 0; top: -999px; width: 1px; height: 1px; overflow: hidden;}
#nav a {display: block; width: 200px; height: 200px; background: [b]red[/b] url(navigation.jpg);}

Eldebaran a écrit :
Une solution partielle, si l'image de fond utilisée ne contient pas de zones transparentes, est de spécifier une couleur avec un fort contraste par rapport au reste de la page.

Pourquoi une solution partielle ?
La solution a été donnée sur ce forum !
http://forum.alsacreations.com/topic-6-13599-1-Accessibilit-dun-menu-en-image.html#p106746

Personnellement je l'utilise sur mon site et c'est tip top.

Si quelqu'un pouvait m'expliquer où est le probème... Le vrai

clb56 a écrit :
Pourquoi une solution partielle ?
La solution a été donnée sur ce forum !
http://forum.alsacreations.com/topic-6-13599-1-Accessibilit-dun-menu-en-image.html#p106746

Oui, mais ça suppose que ton conteneur soit positionné de façon relative, non ?
Modifié par Eldebaran (09 Dec 2006 - 14:36)

Eldebaran a écrit :
Oui, mais ça suppose que ton conteneur soit positionné de façon relative, non ?

En quoi est ce un problème s'il n'y a pas de valeurs de position associèes ?

C'est même une technique assez courante dans d'autres contextes. Positionnement en absolute d'éléments par rapport à leur conteneur parent et non body notamment.
Modifié par clb56 (09 Dec 2006 - 14:45)

clb56 a écrit :
En quoi est ce un problème ?

Je suis loin d'être un pro en positionnement, mais dans le cas d'un menu structuré avec une liste (<ul>) dont les éléments (<li>) sont flottants (float: left;), est-ce que cette méthode est applicable ?

<edit>Tricheur, tu as édité ton message.

Et donc, dans le cas que je décris, vois-tu une solution ?</edit>
Modifié par Eldebaran (09 Dec 2006 - 14:46)

Eldebaran a écrit :
Je suis loin d'être un pro en positionnement, mais dans le cas d'un menu structuré avec une liste (<ul>) dont les éléments (<li>) sont flottants (float: left;), est-ce que cette méthode est applicable ?

<edit>Tricheur, tu as édité ton message.

Et donc, dans le cas que je décris, vois-tu une solution ?</edit>

Je n'ai pas triché j'ai précisé parce que le 1er message était trop succinct (forcément puisque c'est le seul moyen d'écrire aussi vite que toi )

Que je sache ce que tu présente ne pose pas de problèmes (pas testé). Mais quand bien même il n'y aurait rien de plus que le constat :
Que se passe t'il quand des circonstance viennent fichent en l'air une technique efficace.

Ben c'est le bordel AMHA !!!

Mais ce n'est en rien une raison pour zapper complètement le fait qu'une technique efficace existe. Si besoin est on s'arrête, on réfléchit, on travaille, et si possible on trouve une solution.

C'est toujours mieux que de l'évitement du sujet au nom d'un pseudo argument sémantique aussi massif que fallacieux.

Na, c'est pas du tout contre toi mais il fallait que ça sorte parce que ça commence vraiment à m'échauffer tout ça.

En attendant faite craquer mon code à moi. Ou bien expliquez moi le scandale sémantique auquel je me suis livré.

Zut, encore un week end de gaché.
Modifié par clb56 (09 Dec 2006 - 15:00)

clb56 a écrit :
Je n'ai pas triché j'ai précisé parce que le 1er message était trop succinct (forcément puisque c'est le seul moyen d'écrire aussi vite que toi )

Arf...

clb56 a écrit :
Que je sache ce que tu présente ne pose pas de problèmes (pas testé).

Argh, en effet, j'avoue que je n'ai pas testé (sisi, j'ai honte). J'étais persuadé que ce n'était pas possible, je le ferai donc aujourd'hui, promis.

clb56 a écrit :
C'est toujours mieux que de l'évitement du sujet au nom d'un pseudo argument sémantique aussi massif que fallacieux.

Je ne me souviens pas avoir évoqué cet argument. Je suis parfaitement d'accord sur le fait que l'accessibilité justifie parfaitement cette option.

clb56 a écrit :
Zut, encore un week end de gaché.

Il t'en faut peu.

Est-ce que quand ta boulangère fait la gueule le lundi matin, ça gâche ta semaine ?

Eldebaran a écrit :

Est-ce que quand ta boulangère fait la gueule le lundi matin, ça gâche ta semaine ?

Ma boulangère ne me fait jamais la gueule...


... Elle m'adore ...

Oui, en effet, j'ai été très con, on peut quasiment toujours s'en sortir avec cette méthode (sauf peut-être quand l'image de fond a des zones transparentes).

Par contre, sur ton site, clb56, je n'ai pas l'image de fond sur ta bannnière avec IE6.

Autre problème : Le alt="" de l'image transparente occulte le titre du lien avec IE.