Mettre un titre en image: le retour

(reprise du message précédent)

clb56 a écrit :
Quand on parle d'accessibilté il n'y a pas de petite bête justement.

Je comprends évidemment ton point de vue — honorable, certes — mais j'ai franchement du mal à imaginer une situation où les images ne seraient pas chargées
Modifié par Benjamin D.C. (04 Dec 2006 - 18:14)

Bonsoir,

a écrit :
mais j'ai franchement du mal à imaginer une situation où les images ne seraient pas chargées

Cerains mode de navigation sur téléphone portable, PDA ect
Utilisation d'un navigateur textuel sous linux ou n'importe quel unix comme les vieux mainframe IBM qui sont encore en service.
Utilisation d'aide technique spécialisée
Utilisation de vieux client windows, par exemple dans les pays du magreb.
Utilisation de réseau de communication bridée, par exemple dans certaines contrées politiquement hostiles de notre planête...

Et de manière générale : Toute situation (défaillance matérielle, défaillance de connection ou simple choix de l'utilisateur) imprévisible, circonstancielle, exceptionnelle ...

Et même si cela arrive rarement et même si on imagine que c'est quantité négligeable...

jean-pierre
Modifié par jpv (04 Dec 2006 - 18:26)

jpv a écrit :
Cerains mode de navigation sur téléphone portable, PDA ect
Utilisation d'un navigateur textuel sous linux ou n'importe quel unix comme les vieux mainframe IBM qui sont encore en service.
Utilisation d'aide technique spécialisée
Utilisation de vieux client windows, par exemple dans les pays du magreb.
Utilisation de réseau de communication bridée, par exemple dans certaines contrées politiquement hostiles de notre planête...

Dans ces cas de figures, ok, "peut-être"... Je pense surtout que ces situations sont rarissimes et, quand cela se présente, j'imagine que c'est aussi la feuille de style qui est désactivée et là, pas de problème.

Bonjour,

a écrit :
Je pense surtout que ces situations sont rarissimes et, quand cela se présente, j'imagine que c'est aussi la feuille de style qui est désactivée et là, pas de problème.

A combien situe-tu le rarissime ?

Concernant la feuille de style, pas du tout, il peut s'agir simplement de l'action spécifique d'un utilisateur (outils->avancé->ne pas afficher les images sur IE par exemple)

Jean-pierre
Modifié par jpv (04 Dec 2006 - 18:39)

En fait, après relecture, vous semblez pour la plupart préconniser une insertion de l'image en dur dans l'HTML. Pourtant, cela va vraiment à l'encontre de l'idée que je me fais de la séparation contenu/présentation.

L'information brute — le texte, donc — fait partie du contenu, l'apport d'une image quelconque ou d'une typo non web relève logiquement de la manière dont on affiche cette information, et par conséquent de sa présentation.

Mis à part, donc, de l'exception du logo d'une entreprise qui est une information à part entière, je préfère garder la mise en forme de mes titres par une solution faite pour ça: le css. Question de choix personnel, probablement...
Modifié par Benjamin D.C. (04 Dec 2006 - 18:38)

a écrit :
L'information brute — le texte, donc — fait partie du contenu, l'apport d'une image quelconque ou d'une typo non web relève logiquement de la manière dont on affiche cette information, et par conséquent de sa présentation.

Tsss... attention :

L'image d'une voiture où l'on peut voir qu'elle est plutôt jolie et correspond à son goût, c'est :

La "présentation" de ses caractéristiques "textuelles", auquel cas on peut s'en passer...

Ou un véritable contenu ???

Jean-pierre
Modifié par jpv (04 Dec 2006 - 18:42)

jpv a écrit :
L'image d'une voiture où l'on peut voir qu'elle est plutôt jolie et correspond à son goût, c'est :

La "présentation" de ses caractéristiques "textuelles", auquel cas on peut s'en passer...

Ou un véritable contenu ???

Oui mais non, là c'est tout à fait différent: il s'agit clairement de contenu, non pas de styliser une information...

Bonjour,

Et bien oui... bien sur... et donc d'exception en exception on en est arrivé à définir une règle simple :

Si une image transmet une information nécessaire à la compréhension d'un contenu, et on parles là de sa "restitution" et pas de son "statut" alors il s'agit d'un "contenu", il doit faire partie du flux Html et donc être diffusé au moyen de la balise img.

Dans le cas inverse il s'agit d'une image de"décoration" et alors on peut la diffuser par l'intermédiaire de la mise en forme CSS.

Dans le cas d'un titre en image et à partir du moment où je rencontre un cas où j'ai une perte d'information (en loccurence images désactivées ET CSS activé) l'image considérée est clairement du contenu et doit être partie du flux Html.

Le cas, certes problématique, de l'utilisation de feuille de style alternative avec des jeux d'images doit être traitée de manière différente, ce peut-être par exemple un style-switcher serveur qui va embarquer le bon jeu d'image.

C'est la solution la plus pérenne et la plus accessible...

Jean-pierre

jpv a écrit :

C'est la solution la plus pérenne et la plus accessible...

En fait il y en a une autre. C'est le fait de se poser la question de la pertinence de l'utilisation d'images en lieu de contenus textuels cruciaux et en premier lieu les <hn>.

Attention, je dis bien "se poser la question" ou encore avoir une approche vigilante et critique.

. Soit un logo
. Soit un <h1>

Doit on vraiment considérer que le logo sera moins présent à l'écran s'il se trouve ailleurs que dans ce <h1> en laissant à ce dernier un contenu purement textuel ?

Oui mais !

Si le logo dit mon identité et que le <h1> aussi alors c'est un doublon.

Certes mais pourquoi faudrait il que mon identité soit présente dans chacun de mes document sous la forme d'un <h1> ? Cela ne vas finalement pas tant que ça de soi si on y regarde de près.
Modifié par clb56 (04 Dec 2006 - 19:18)

Eldebaran a écrit :
Tu dis préconiser le fait de sortir les images du HTML pour respecter la séparation structure/présentation. Or, à quoi sert cette séparation ? A rendre le code plus propre, plus facilement maintenable. Et sans doute aussi indirectement à rendre le contenu plus accessible, puisque cette spération permet en général d'améliorer la sémantique.

Tout à fait d'accord.

Eldebaran a écrit :
Or, dans ce cas précis, le fait de sortir les images rend le code bien moins compréhensible (et donc moins facilement maintenable).

Ah bon? Et pourquoi? Le code est au contraire plus propre et plus simple à maintenir (cfr. alternate stylesheets entre autres) amha.

Eldebaran a écrit :
Il rend aussi sans conteste le contenu moins accessible.

Tout à fait d'accord aussi. Cependant, je n'imaginais pas une seconde l'éventualité d'une personne désactivant les images et non les feuilles de styles, mais je suis loin d'être un expert en accessibilité. Et puis, je n'ai jamais parlé de cette méthode comme la solution à tous les problèmes. Il s'agit juste d'une variante, je pense, plus propre aux techniques de span, clips et autres text-indent, ni plus ni moins. Elle a au moins, mettons, le mérite d'exister. Les problèmes d'accessibilités sont évidemment les mêmes qu'avec les autres techniques (je me répète, ça devient fatiguant). De plus, encore faut-il réellement vouloir rendre son site accessible, démarche tout à fait honorable qui n'est cependant pas une priorité pour bon nombre de créateurs de sites. Rendre un site accessible, c'est un travail de fond qui demande une réelle volonté de la part du client/webmaster. Et je peux tout à fait comprendre que dans beaucoup de cas, il ne s'agit (malheureusement) pas d'une nécessité. Dans ce contexte, donc, et peut-être uniquement dans ce contexte, cette solution me semble tout à fait valable.

Eldebaran a écrit :
Il faut se demander "pourquoi" et non pas "comment".

Encore une fois d'accord
Modifié par Benjamin D.C. (04 Dec 2006 - 20:39)

Je comprends que tu n'apprécies pas trop que le sujet ait dévié de son objectif de départ, mais je pense que ce débat est vraiment intéressant est qu'il mérite d'être appronfondi.

Pour ma part, je trouve en effet ta méthode intéressante dans le contexte que tu décris.

Je maintiens quand même que je trouve la solution avec <img> plus compréhensible et plus maintenable (laquelle des deux solutions un débutant comprendra-t-il le plus vite ?).
Modifié par Eldebaran (04 Dec 2006 - 21:14)

Eldebaran a écrit :
Je comprends que tu n'apprécies pas trop que le sujet ait dévié de son objectif de départ, mais je pense que ce débat est vraiment intéressant est qu'il mérite d'être appronfondi.

Bof, ça part un peu dans tous les sens à vrai dire. Le sujet est en soi passionnant, effectivement, mais loin du propos que j'essaye de débattre depuis mon billet initiateur.

Eldebaran a écrit :
Pour ma part, je trouve en effet ta méthode intéressante dans le contexte que tu décris.

Là on est dans le sujet

Eldebaran a écrit :
Je maintiens quand même que je trouve la solution avec <img> plus compréhensible et plus maintenable

Ah oui ça je commence à le savoir

Eldebaran a écrit :
laquelle des deux solutions un débutant comprendra-t-il le plus vite ?

Heum l'image en dur pourquoi? Je ne vois pas bien ce que ça a avoir

Au passage, je suis tombé sur une solution d'Anatoly Papirovsky qui semble résoudre tous les problèmes d'accessibilités et qui, de surcroît, offre un marquage sémantique parfait.

Voici un exemple d'utilisation de sa technique:

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

<body id="main">

<h1>Titre de section</h1>

</body>




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

* {margin: 0; padding: 0; font-family: Verdana, sans-serif; color: black}

h1 {
width: 247px;
height: 27px;
line-height: 1em;
font-size: 100%;
white-space: nowrap;
[#orange]/* if you want to show image in IE5 instead of only text */[/#]
background: url(logo.png) no-repeat;
text-indent: -500em;
[#orange]/* end of IE5 image showing */[/#]
}

[#orange]/* backslash hack to hide some definitions from Mac IE5 \*/[/#]

#main h1 {overflow: hidden; text-indent: 0; background: none;}

[#orange]/* well here goes our standards based solution */[/#]

h1:after {
display: block;
content: url("logo.png");
width: 247px;
height: 27px;
margin-top: -1em;
}

[#orange]/* some of the styling for stupid Windows IE */[/#]

* html #main h1 {
background-image: expression(this.innerHTML += '<span></span>', this.runtimeStyle.backgroundImage = "none");
position: relative;
z-index: 1;
}

* html h1 span {
display: block;
width: 247px;
height: 27px;
background: url(logo.png) no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

Une réelle avancée pour une accessibilité optimale
Modifié par Benjamin D.C. (05 Dec 2006 - 15:51)

Bonjour,

Ce qui est fascinant c'est cette obsession (je ne parles pas pour toi benjamin) à vouloir à toute force utiliser des images en fond d'éléments quand elles n'ont rien à y faire.

Bon, bref, tu vas dire que je fais le chieur, mais bon allons-y :

J'ai une image de titre repositionnée par dessus un texte. Soit, j'ai tout : mon image, mon texte, je désactive les images, cool, je désactive CSS, coooool

Maintenant...

J'augmente la taille de mes caractères...

Aaaargh !......

"Si une image transmet une information nécessaire à la compréhension d'un contenu elle doit faire partie du flux html..."

Désolé, encore raté...

Jean-pierre
Modifié par jpv (05 Dec 2006 - 15:38)

Bonjour,

Juste en passant parce que j'aime bien gratouiller :

a écrit :
si l'accessibilité est requise

L'accessibilité d'un contenu numérique peut être difficile ou compliquée, voire dans certains cas "pas encore possible", mais elle est toujours requise...

Jean-pierre

bonjour à tous.
Pourquoi ne pas mettre en place une solution javascript ?
J'avoue ne pas être un adepte du tout js, mais il pourrait offrir la possibilité d'un affichage d'image pour la majorité des configurations, tout en fournissant un contenu "dégradé acceptable" (comprendre "stylisé css") pour les autres configurations n'interprétant pas js, sans pour autant ajouter de balises superflues au sein du document.
Les exemples de la méthode siFR ou swfobject permettent d'obtenir des résultats plus que satisfaisants en matière d'accessibilité me semble-t-il (moyennant éventuellement quelques adaptations).
Je n'ai pas eu l'occasion de tester cette méthode mais elle me semblerait être une alternative efficace, qu'en prensez vous ?

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)