Les image dans les CSS

[Hells_Dark]

Bonjour tout le monde,

Je lisais l'article d'openweb.eu.org sur les images dans les CSS (URL, et je me disais que ce serait bien pratique de mettre mes image dans les CSS en background plutot que dans le code XHTML de la page. En effet, je me disais qu'ainsi, en changeant de feuille de style, je pourrais changer les images décoratives du design !

Seulement, je me pose la question de l'accessibilité. Et oui, si je met le logo dans ma feuille de style par exemple, la propriété Alt="blablabla" disparaitra, et celle ci contenait le titre du site (comme le logo)...

Comment faire pour ne pas entraver l'accessibilité ?

[mee2]

plop,

http://www.webmaster-hub.com/index.php?showtopic=5178

http://blog-and-blues.org/weblog/2004/08/1...-propriete-clip

http://blog-and-blues.org/weblog/2004/08/1...iere-accessible

http://blog-and-blues.org/weblog/2004/08/1...-titre-en-image

[Hells_Dark]

Aie, après un quart d'heure de lecture, je me tappe un de ces mal de crane...

Au final, j'en sort que ça parait bien compliqué pou peut-être pas grand chose dans mon cas...

Ils pouvaient pas juste dire "rajoutez le titre avec une classe dotée de la propriété hidden" à l'emplacement de votre image ou quelque chose du genre ? Je suis un peu dégouté à voire tant de solutions pour une si "futile" chose...

[Dagnan]

Le plus simple à mon avis, c'est de mettre ton logo dans ta page, directement (<img src...), entourgé de <h1> et </h1>.

Ensuite pour les autres images, tu peux les mettres dans le css, en utilisant les techniques données pour masquer le texte (mais pas de visibility: hidden; ou de display: none;).

En fait c'est pas trop compliqué, tu as juste à choisir une technique (comme il l'a été expliqué dans ce post) entre :

position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;

et

position:absolute;
clip: rect(1px 1px 1px 1px);

(css qui peut être appliqué à un span par exemple, qui contiendrait le texte. Comme ça le texte peut-être "lu", mais pas affiché.)

Si je dis trop de bêtises, corrigez-moi

[pierredureau]

Je n'ai pas lu les liens Blog&Blues de Lee2, alors peut-etre qu'il y a redites. Si c'est le cas, désolé.

Pour un logo qui change selon la feuille de style, voilà ma technique.

xHTML :

<h1><span>Texte alternatif</span></h1>

CSS :

h1 { width: 200px; height: 50px; background-image: url('logo.png'); }
h1 span { display: none; }

Comme ça, on obtient ce que tu veux tout en restant accessible.

[mee2]

Malheureusement (et c'est la cause de tout les articles préconisant des méthodes étranges), le contenu du span est masqué par le display: none; aussi bien dans les navigateurs graphiques (c'est le but) que dans les lecteurs d'érans (c'est le contraire du but). D'où toutes les manoeuvres pour cacher du contenu sans utiliser display: none; ou visibility: hidden;

[kozlika]

Parfois ça peut être très simple à résoudre, ça dépend du contexte. J'ai par exemple pour l'une de mes css "remplacé" le titre de mon blog par une image sur fond blanc.

h1 {

font-size:8px;

color:#fff;

height:64px;

}

J'ajoute que j'avais besoin que le titre en image soit cliquable -> c'est un lien pour revenir à l'accueil. J'ai donc appliqué

h1 a {

background: transparent url(monimage) no-repeat 12px 12px;

height:100%;

color:#fff;

}

Modifié 24 Août 2004 par kozlika

[Dagnan]

Euh, et si on désactive les images ou le css, on voit quoi ?

Que dalle

Je pense avoir donné les solutions déjà existentes, et qui ont prouvées leur efficacité (j'ai juste oublié de préciser qu'il fallait rajouter du texte entre les balises h1).

De plus pour ton css, il y a une erreur, il me semble qu'il faut mettre une virgule entre h1 et a, pour que le style s'applique aux deux balises

[kozlika]

non non, pas de virgule*.. c'est plutôt que l'image est en background de h1 {} et pas dans le h1 a {} (j'avais écrit de mémoire, pardon).

Evidemment la feuille de styles peut être désactivée mais dans ce cas le titre en h1 est parfaitement lisible (puisque plus blanc vu que la feuille de styles est désactivée, tu me suis ? )

* Et surtout pas entre h1 et a : tu imagines... TOUS les liens comme ça ?

[LaurentDenis]

Bon, quelques précisions :

- quelque-soit le détail de la solution retenue, pour certains utilisateurs, une image insérée via CSS sera inaccessible, et aucun équivalent textuel ne sera disponible. C'est le cas si l'utilisateur a coché "Ignorer les couleurs" dans les options d'Accessibilité d'IE, par exemple, ou active la CSS mais pas les images, etc. En fait, ici, CSS est la solution la moins accessible

- Séparer le contenu et la préentation ne veut pas dire mettre toutes les images en CSS : une image de logo, un titre ou un lien mis en image... ont tout à fait leur place dans le "contenu", via un <img src="..."> qui sera, lui, beaucoup plus accessible.

- il existe d'autres solutions intéressantes que CSS pour gérer des images sans <img src="..."> : javascript et flash en particulier (voir les articles cités plus haut par mee2)

Modifié 25 Août 2004 par LaurentDenis

[Sylvain Trovalet]

quelque-soit le détail de la solution retenue, pour certains utilisateurs, une image insérée via CSS sera inaccessible, et aucun équivalent textuel ne sera disponible

j'étais arrivé au même constat par exemple si l'image en backgroud a une mauvaise url le fait de masquer d'une façon ou d'une autre le texte fait que l'on ne verra plus rien (ni image ni texte)

faudrait-il rajouter pour CSS3 une régle genre?? :

h1
{
si background: transparent url(/images/titre.png) no-repeat; non activé alors display:texte; (sous entendu le texte qui est entre les balises h1)
sinon display:none;
}

j'avoue que c'est de toute évidence compliqué mais c'est pourtant une chose que beaucoup de webmasters vont pourtant rêver d'utiliser non ?

[LaurentDenis]

j'avoue que c'est de toute évidence compliqué mais c'est pourtant une chose que beaucoup de webmasters vont pourtant rêver d'utiliser non ?

Ils peuvent en rêver beaucoup plus concrètement que cela, avec:

- l'élément <object> en HTML4.01 et XHTML1.x ... le jour où tous les navigateurs l'implémenteront correctement.

- la possibilité de donner à n'importe quel élément XHTML2.0 un substitut graphique, remplacé par le contenu de l'élément en cas de non support (ou, logiquement, d'image non -disponible ou désactivée)...