Mettre un titre en image: le retour - Forum Alsacréations : CSS et Standards Web

Auteur	Pages : [<<] [<] [>] [>>]
Benjamin D.C.	# 04 Dec 2006 - 18:13:21
Modérateur 2408 Posts	(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) This is the way, step inside.
Modérateur 2408 Posts
Tony Monast	# 04 Dec 2006 - 18:20:07
Fusionnez à froid ! Modérateur 2291 Posts	Benjamin D.C. a écrit : 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 Pour aller au plus simple, et sans doute au plus fréquent, disons que la personne serait sur basse vitesse et désactiverait les images pour accélérer la navigation, tout en conservant les CSS pour avoir une certaine ergonomie et esthétisme dans les sites. Il y a d'autres situations où un problème logiciel ou de connexion ferait en sorte que la personne a réussie à télécharger le fichier CSS mais pas encore les images qui tardent à arriver... ou n'arrivent carrément pas. Modifié par Tony Monast (04 Dec 2006 - 18:21) Une seule pensée constructive, vaut mieux qu'une heure d'efforts futiles.
Fusionnez à froid ! Modérateur 2291 Posts
Benjamin D.C.	# 04 Dec 2006 - 18:24:01
Modérateur 2408 Posts	Tony Monast a écrit : Pour aller au plus simple, et sans doute au plus fréquent, disons que la personne serait sur basse vitesse et désactiverait les images pour accélérer la navigation, tout en conservant les CSS pour avoir une certaine ergonomie et esthétisme dans les sites. Hum ^^ Je me demande bien ce que représente ce "fréquent" This is the way, step inside.
Modérateur 2408 Posts
jpv	# 04 Dec 2006 - 18:24:53
Modérateur 743 Posts	Bonsoir, 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)
Modérateur 743 Posts
Benjamin D.C.	# 04 Dec 2006 - 18:28:33
Modérateur 2408 Posts	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. This is the way, step inside.
Modérateur 2408 Posts
jpv	# 04 Dec 2006 - 18:36:08
Modérateur 743 Posts	Bonjour, 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)
Modérateur 743 Posts
Benjamin D.C.	# 04 Dec 2006 - 18:37:46
Modérateur 2408 Posts	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) This is the way, step inside.
Modérateur 2408 Posts
jpv	# 04 Dec 2006 - 18:42:20
Modérateur 743 Posts	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)
Modérateur 743 Posts
Benjamin D.C.	# 04 Dec 2006 - 18:46:05
Modérateur 2408 Posts	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... This is the way, step inside.
Modérateur 2408 Posts
jpv	# 04 Dec 2006 - 18:54:11
Modérateur 743 Posts	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
Modérateur 743 Posts
Christian Le Bouler	# 04 Dec 2006 - 19:16:27
3135 Posts	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)
3135 Posts
Julien Royer	# 04 Dec 2006 - 19:59:17
Coin coin Modérateur 3709 Posts	Pour l'histoire de désactivation des images : Eldebaran a écrit : Ou c'est l'admistrateur qui désactive les images (vu dans certaines universités). Je ne te comprends pas, Benjamin. 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. Or, dans ce cas précis, le fait de sortir les images rend le code bien moins compréhensible (et donc moins facilement maintenable). Il rend aussi sans conteste le contenu moins accessible. Il faut se demander "pourquoi" et non pas "comment". ...
Coin coin Modérateur 3709 Posts
Benjamin D.C.	# 04 Dec 2006 - 20:35:04
Modérateur 2408 Posts	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) This is the way, step inside.
Modérateur 2408 Posts
Julien Royer	# 04 Dec 2006 - 21:14:23
Coin coin Modérateur 3709 Posts	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) ...
Coin coin Modérateur 3709 Posts
Benjamin D.C.	# 05 Dec 2006 - 10:49:17
Modérateur 2408 Posts	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 This is the way, step inside.
Modérateur 2408 Posts
Benjamin D.C.	# 05 Dec 2006 - 15:16:00
Modérateur 2408 Posts	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: HTML <body id="main"> <h1>Titre de section</h1> </body> CSS * {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; /* if you want to show image in IE5 instead of only text / background: url(logo.png) no-repeat; text-indent: -500em; / end of IE5 image showing / } / backslash hack to hide some definitions from Mac IE5 \/ #main h1 {overflow: hidden; text-indent: 0; background: none;} / well here goes our standards based solution / h1:after { display: block; content: url("logo.png"); width: 247px; height: 27px; margin-top: -1em; } / 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) This is the way, step inside.
Modérateur 2408 Posts
jpv	# 05 Dec 2006 - 15:37:32
Modérateur 743 Posts	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)
Modérateur 743 Posts
jpv	# 05 Dec 2006 - 15:48:25
Modérateur 743 Posts	Bonjour, Juste en passant parce que j'aime bien gratouiller : 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
Modérateur 743 Posts
Benjamin D.C.	# 05 Dec 2006 - 15:53:57
Modérateur 2408 Posts	jpv a écrit : Bonjour, Juste en passant parce que j'aime bien gratouiller : si l'accessibilité est requise J'ai dit ça moi? This is the way, step inside.
Modérateur 2408 Posts
AbsolutV	# 09 Dec 2006 - 17:00:57
14 Posts	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 ?
14 Posts
Benjamin D.C.	# 09 Dec 2006 - 18:08:11
Modérateur 2408 Posts	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: XHTML <?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> JS /* 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) This is the way, step inside.
Modérateur 2408 Posts
Prévenir un modérateur Pages : [<<] [<] [>] [>>]

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr