Mettre un titre en image: le retour

Question

Pages :

Benjamin D.C.

9 Dec 2006 à 18:08

(reprise du message précédent)

AbsolutV a écrit :
Pourquoi ne pas mettre en place une solution javascript ?

Nous en avons effectivement discuté il n'y a pas longtemps je ne sais plus trop dans quel fil suite à la proposition d'un code de ce genre:


[#black][b]XHTML[/b][/#]

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

	<title>Tests : mettre des titres en images</title>
	<script type="text/javascript" src="scripts/firdom.js"></script>

</head>

<body>

<h1>À propos</h1>

<p>
Lorem ipsum dolor…
</p>

<h3>Téléchargements</h3>

<p>
Lorem ipsum dolor sit amet…
</p>

<h5>Contacts</h5>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing…
</p>

</body>
</html>


[#black][b]JS[/b][/#]

/*	firdom() version 1.1 (24.11.2003)
	written by Chris Heilmann (http://www.onlinetools.org)
---------------------------------------------------------------------------*/

replaceImages = new Array(
   
/* Liste des titres et des images correspondantes
---------------------------------------------------------------------------*/
   
'À propos|images/apropos.png',
'Téléchargements|images/downloads.png',
'Contacts|images/contacts.png'

);

/* Fonction de remplacement des titres
---------------------------------------------------------------------------*/

function firdom(){
	if(document.getElementsByTagName && document.createElement){
		for (var l=1;l<=6;l++){
			var h1s=document.getElementsByTagName('h'+l);
			scanandreplace(h1s,'h'+l);
		}
	}
}
function scanandreplace(h1s,tag){
	for(var i=0;i<h1s.length;i++){
		for(var f=0;f<replaceImages.length;f++){
			var chunks=replaceImages[f].split('|');
			var thish1=document.getElementsByTagName(tag)[ i];
			if(thish1.firstChild.nodeValue==chunks[0]){
				var newImg=document.createElement('img');			
				newImg.setAttribute('alt',chunks[0])
				newImg.setAttribute('src',chunks[1])
				// or newImg.src=chunks[1];
				thish1.replaceChild(newImg,thish1.firstChild)
				break;
			}
		}
	}
}
window.onload=firdom;

Modifié par Benjamin D.C. (16 Oct 2007 - 22:40)

Julien Royer

9 Dec 2006 à 18:43

Benjamin D.C. a écrit :
Oui, je suis assez d'accord, nous en avons d'ailleurs discuté il n'y a pas longtemps je ne sais plus trop dans quel fil suite à la mise en ligne d'un exemple utilisant cette méthode.

Je vais me répéter, mais je ne vois pas ce que cette solution apporte. Elle remplace le texte par des éléments img. Autant les mettre directement dans le HTML !

Benjamin D.C.

9 Dec 2006 à 18:46

Eldebaran a écrit :
Je vais me répéter, mais je ne vois pas ce que cette solution apporte.

Ben déjà le fait de pouvoir présenter tes titres correctement même si les images ne sont pas chargées parce que la balise alt, c'est bien, mais pouvoir appliquer à ton titre un vrai style en css, c'est quand même mieux Smiley cligne

Julien Royer

9 Dec 2006 à 19:00

Benjamin D.C. a écrit :
Ben déjà le fait de pouvoir présenter tes titres correctement même si les images ne sont pas chargées parce que la balise alt, c'est bien, mais pouvoir appliquer à ton titre un vrai style en css, c'est quand même mieux

Euh... Non.

Tu peux très bien appliquer des styles au texte alternatif :

[b]HTML[/b]
<h1><img src="titre.jpg" alt="Titre" /></h1>

[b]CSS[/b]
h1 {color: red;}

Tout ce que ce script fait, c'est rendre les images inaccessibles à ceux pour qui JavaScript est désactivé (et accessoirement, rendre la page plus lourde, provoquer un clignotement puisque le changement se fait quand la page est chargée...).

Si quelqu'un n'a pas accès aux images mais à JavaScript, le résultat est exactement le même qu'avec les images en dur dans le HTML.

Cette méthode est un leurre...

De toute façon, le problème dont on parle ici ne se pose pas quand tu peux te permettre de mettre l'image en dur dans le HTML.
Modifié par Eldebaran (09 Dec 2006 - 19:01)

Benjamin D.C.

9 Dec 2006 à 19:41

Eldebaran a écrit :
Euh... Non.

Tu peux très bien appliquer des styles au texte alternatif :
[b]HTML[/b]
<h1><img src="titre.jpg" alt="Titre" /></h1>

[b]CSS[/b]
h1 {color: red;}

Oui c'est sûr, c'est juste que Safari par exemple ne s'en sort pas du tout lorsqu'il ne trouve pas l'image (il n'affiche juste rien en fait).

Mais sinon, je confirme une fois de plus que la solution de l'image du titre insérée directement en dur reste la plus solide (sans jeux de mots stupides Smiley ravi

).

AbsolutV

9 Dec 2006 à 22:23

Je serais assez d'accord avec l'utilisation de l'image dans le cadre par exemple de l'insertion d'un logo. Mais dans le contenu de la page, la balise h1 sert à définir un titre textuel.
Dans le cas de l'utilisation d'une image comme titre, un balisage comme celui-ci suffirait :

<img src="titre.jpg" alt="Titre" />

avec eventuellement une classe pour le ciblage css.
Le fait d'encadrer l'image dans un élément h1 ne fait qu'ajouter un sens sémantique à un élément "non prévu" pour cette utilisation (élément img).
De plus lorsque l'on change la feuille de style (par exemple css "haut contraste"), il est bon d'obtenir le résultat attendu, c'est à dire un changement radical de mise en forme (y compris pour les titres).
Pour avoir un aperçu de ce que cela peut donner, il suffit d'utiliser par exemple les feuilles de styles intégrées à Opéra.

Dernier point, et pas des moindres, si tu utilises une image "en dur", il n'y a plus sépraration du contenu et de la mise en forme, ce qui va a l'encontre d'un des principes fondamentaux de l'intégration xhtml/css.

Julien Royer

9 Dec 2006 à 22:56

AbsolutV : Ce sujet a déjà été débattu.

AbsolutV

10 Dec 2006 à 00:11

oui effectivement pardon, je n'avais pas fait de recherche préalable. Smiley confused

jpv

10 Dec 2006 à 02:24

bonjour,

Je me permet de réintervenir dans ce fil :

a écrit :
la balise h1 sert à définir un titre textuel

Rien ne dit du point de vue de la spécification Html que le contenu d'une balise hx doit être textuel...

a écrit :
Dans le cas de l'utilisation d'une image comme titre, un balisage comme celui-ci suffirait :

<img src="titre.jpg" alt="Titre" />

avec eventuellement une classe pour le ciblage css.

Non, surtout pas, une image balancée toute seule n'est pas un titre, un titre c'est ce qui est dans un élément hx et rien d'autre.

a écrit :
Dernier point, et pas des moindres, si tu utilises une image "en dur", il n'y a plus sépraration du contenu et de la mise en forme, ce qui va a l'encontre d'un des principes fondamentaux de l'intégration xhtml/css.

Bien que ce sujet ai déjà été débattu, (en passant je ne vois pas le problème d'y revenir aussi souvent que nécessaire... Smiley cligne

) :

Il ne faut pas tout confondre : Bien sur l'utilisation d'image pour véhiculer du texte ce n'est pas l'idéal et c'est à éviter chaque fois que l'on peut faire l'équivalent en CSS.

Mais, si le projet graphique impose des titres ombrés ou l'utilisation d'une police exotique par exemple, il n'y à, pour le moment, aucune autre solution viable que de le faire en image.

Rien, absolument rien, aucun concept de rien du tout, ne m'interdis de le faire, sauf à rendre l'accessibilité définitivement rhédibitoire !

La seule chose que l'on peut faire c'est, éventuellement, de prévoir d'utiliser la taille de caractère la plus importante possible, relativement au design, afin de limiter la gêne pour ceux qui auraient besoin d'agrandir les polices.

Car, malheureusement, parmis les innombrables imperfections des navigateurs, les tailles de caractères des infobulles ne sont pas agrandies...

Donc, ne croyez surtout pas, qu'il faille interdire le recours à des images pour des titres.
En limiter l'usage au seul cas où je n'ai pas de solutions en CSS oui, mille fois oui, l'interdire non, mille fois non.

Maintenant il faut le faire bien...

Utiliser des textes cachés et des images diffusées en CSS ça peut être intéressant mais ce n'est pas une "obligation".

Une image qui contient du texte ce n'est pas la "mise en forme" d'un texte, avant toute chose c'est une "image" qui à le même statut et le même rôle que l'image d'un produit ou d'un logo.

Elle doit être traitée de la même manière, il n'y à aucune différence.

Et pour être sur que je n'ai pas balancé du contenu dans CSS, il y à un moyen simple et radical :

Regardez votre page avec les styles CSS désactivés, sur un navigateur texte ou écoutez là en utilisant un lecteur d'écran.

Il vous manque quelque chose : vous avez oublié du contenu.

Simple non ?

Jean-pierre
Modifié par jpv (10 Dec 2006 - 02:35)

AbsolutV

10 Dec 2006 à 12:13

Je vais approrter alors quelques précisions :

a écrit :
Rien ne dit du point de vue de la spécification Html que le contenu d'une balise hx doit être textuel...

en fait c'est effectivement plus une interprétation de ma part : si l'élément h1 était prévu pour afficher autre chose que du texte (sans y ajouter un élément h1), l'attribut src serait autorisé : <h1 src="mon_titre" /> par exemple.

a écrit :
Non, surtout pas, une image balancée toute seule n'est pas un titre, un titre c'est ce qui est dans un élément hx et rien d'autre.

je suis d'accord, img n'a rien a voir sémantiquement avec un h1, je voulais dire que sans l'encadrer d'un h1, on ne peut définir une image en tant que titre, et on en revient à ma première remarque...

a écrit :

Mais, si le projet graphique impose des titres ombrés ou l'utilisation d'une police exotique par exemple, il n'y à, pour le moment, aucune autre solution viable que de le faire en image.

La méthode siFR permet d'obtenir ce genre de choses, et je la considère à l'heure actuelle comme une méthode viable, mais je suis prêt à changer d'avis si l'on m'apporte les arguments Smiley cligne

En fait ma vision des choses est un peu extremiste, je l'avoue mais c'est le choix que j'ai fait pour m'éviter de faire trop de gymnastique lors de la mise en place d'un site accessible (revoir ses méthodes qui ne permettent pas de passer le niveau AA, autant avoir la "bonne méthode" d'entrée).

a écrit :
Une image qui contient du texte ce n'est pas la "mise en forme" d'un texte

Par contre là, je ne suis pas tout a fait d'accord : une image sert à apporter un coté visuel. Si on n'avait pas besoin de police exotique et d'ombrage, l'image n'aurait pas lieu d'être, non ?

Thomas D.

10 Dec 2006 à 16:31

Salut.

AbsolutV a écrit :
si l'élément h1 était prévu pour afficher autre chose que du texte (sans y ajouter un élément h1), l'attribut src serait autorisé : <h1 src="mon_titre" /> par exemple.

Non, l'image et le titre sont à 2 niveaux différents.

Le "titre", c'est un marqueur dans la page, un signal pour prévenir les visiteurs : <mode voix du titre>Attention, mon contenu est une indication précieuse sur ce qui vous attend plus loin !</mode voix du titre>. Le titre ne véhicule pas l'information, il n'est que structure.

L'image est, au même titre qu'un texte quelconque, le contenu du titre. C'est elle, l'information.

jpv

10 Dec 2006 à 23:54

bonjour,

a écrit :
si l'élément h1 était prévu pour afficher autre chose que du texte (sans y ajouter un élément h1), l'attribut src serait autorisé : <h1 src="mon_titre" /> par exemple.

Je n'ai rien à ajouter au message de Sopo à ce sujet.
Il ne viendrais pas à l'idée de dire "si l'élément p était prévu pour afficher autre chose que du texte...".
Ca ne retire rien aux problèmes du titre en image, mais cet argument ne tiens pas.

a écrit :
on ne peut définir une image en tant que titre, et on en revient à ma première remarque...

Et d'autant plus qu'on ne peut pas utiliser une image en dehors du contexte d'un conteneur valide.
Donc, pour un titre le conteneur valide et approprié c'est un hx et c'est tant mieux... Smiley cligne

a écrit :
La méthode siFR permet d'obtenir ce genre de choses, et je la considère à l'heure actuelle comme une méthode viable, mais je suis prêt à changer d'avis si l'on m'apporte les arguments

La technique S.F.I.R (Scalable Inman Flash Replacement) est une idée intéressante du point de vue du rendu mais elle connait également son lot de problèmes, entre autres :

1. L'agrandissement de la taille des caractères n'est pris en compte qu'à l'affichage de la page.
C'est déjà un progrès, ce n'est pas une solution dans la mesure ou l'utilisateur doit savoir que SFIR est utilisé pour en bénéficier.

2. Elle ne permet pas de se passer d'une alternative, le texte de l'objet flash n'étant pas nécessairement lu par les lecteurs d'écrans, ce qui nous replonge ipso facto dans une problématique identique à celle de l'utilisation d'une image.
Vous pourrez remarquez d'ailleurs l'utilisation de ces contenus alternatifs sur la page de l'exemple d'implémentation publié par Mike :


<span class="sIFR-alternate">Geneva Plan Signed</span></h2>

Le soucis c'est que ce contenus alternatif risque d'être lu avec le contenu du flash de remplacement.

3. Dans IE, lorsque l'option "ignorer les tailles de polices spécifiées dans la page" est utilisé (pour permettre de passer outre des tailles de polices spécifiées en pixels) le texte flash est restitué à sa taille de conception.
Là aussi cela nous replonge dans une problématique identique à celle d'une image : prévoir une taille de police minmimale la plus grande possible.

4. Lorsqu'il y à "beaucoup" de texte traité avec SFIR, le temps de chargement de la page s'en trouve d'autant alourdis.
Mike lui-même conseille d'en limiter l'usage à "pas plus" de 10 appels SFIR par page.

Tout ça pour dire que si SFIR peut être une technique intéressante son utilisation doit être soigneusement évaluée.

Cette technique est certes "viable" mais "fiable", du point de vue de l'accessibilité, c'est un problème très différent...

a écrit :
Si on n'avait pas besoin de police exotique et d'ombrage, l'image n'aurait pas lieu d'être, non ?

Ce que je voulais dire c'est de ne pas se laisser "leurrer" par le fait qu'une image contiens du texte, cela ne change rien à son statut et la manière de la traiter.

Jean-Pierre
Modifié par jpv (10 Dec 2006 - 23:58)

e-satis

16 Mar 2007 à 13:24

Bonjour,

Je m'étais penché sur le problème et avant de tomber sur ce topic j'avais utilisé un le même type de solution que celle décrite dans le premier post mais en appliquant un font-size à 0em pour faire disparaitre le texte.

Je n'ai pas une grande expérience en terme d'accessibilité Web. Cela pose-t-il un problème ?

Christian Le Bouler

16 Mar 2007 à 22:08

Salut,

je me permet de m'auto citer :

a écrit :

Si la solution css mise en oeuvre pour cacher un texte et lui substituer une image background résiste à la situation suivante :
. la feuille de style est interprétée.
. les images ne sont pas chargées.

alors c'est sans doute bon (évidemment mieux vaut rester prudent, comme à chaque fois qu'il s'agit d'accessibilité).

Sinon l'alternative de l'image dans le html doit être clairement envisagée.

Donc bons tests Smiley cligne

e-satis

17 Mar 2007 à 00:29

Bien, je sais ce qu'il me reste à faire. Smiley cligne

Modifié par e-satis (17 Mar 2007 - 00:29)

Benjamin D.C.

31 Mar 2007 à 13:36

jpv a écrit :
Une image qui contient du texte ce n'est pas la "mise en forme" d'un texte, avant toute chose c'est une "image" qui à le même statut et le même rôle que l'image d'un produit ou d'un logo.

Elle doit être traitée de la même manière, il n'y à aucune différence.

Tiens, il semblerait d'ailleurs qu'XHTML2 aille dans ce sens! Smiley smile

matmat

31 Mar 2007 à 18:21

Bonjour,
Une petite question.
A la base, au début, qu'elle est la cause qui a motivé cette technique de remplacement d'image. J'aimerais bien savoir d'ou l'idée est née et pour satisfaire quel objectifs? réferencement?
img directement c'est tellement plus sain que j'ai vraiment du mal a comprendre.

Benjamin D.C.

31 Mar 2007 à 19:19

matmat a écrit :
Une petite question.
A la base, au début, qu'elle est la cause qui a motivé cette technique de remplacement d'image. J'aimerais bien savoir d'ou l'idée est née et pour satisfaire quel objectifs? réferencement?

Bonjour,

Je crois que ce genre de pratiques est surtout issu d'une volonté exagérée de dissocier contenu et présentation: tout ce qui a attrait à l'esthétique d'un élément (typo exotique ou autre) devait passer dans la feuille de style, l'html ne devait structurer que l'information pure et dure.

fvsch

31 Mar 2007 à 19:34

matmat a écrit :
A la base, au début, qu'elle est la cause qui a motivé cette technique de remplacement d'image. J'aimerais bien savoir d'ou l'idée est née et pour satisfaire quel objectifs.

Trois choses :
- les effets de survol faciles à réaliser avec un changement de background sur :hover ;
- l'idée justement que « c'est de la mise en forme » et donc que c'est plus logique de le mettre dans le CSS ;
- le côté « au moins c'est pratique si je veux changer » (cf. CSSZenGarden, abondance de remplacement d'images).
Modifié par Florent V. (31 Mar 2007 - 19:35)

matmat

31 Mar 2007 à 20:16

a écrit :
- le côté « au moins c'est pratique si je veux changer » (cf. CSSZenGarden, abondance de remplacement d'images).

Quand j'ai commencé a coder en css, je faisais casi tout en remplacement d'image, parceque j'ai appris a partir d'une de leur feuille de style Smiley lol

Mais bon on peut dire qu'ils ont une bonne excuse, toute les feuilles de styles Zen Garden avec le même logo, ce serait moins drôle Smiley smile

.

a écrit :
l'idée justement que « c'est de la mise en forme » et donc que c'est plus logique de le mettre dans le CSS

C'est vrai que sur ce point il y des fois ou on peut se poser la question. Pour un logo il me semble pas, étant donné que le logo contient un message grafique il me semble qu'il doit être dans le contenu. En plus si il est dans les css ça complique encore au moment de l'impression ou pour la conversion du document dans d'autre format tel que pdf ou xml ou on veut le plus souvent que logo sorte également.

Par contre comme dit Benjamin, pour une typo exotique pour un gros titre par exemple, effectivement pourquoi vu que là souvent c'est l'inverse, on aimerai que cette typo disparaisse au changement de format ou de feuille se style.

Etant donné qu'une image a un attribut alt, on peut se poser la question si le remplacement est une bonne chose, peut-être dans le cas d'un utilisateur qui visualise le site avec une feuille de style alternative et les images activé, si celui ci a du mal a lire notre typo exotique, alors l'accessibilité est mise a mal.

Sacré probléme Smiley sweatdrop

<edit - rien a voir>
Ceci dit je m'aperçois de plus en plus que mettre du texte en image n'est en soi pas un trés bonne idée. A chaque fois que je l'ai fait je me suis retrouvé avec des suites de problémes sans fin, (hover, probléme gd2, taille selon bdd, png et ie...).
</edit - rien a voir>
Modifié par matmat (31 Mar 2007 - 20:23)

Benjamin D.C.

23 Apr 2007 à 18:08

Juste un petit "up" du sujet pour connaître vos avis sur la méthode basée sur le pseudo-élément :before qui semble à priori être parfaitement accessible même dans le cas d'images désactivées et css actifs. À titre d'exemple:

[b][#black]HTML[/#][/b]

<h1>Mon titre</h1>


[b][#black]CSS[/#][/b]

h1:before {display:block; content:url('logo.png');}
h1 {overflow:hidden; height:100px;}

Naturellement, une fois de plus se pose le problème d'ie... Pour ie6, le script de Dean Edwards fait parfaitement l'affaire.
Pour ie7, je ne vois pas d'autres solution à l'heure actuelle que de se rabattre sur un stylage css au plus proche de ce qu'on a sur l'image; une gracieuse dégradation en quelques sortes. Smiley ravi

Pages :

Sujet clos

CSS et mise en forme, CSS3

Mettre un titre en image: le retour