Avis, sur ce qui pour moi* n'est pas tant que ça "une fausse querelle":

D'un point de vue éthique, je* trouve que "cacher le texte" en css n'est pas une bonne chose, même si c'est tout à fait valide. C'est pour ça que je préfère largement le <h1><img ... alt="..." /></h1>

Par ailleurs, si** les moteurs de recherche évolue, vu qu'il ont tendance à black-lister les sites qui par exemple mette des mots clez en utilisant la couleur de fond comme couleur du texte, à partir du moment où les moteurs de recherche s'interresserons au CSS, il y a des chanse pour qu'un texte caché en CSS ne soit pas prise en compte voir entraine un black-listage, bien sûr, ce n'est pas pour tout de suite, mais, ça pourrais arriver, et, ce serais même logique, l'attribut alt d'une image n'entraine pas ce risque.

Enfin, mettre une image en "dure" dans le code html me* semble plus propre.


Concernant la méthode du logo clipé, ça fait bien beaucoup de code comparé à <h1><img ... alt="..." /></h1> !

*: Avis purement subjectif.
**: scénario qui pourrais sembler fantastique, mais qui me* semble très plausible.

Gloom, une question toute simple : pourquoi le display:none et l'invisibily:hidden existent-ils ?
Il faudrait cesser de parler "d'éthique"... là où il n'y en a pas
Il y a en revanche des choix personnels, ce qui est tout à fait différent.

Pour les technique de remplacement de titre qui marche tres bien voir
www.mezzoblue.com/tests/r...

Mais ta technique pourrait y etre ajouté

Juste une petite faute en passant dans le premier mot du titre : "mette".

@goetsu > Et il existe encore d'autres variantes que celles recensées par Dave Shea (lesquelles ne "marchent" pas toutes très bien, d'ailleurs, comme celui-ci l'indique dans sa page)...

Mais l'idée, ici, est simplement:

- de ne pas devoir passer par un balisage supplémentaire type <span> vide (méthode de Gilder/Levin) ou <img> transparente (1ere méthode de Radu);

- d'utiliser une propriété spécifiquement faite pour masquer du contenu, et non une marge (2e méthode de Radu) ou un text-indent (méthode de Phark) repoussant le contenu hors de la zone de visualisation...

Ceci uniquement dans un souci d'élégance : les autres techniques sont bien-sûr tout aussi valides.

Dans le même esprit que le top:-xxx, on a text-indent:-xxx

Pas très connu, celui-là.

@Talou > Sais-tu que tu viens d'inventer sur ton site une nouvelle méthode pour cacher du contenu aux navigateurs ? Omettre deux balises </script> dans l'en tête de sa page :D
(C'était involontaire, je suppose)

Talou > text-indent ne fonctionne pas sur les anciens navigateurs comme IE5 par exemple

@Raphael > Le text-indent négatif marche sous IE5.0 et IE5.5, mais à condition de mettre une valeur suffisamment élevée (5000px par exemple)

Très bon article mais est-ce que cette technique fonctionne avec des images transparentes ? (C'est tout mon problème actuellement...)

Faisons un test sommaire (un png avec transparence) :

Si je ne casse pas mon commentaire, avec ça...

[edit]Bon, rien n'est cassé, après un petit rappel à l'ordre de la part de la feuille de style générale de cette page... Le code du test "life" ci-dessus est donc :

<div style="position: relative; height: 100px; background-color: #3b5e8a">
<div style="background-image: url(/images/logocliptransparent.png);
 background-repeat: no-repeat; background-position: top left;
 padding-left: 100px; position: absolute;
 clip: rect(auto 100px 100px auto); clip: rect(auto, 100px, 100px, auto);
 height: 100px;">Test</div>
</div>

[re-edit]: zut, j'avais oublié le hack pour IE... Corrigé.

En revanche, j'ignore si c'est ce que tu avais en tête ?

cela dit quelque soit la technique le probleme indiqué sur la page de mezzoblue avec ou sans span supplémentaire reste présent.

Si on a les css activés mais les images désactivés ont a rien d'afficher

Pardon, mais les css activé et les images désactivées, c'est un peu idiot !

je ne vois pas en quoi c'est idiot je connais même plusieurs personne qui utilise cette config, ex: faible débit de connexions ou certain mal/non voyant

Disons que c'est une configuration qui n'est pas fréquente, mais dont il faut tenir compte.

Une question, à ce propos : Jaws dépendant étroitement d'IE pour la lecture de la page, les alt des images sont-ils lus lorsque l'affichage des images est désactivé ?
(Si ma mémoire est bonne, la réponse est non, et dans ce cas de figure, la solution de l'image directement en HTML n'est pas plus accessible à ce lecteur d'écran que celle des CSS.)

Il y a aussi cette méthode en javascript :
www.quirksmode.org/dom/fi...

@Laurent : merci c'est ce que je voulais savoir, si on voit le "Test" affiché

@goetsu : merci aussi je me suis toujours demandé pourquoi on devait se soucier d'une telle configuration

Pour ce qui est de jaws il n'est pas dependant de IE c'est homepage reader qui est une surcouche d'IE.

Quand au image en dur dans le code jaws lit le code et donc le alt qu'elle soit affiché ou non

La solution donné par raphael que je connaissais dejà est à mon avis la meilleur et un merveilleux exemple que le javascript peut etre utile et accessible quand il est bien codé (lire le dernier article de pompage à ce sujet)

@goetsu > Hum... Jaws est un synthétiseur vocal, qui exploite les données fournies par les applications qu'il supporte. Jaws n'accède pas aux pages Web (ce n'est pas un navigateur). Il exploite le code HTML CSS fourni par le navigateur, c'est à dire IE... Bref, c'est une surcouche.

Pour le javascript... il est accessible... avec le support du javascript

Il est vrai que la technique de PPK citée par Raphaël est prometteuse dans ce cadre, mais elle n'a à ce jour aucun retour sur l'accessibilité...

oui mais jaws marche sur d'autre naviguateur que IE contrairement à homepage reader.

Ce javascript est accessible dans le sens ou lorsqu'il y a le script toute reste accessible et quand il n'y a pas tout reste accessible quand meme (moi j'ai testé avec jaws). Bref il n'apporte que des plus.

Je vais regarder de plus près la solution javascript dans d'autres medias...
Au fond, je ne me défends pas d'un a-priori stupide sur javascript, vieux reste de défense sur la javascript de naguère

Mettre l'image en <img /> est parfois vraiment une bêtise. Exemple : sur mon site la bannière est verte et le texte (en image pour avoir la bonne font) et blanc. Sans css : blanc sur blanc = illisible. Dans ce cas c'est bien plus malin d'avoir l'image en bg et de planquer le texte :p

Plus généralement si l'image ne réprésente qu'une partie du design une fois séparée des autres images de bg la page sans css est réellement affreuse. Accessible mais ultra moche n'est pas une solution super non plus.

@littlesam > L'idée globale est plutôt de ne jamais séparer couleur d'arrière-plan et couleur de texte dans deux sources différentes (ici, une image verte et un texte HTML blanc). De même qu'une CSS doit systématiquement préciser background-color et color, un texte en image doit systématiquement comprendre le texte et son arrière-plan.

Bonjour à tous,
Je me posais cette question et j'aime lorsque c'est simple !
Si j'ai bien compris, globalement :

- Lorsqu'une image détient une valeur informative, il est tout à fait correct de l'insérer en dur dans le code sans oublier de renseigner le alt
- Lorsque l'image est purement décorative, autant la déclarer en background dans le CSS
- S'il s'agit d'une image en background, donner une couleur de fond équivalente à la couleur dominante de l'image pour assurer le contraste avec les couleurs de police.

C'était juste, pour vérification, une reformulation à vocation synthétique ...

Voilà comment je fais pour créer mon titre graphique.

Pour le html :
<h1 id="header"><div id="header"><img src="" alt="Head"/></div></h1>

Pour le css :
h1#header
{
height: 127px ;
margin: 5px 0 0 5px ;
background: url(logo.png) no-repeat ;
}

div#header
{
height: 127px ;
background: url(head.png) no-repeat ;
margin-left: 150px ;
}

div#header img
{
font-size: 0em ;
}

En navigateur graphique l'utilisateur voit le png gràce à la feuille css celui ci est défini en background. Vous remarquerez que j'ai deux images dans mon en-tête, la première est le logo de ma page et est de type background. La deuxième est mon titre, c'est pourquoi je l'ai mise dans une div.

Avec un navigateur qui n'utilise pas la feuille de style, le titre apparait normalement de type h1.

Dites moi ce que vous pensez de cette solution. Est-ce que je me casses la tête pour rien en essayant d'être le plus rigoureux possible en séparant le fond de la forme de cette façon un peu farfelu ?

Je débute en html et en css depuis une semaine, alors n'hésitez pas à ma dire si c'est vraiment pourri comme code. Merci encore de répondre.

"<img src="" alt="Head"/>"

L'attribut "src" ne peut être vide, c'est donc une erreur. De plus, je ne vois vraiment pas l'intéret d'utiliser une balise img vide pour la remplire dans l'élément parent en CSS, ça n'a aucun sens.

Oui l'attribut src est vide, c'est là que réside le principe de cette solution. Je n'utilise pas img pour afficher une image mais bien pour me servir de son alt car je ne connais pas d'autre balise comme img qui possède cette attribut. Si on fait un truc du genre <h1><img src="le chemin vers l'image" alt="titre"><h1> dans le code html, alors lorsque l'on visionne la page sans feuille de style on a tout de même le titre graphique alors que ce que je souhaite obtenir est un titre non graphique.
Avez-vous essayé ce code juste pour voir ce qu'il fait ?
J'aurais bien aimé mettre des screenshot de ce que j'obtient sur mon site, mais celui-ci est en local et je n'ai aucun autre moyen.

Dites moi si je me trompe mais l'on veut bien avoir une page entièrement graphique et la même en nom graphique qui se suffisent à elle-même en ayant pris soin de séparer la forme du fond. Pour moi ce code rempli son rôle même si il possède une erreur, c'est une erreur fonctionnelle

Jonathan Cottier : au moins dans les configurations que j'ai testées, différents navigateurs (Opera, IE) affichent le cadre représentant l'image manquante avec le contenu de l'attribut alt, en surimpression sur l'arrière-plan CSS. Ce qui n'est pas des plus heureux

Le danger des erreurs fonctionnelles, c'est qu'elles rendent très imprévisibles le rendu par les navigateurs, à la différence de ce que les standards Web cherchent justement à fiabiliser.

J'avoue enfin ne pas vraiment voir l'utilité de cette astuce (certes habile) : s'il s'agit de gérer facilement un changement de logo, y compris lié à des styles alternatifs, un simple script serveur s'en chargera aisément. S'il s'agit de placer une image par principe en CSS et non dans le contenu... Pourquoi un logo ne serait-il pas un élément de contenu et non de présentation ? Tout cela me semble de plus en plus devoir être abordé sans aucun souci "philosophique", mais plutôt dans un pur souci d'efficacité : l'image <img...> classique (et non détournée) offre d'indéniables certitudes à cet égard

Philippe > Pour autant que je sache, l'attribut "src" ne peut pas être vide, mais une URL vide fait référence au document en cours. Donc est-ce l'attribut ou l'URL qui est vide ?

Celà dit, il est vrai qu'une image HTML récursive, c'est une idée assez spéciale.

Je suis également à la recherche d'une solution accessible, sémantiquement correcte et élégante pour le remplacement de titre par une image.
Le passage au XHTML 1.1 permet l'utilisation des éléments "ruby".
Selon vous quelquechose du style :
<h1>
<ruby>
<rb></rb>
<rt></rt>
</ruby>
</h1>
peut-il être considéré comme une structure élégante et sémantiquement correcte, et être une bonne piste pour une recherche plus approfondie ?

Bonjour,

l'élément Ruby est destiné à un usage bien précis sans rapport avec le remplacement de texte par une image (il s'agit d'annoter un texte de base, pour faciliter en particulier sa lecture dans le cas d'idéogrammes, et non de fournir une alternative textuelle à une image). Son utilisation dans ce cadre ne me semble absolument pas pertinente

L'élément ruby a en effet cette utilisation (d'après ce que j'ai pu en lire), mais j'ai fait un recoupement avec l'exemple donné sur www.w3.org/TR/2001/REC-ru... où il est utilisé pour définir une date (jour, mois, année, date d'expiration).
Les chiffres sont alors considérés comme des idéogrammes ?

Dans le cas de l'exemple en question, les nombres utilisés pour la date nécessitent d'être explicités pour différencier le quantième du jour et le quantième du mois (par exemple, lu à la française, 10-01-2006 est le 10 janvier, mais lu à la mode nord-américaine, c'est le premier octobre...). Il pourrait donc être approprié d'utiliser une annotation via ruby.

Dans le cas d'un texte mis en image, on ne préciserait pas le sens de l'image : on chercherait à lui donner une alternative textuelle. Or:
- celle-ci existe déjà pour l'élément <img> : c'est l'attribut alt qui est prévu pour être pris en compte par les medias non graphiques.
- rien n'indiquerait en revanche à un outil non graphique que le contenu de l'élément <rb> doit être utilisé comme alternative du contenu de <rt>, c'est à dire le remplacer si nécessaire.

La simple désactivation de la feuille de style masquant <rb> suffirait à provoquer l'affichage redondant de l'image et de son équivalenbt textuel, par exemple. Ce qui ne paraît pas approprié.

Autre exemple : la présence de l'alternative dans un élément ruby aurait-elle la moindre raison d'être exploitée par un robot conforme d'indexation d'images, qui, selon la norme, chercherait des attributs alt, regarderait le contenu visé par l'attribut longdesc, ou s'intéresserait éventuellement au contexte textuel de l'image si celle-ci intervient dans un élément <dfn> par exemple ?

Bien que tes arguments soient tout à fait convainquants (et de là je m'aperçois qu'effectivement l'élément ruby ne peut-être la solution), je pensais à une utilisation différente :
<h1>
<ruby>
<rb>Titre</rb>
<rt></rt>
</ruby>
</h1>
, en spécifiant des dimensions identiques aux éléments <rb> et <rt>, et un recalage de l'élément <rt> (avec en fond l'image) sur l'élément <rb>.
- outil non graphique : le titre est visible;
- sans la css : Le titre est visible;
- outil graphique : le titre est caché.

C'est un peu tordu et on y pert sa sémantique avec un élément vide, ainsi qu'une utilisation douteuse de l'élément ruby... Autant utiliser quelquechose ressemblant à :
<h1>Titre<span></span></h1> --> retour à la case départ.

En ce qui concerne l'élément <dfn> je ne le connaissais pas, et en faisant une recherche sur Google, je suis tombé sur ton article sur le sujet.
Il va me falloir un peu de temps pour le digérer

Mais je pense que la méthode du <span> vide va rester pour moi une solution satisfaisante pour les "productions" prochaines, sans pour autant baisser les bras...

Avant que je ne lise le post "Halte au display:none" (blog.alsacreations.com/20... sur alsacréations, j'utilisais allègrement la méthode du display:none.

Désirant être respectueux de l'accessibilité de mes sites, j'ai commencé par utiliser la méthode suivante décrite par Rémy dans des commentaires à ce post :
<h1>
<img src="mon_image.png" alt="[logo] Ma société" /><span style="display:none">Ma société</span>
</h1>

Je trouve pas ça idiot, mais si on veut appliquer cette méthode aux liens d'un menu par exemple, comme pour toutes les méthodes utilisant une vraie balise <img> pour afficher le logo par exemple, on n'a plus la possibilité d'utiliser la pseudo-classe :hover pour des effets de rollover ni la pseudo-classe :visited...

C'est le problème que je rencontre, pour faire un menu très graphique et c'est à mon avis la seule véritable limite de cette technique qui bien que plus sémantique, rend moins classique (texte barré, couleur différente...) l'effet de :visited pourtant très important en terme d'ergonomie.