Un h1 à cacher en text-indent..qui reste là!?

Bonjour,

Je tente de régler un truc qui est plutôt routinier, mais là... comprends pas.

Je mets un h1 dans un div. Ce h1 correspond au titre du site et je le remplace par un graphique selon la méthode habituelle:

#adresse h1{
	background-color: transparent;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: -9000px!important;
	background-image: url(../images/mt-h1.gif);
	background-position: right;
	background-repeat: no-repeat;
}

Et ben... le texte h1 subsiste toujours,

Il est dans une sidebar flottant à droite.

j'ai aussi ajouté un
display: block!important; pour voir..idem.


Je ne souhaite pas voir le site référencé par les forums je marque donc l'url avec des blancs qu'il convient d e retirer.
Donc l'url ne sera pas présentée selon les règles. Je sais.

Merci

mar ion-tal agr and.com/accueil.html
Modifié par elz64 (14 Aug 2008 - 12:49)

Bonjour,

Le texte étant aligné à droite dans le bloc #sidebar, peut-être faudrait-il mettre une valeur positive pour le text-indent, associée à un white-space:nowrap;

#adresse h1{
	text-indent: 9999px;
	white-space: nowrap;
	...
}

?

ah..merci


je n'utilise jamais white-space:nowrap; ..en fait faut même que je revise ce que c'est!

Bon, ca peut marcher avec FF , mais ca ajoute un overflow horizontal terrible, compensable avec overflow: hidden;.

Mais sous IE ... tout ce titre disparait car se retrouve poussé tout au bout de la valeur d'indent..vers la droite.

donc y'a autre chose probablement.


seul

	text-align: left;
	font-family: Arial, Helvetica, sans-serif; /*	font-weight: 600;*/
	text-indent: -9000em!important;
	white-space:nowrap;

permet un fonctionnement correct sous FF et IE.
Mon souci c'est que je ne voulais pas du text-align: left, mais right.

Je peux trifouiller avec les dim de l'images et ses marges pour recaler sa position mais ..bon agacant.
Modifié par elz64 (14 Aug 2008 - 17:14)

Une autre technique consite à mettre ton texte entre les balises <span> et à cacher le texte.

<h1><span>Lorem Ipsum</span></h1>

#adresse h1 span {
	display:none;
}

Modifié par ellm (14 Aug 2008 - 13:59)

Euh ... et concrètement à part un gros problème d'accessibilité ... ça apporte quoi ?

<img /> avec son alt c'est bon faut en manger.

yodaswii, peux-tu développer un peu sur le problème d'accessibilité ? Quel est-il ?

a écrit :
yodaswii, peux-tu développer un peu sur le problème d'accessibilité ? Quel est-il ?

Bien sûr.

Certains utilisateurs peuvent faire le choix de naviguer avec les images désactivées. Ce qui fait que sur un navigateur visuel, le visiteur dans ce contexte d'utilisation n'aura pas accès à l'information présente dans l'arrière plan du titre.

De plus, un utilisateur de lecteur d'écran n'aura pas forcément le rendu de ce contenu du fait que certains de ces lecteurs ne lisent pas les contenus cachées via display ou visibility.

Donc la meilleure façon de faire est l'image en dur dans le HTML avec l'attribut alt correctement renseigné.

Merci pour ces précisions. Je vais revoir ma façon de présenter les titres dorénavant.

je me permets de revenir sur ce point:

a écrit :
Donc la meilleure façon de faire est l'image en dur dans le HTML avec l'attribut alt correctement renseigné.

Je suis d'accord, sauf s'il s'agit d'un élément hiérarchisant comme le h1.

En vocal ou en image non rendue, la balise h1 subsiste dans mon cas et remplit totalement son rôle de titre de niv.1

Une simple <img /> + alt est utile uniquement si on veut afficher cette image pour ce quelle est : une "image de base".
Moi je veux un titre.

La méthode du text-indent est, jusqu'à preuve du contraire, pour habiller un logo/ titre etc.. la seule que je connaisse en pur CSS.
Modifié par elz64 (14 Aug 2008 - 15:28)

a écrit :
Je suis d'accord, sauf s'il s'agit d'un élément hiérarchisant comme le h1 ... etc ... La méthode du text-indent est, jusqu'à preuve du contraire, pour habiller un logo/ titre etc.. la seule que je connaisse en pur CSS.

L'utilisation d'une image n'empêche nullement l'utilisation d'un titre de section. Tu n'as peut être pas bien compris l'utilité de l'alternative textuelle.

<h1><img alt="Mon titre" src="..." height="..." width="..." /></h1>

Le "pur CSS" c'est de la poudre aux yeux.
Certaines solutions à base de CSS ne sont tout simplement pas élégantes (car problématique en terme d'accessibilité). "Ta solution" est problématique (ce serait pas mal de réfléchir aux différentes façons de naviguer, non ? ).
Modifié par yodaswii (14 Aug 2008 - 15:40)

??

a écrit :
"Ta solution" est problématique

ah ? c'est pourtant plutôt accessible (au sens handicap)

1er cas.
Personne mal ou non voyante utilisant un lecteur vocal ou braille:
Le navigateur rend un h1 textuel equivalent au "pseudo text joli-bô de l'image" Ne parle pas d'image, vu que pour lui elle n'existe pas.
pas de pb donc.

2nd cas.
CSS désactivé. On est ramené au cas précédent.

3ème cas.
Un Martien qui désactive le rendu des images, ou pb technique empêchant leur affichage. cas que j'ose imaginer extrêmement marginal.
Le background n'affiche pas de symbole d'image 'cassée' (pas + mal). Ca se dégrade pas terrible car, effectivement, il n'y aura pas le ALT pour prendre le relais.

Mais je choisis d'en faire l'impasse, sachant que je priviligie d'abords l'accessibilité aux handicapés et que la désactivation volontaire d'images correspond à un comportement sans intérêt, inepte, voire d'em****rs - si je puis m'exprimer ainsi. [edit : visiblement ca n'a pas plu :]
Avec l'adsl, et la fiabilité actuelle des herbergement le graphisme fait partie intégrante du Web. Sinon autant prendre un Minitel...

Après c'est de la philo on peut toujours en débattre des heures.
Et d'ailleurs ce serait bien d'avoir un ensemble d'avis sur ce point.
Modifié par elz64 (14 Aug 2008 - 19:24)

a écrit :
Le navigateur rend un h1 textuel equivalent au "pseudo text joli-bô de l'image" Ne parle pas d'image, vu que pour lui elle n'existe pas.

L'existence de l'image se concrétise par la présence de son alt ...
Cela reste du texte et ne comporte pas de manquements en ce qui concerne l'accessibilité (comparé à ce foireux text-indent).

Bon on va arrêter c'est pas la peine de discuter avec des personnes qui parlent d'un sujet qu'ils ne maîtrisent pas un minimum et qui ne souhaitent pas aller plus loin dans leurs réflexions.

a écrit :
... je priviligie d'abords l'accessibilité aux handicapés

Alors celle-là je dis hop bookmark, les jours de boulot où je me ferai chier ça me remontera le moral ...
Modifié par yodaswii (14 Aug 2008 - 17:32)

Personnellement, si une méthode permet une meilleure accessibilité qu'une autre, pourquoi ne pas la choisir ?

Après il y a peut-être d'autres critères que l'accessibilité dans le choix d'une méthode, c'est un peu du cas par cas.

Toutefois, dans l'exemple qui nous intéresse et qui est traité ici, je trouve que la solution proposée par yodaswii est plus complète.





Et ayons une pensée émue pour tous ces emmerdeurs qui désactivent les images. Ca leur apprendra.
(c'est du second degré, bien sûr)
Modifié par ellm (14 Aug 2008 - 17:36)

a écrit :
Et ayons une pensée émue pour tous ces emmerdeurs qui désactivent les images. Ca leur apprendra.

Si encore il n'y avait que les emmerdeurs.
Modifié par yodaswii (14 Aug 2008 - 17:34)

ellm a écrit :
Personnellement, si une méthode permet une meilleure accessibilité qu'une autre, pourquoi ne pas la choisir ?

Après il y a peut-être d'autres critères que l'accessibilité dans le choix d'une méthode, c'est un peu du cas par cas.

+1. Voilà une bonne dose de bon sens.

elz64, yodaswii t'as indiqué que la solution du text-indent négatif posait un problème d'accessibilité. Pas énorme, certes (même si je pense que tu sous-estimes un peu le cas numéro 3, qui je pense ne concerne pas que les martiens mais également des utilisateurs terriens et qui plus est sains d'esprits), mais ça reste un problème. Maintenant, si tu as une raison particulière de ne pas utiliser la solution qu'il propose -- qui, du point de vue de l'accessibilité, est meilleure --, ça peut se défendre aussi.

ellm a écrit :
sachant que (...) la désactivation volontaire d'images correspond à un comportement sans intérêt, inepte, voire d'emmerdeurs

C'est parfaitement faux. Personne ne s'amuse à surfer sur le Web en désactivant les images pour faire chier les concepteurs de sites. Les personnes qui le font savent très bien qu'elles risquent de perdre des informations, et de ne pas avoir accès au site tel qu'il a été conçu. Si elles le font, c'est par nécessité. Par exemple parce qu'elles sont «condamnées» au bas débit, car habitant en campagne. Ou parce qu'elles surfent depuis un eeePC connecté en 3G, et que la connection est plus réactive sans télécharger les images (quitte à réactiver les images lorsqu'elles ont trouvé un contenu qui les intéresse).

Pour rappel, on disait la même bêtise («les utilisateurs qui le désactivent sont des emmerdeurs») en parlant de... JavaScript. On oubliait ainsi de multiples raisons toutes valables qui font qu'un utilisateur n'a pas forcément accès à JavaScript.

a écrit :
ellm a écrit
sachant que (...) la désactivation volontaire d'images correspond à un comportement sans intérêt, inepte, voire d'emmerdeurs

Cher Florent, il y a erreur sur l'auteur de cette phrase.
Je ne voudrais pas qu'on prive elz64 d'une aussi belle déclaration.

a écrit :
Cher Florent, il y a erreur sur l'auteur de cette phrase.
Je ne voudrais pas qu'on prive elz64 d'une aussi belle déclaration.

@Florent V. : en effet, j'ai un peu abusé en disant "gros" problème d'accessibilité.

Merci à tous d'avoir alimenté ce fil!

Pas de panique, j'écoute humblement. Mais effectivement je reste prostré devant une désactivation d'images.

Je sous-estime. Soit. Mea culpa. A-t-on des stats sur ce sujet ?

[yodaswii ] c'est pas la peine de m'engueuler on débattait gentiment (enfin je croyais) des avantages et inconvénients.

Tiens : Je vais essayer d'appliquer ca pour tester sur un de nos projets totalement dans l'accessibilité (nous avons des handicapés en face) pour comparer in situ les deux méthodes.

du coup je jette un oeil sur les stats indiquées par Florent (merci)
http://www.w3schools.com/browsers/browsers_stats.asp
5% en 2008 de JS désactivés vs 10% il y a 2 ans...

C'est vrai que on essaye de faire appel au JS de manière à ce que ca se dégrade correctement, mais bon, en même temps c'est vraiment pas aller dans le sens de l' Histoire quant tout le monde parle de contenu riche, d'appli en ligne et tout le bazar de l'Ajax... on peut plaindre ceux qui désactive ca aujourd'hui, et surtout demain.

A moins d'avoir une politique extrêmement bien faite et concertée en entreprise (et plutôt en grosse boite d'ailleurs) je plains l'admin (je fus !) qui désactiverait tout ca le jour où un cadre "plus haut" ne pourra pas voir ses cours de la bourse par exemple. Pour les autres c'est facheux mais ils resteront sur le bords de toute façon à cours terme.
Tiens j'ai pas essayé avec ma PS3 au fait ..
Pour les terminaux mobiles là .. bon je ne suis pas assez impliqué encore.
Je peux croire que d'aucun désactivent les images mais une fois encore, je doute que ceux-ci constituent un % si représentatif que ca.
Et dans ce cas, sauf si la chose se fait automatiquement, si j'étais un utilisateurs lambda qui aurait la compétence de se poser cette question, et, qui de plus saurait agir sur le navigateur de son bidule mobile, alors je désactiverais d'abords les css plutot que les images.
Sans études précises sur ce point je reste perplexe
Modifié par elz64 (14 Aug 2008 - 19:23)

a écrit :
c'est pas la peine de m'engueuler on débattait gentiment (enfin je croyais) des avantages et inconvénients.

Ce n'était pas le cas.
Désolé si tu l'as perçu comme cela ... la passion de la chose.

ok nopb

Mais bon le coup du bookmark .. pas super cool quand même

La passion ! on a a surement ca en commun
Modifié par elz64 (14 Aug 2008 - 19:29)