Images et attribus Alt dans un css externe

Comment mettre l'attribu "Alt" dans le CSS ?

Toute mes images sont dans un CSS externe.
Sous la forme :

background: url(../../images/image1.jpg) no-repeat 0 0 ;

Cependant je pense que cela veut dire que l'image n'est pas accésible aux handicapés puisque je ne peut pas indiquer se que reprente l'image.

Comment faire pour la rendre accésible ?

Bonjour,

Si les images en question ont du sens il ne faut pas les faire prendre en charge par CSS.
La solution est donc de remettre toutes les images descriptives là où elles doivent l'être : dans le code html.

Il peut y avoir certaines exceptions, mais c'est exceptionnel et très circonstanciel.

Jean-pierre

Il n'y a pas de solution pour rendre accessible une image dans une CSS. Une fausse bonne idée consisterait à placer le texte de description au-dessus de l'image dont tu veux faire ton fond et que tu veux décrire, puis dans la CSS, en même temps que tu affiches ton image, cacher le texte.

Mais les synthèses vocales sont sensibles à ces propriétés CSS purement "visuelles", alors même qu'elles ne devraient pas les prendre en compte.

Il ne faut pas oublier que CSS est là pour gérer l'apparence de la page, pas pour apporter de l'information supplémentaire.

Si ton image est de l'information, alors elle a sa place dans le code HTML de ta page et, partant, tu peux utiliser les outils à ta disposition pour lui apporter une alternative textuelle: alt, accompagné de longdesc si nécessaire.

Un résumé (volontairement) très schématique :

Premier cas : l'image est décorative.

Il peut s'agir d'illustration de fond, de bordure imagée, d'arrondi ou toute autre décoration qui n'apporte rien au contenu de la page.

Dans ce cas, il faudrait éviter de faire apparaître cette image dans le code HTML (<img>) mais privilégier la séparation fond/forme en gérant cette image décorative à l'aide d'une feuille de style CSS séparée.

Cela permet de ne pas avoir d'éléments de structure qui vont inutilement allourdir le code ou rendre son interprétation plus difficile.


Second cas : l'image apporte du contenu.

A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), il faudrait que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.

Il faut donc faire apparaître l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant.
Modifié par Raphael (15 Feb 2006 - 12:15)

Merci beaucoup pour vos réponses

Ce n'est donc pas possible .
Tout est une question de choix.

Je fait tout mon possible pour rendre accésible mon site a maximum de personne.
Mais là a mon grand regret je doit choisir entre ne pas le rentre accésible au handicapé ou revoir l'intégraliser de mon site au détriment du design.

Je note au passage qu'une fois de plus les hanpicapé sont ... oublier.
C'est quand même fort, je fait tout mon possible pour respecter au plus préci les standarts et voilà t'il pas qu'il n'existe rien dans le CSS pour les handicaper !

moua c'est chaut ....
Modifié par polau (15 Feb 2006 - 10:50)

jpv a écrit :
Il peut y avoir certaines exceptions, mais c'est exceptionnel et très circonstanciel.

... par exemple une image portant du sens mais qui ne soit utilisable qu'en background (par exemple devant remplir un div en design extensible : si on la place dans html elle empêchera par sa taille la fluidité de la page).
Deux solutions sont possibles : la première c'est de mettre l'image dans CSS et de mettre un png transparent de 1px dans html qui supportera la balise alt (ouh la triche), la deuxième c'est de de passer le site en affichage 800x600 et de mesurer la taille maximale que devra avoir l'image, de la retailler à cette dimension, de la mettre dans html et de placer en background une copie de l'image mais cette fois en taille maxi. L'inconvénient, c'est de charger deux fois la même partie de l'image ! la solution alors c'est de ne mettre en CSS que la "fin" de l'image et de décaler le background, en préservant quand même une petite sécurité de recouvrement. De cette façon les deux critères (visibilité et accessibilité + séparation forme-contenu) sont préservés.

a ouais j aime bien votre première solutions Arsene

Cependant je croix savoir que IE ne gère pas la transparence sur les *.png 24 bits

Mais je peut tester avec un png 8 bits, mais dans se cas là cette "tricherie" ne va pas déranger le W3C ??
Modifié par polau (15 Feb 2006 - 11:08)

Bonjour,

@Arsene : A quelle genre d'image penses-tu ?
Par ailleurs tu peux obtenir ce genre de comportement en gardant l'image dans le code Html et en lui affectant des propriétés de dimensionnement relatives par CSS.
Ce qui est beaucoup moins compliqué...
Mais j'aimerais bien avoir un exemple d'un cas de ce type qui me semble poser des problèmes "intrinsèques" :
Une image est un objet, ses dimensions originales sont un élément indissociable, par ailleurs dans le cas d'image extensible, sur les médias qui ne supportent pas ou mal ou partiellement CSS, c'est la taille originale qui sera utilisée.
Enfin, dans ce cas d'image "extensible" que se passe-t-il, en terme de définition quand on utilise un fenêtrage ?


@Polau : Le W3C ne te dira rien, en revanche si tu maintiens tes images en CSS, tes utilisateurs eux ne verront rien chaque fois que CSS n'est pas utilisable.

a écrit :
Mais là a mon grand regret je doit choisir entre ne pas le rentre accésible au handicapé ou revoir l'intégraliser de mon site au détriment du design

Aurais-tu une url à nous fournir, je ne vois pas de cas envisageable, en ce qui concerne les images descriptives où leur présence dans le code Html serait génant pour le design.

Par rapport au concept de séparation contenu/forme qui vise à rendre le contenu indépendant du périphérique de consultation, une image est du contenu, à ce titre elle doit être dans le code Html qui porte le contenu.

a écrit :

Dans ce cas, il faudrait éviter de faire apparaître cette image dans le code HTML (<img>) mais privilégier la séparation fond/forme en gérant cette image décorative à l'aide d'une feuille de style CSS séparée.

En précisant un point capital : Il faut systématiquement s'assurer que le contenu reste lisible dans tous les cas de désactivation (couleurs, couleurs de la page, images) et doubler la propriété d'image de fond par une propriété de couleur de fond si necessaire.

Jean-pierre
Modifié par jpv (15 Feb 2006 - 12:06)

polau a écrit :
Je note au passage qu'une fois de plus les hanpicapé sont ... oublier.

Hmm je note que tu prends la décision "d'oublier" les handicapés.

Tu dis que tu as le choix entre design et handicap... or il n'y a aucun dilemme contrairement à ce que tu crois : ce qui est handicapant, c'est de ne pas pouvoir accéder au contenu, pas au design.
Le design n'est - et ne doit rester - qu'une surcouche. Une surcouche par dessus un contenu qui, lui, doit toujours être accessible.

Je répète qu'une image peut être soit de contenu, soit de décoration. Dans le premier cas, elle doit être accessible (donc en HTML), dans le second cas, elle devrait être hors du document (donc en CSS).

Arsène a écrit :
... par exemple une image portant du sens mais qui ne soit utilisable qu'en background (par exemple devant remplir un div en design extensible : si on la place dans html elle empêchera par sa taille la fluidité de la page).

On parle encore de design et non de contenu.
Si l'image est censé faire partie du design, elle ne fait pas partie du contenu. Sinon la structure est mal pensée.

a écrit :
C'est quand même fort, je fait tout mon possible pour respecter au plus préci les standarts et voilà t'il pas qu'il n'existe rien dans le CSS pour les handicaper !

OK reprenons :
- les styles CSS sont une surcouche, comme javascript, flash et autres plugins. Ils ne font pas partie intégrante du document (HTML) et peuvent donc de ce fait être inactivés ou non fonctionnels. Il est donc hors de question de placer du contenu et de l'information essentielle dans une surcouche comme les CSS.
- les propriétés CSS aurales et speech sont exclusivement faites pour les dispositifs de lecture d'écran. D'autre propriétés sont prévues pour d'autres médias, notamment les imprimantes en relief braille.
- Séparer le contenu (HTML) du design (CSS) permet justement aux handicapés de n'avoir à se soucier que du contenu sans être parasité par des éléments de mise en page ou de décoration qui ne font que les gêner.

Bref, dire "qu'il n'existe rien dans les CSS pour les handicapés" est mal comprendre le principe.
Modifié par Raphael (15 Feb 2006 - 12:08)

Raphael marque un point

JPV dsl pas de lien pour le moment, je développe en local, page en php serveur Apache émuler avec la solution Easyphp.

Les images qui me pause problème sont des images de menu.
Mon menu est en liste a puce et au lieux d'avoir du texte écrit dans la page (X)HTML j'utilise des images stoker dans un CSS externe.

Tout çà pour une question de design (les boutons du menu on un effect d'ombre porter).
De plus je veux pouvoir modifier l'intégralité du design simplement en changent de CSS.

Bref.... sinon je croix qu'il y a une encore une autre solution orienter PHP.
En utilisant des constantes en plus du CSS
je définie une contante

define("CONSTANTE_DIR", "Template1");

et dans mon menu je pourai alors avoir <img src="<?php echo(CONSTANTE_DIR.'/img_menu_1.png'); ?>">

J'ai pas encore tester car se pause un nouveau problème
Jusqu'a présent j'utiliser l attribu "alt" pour renseigner sur le contenu de l'image. En me disant les navigateurs utilisent peut être mal cet attribu mais dans tout les cas il le prenne quand même en conte, donc c'est cool.

Seulement voila, si je teste ma méthode, là par contre il faut être sur que sa fonctionnent en le vérifiant.
Or je ne sais pas du tout de qu'utilise les handicapés comme n'avigateur ou outils divers...

Comment faire pour constater se que poura lire un aveugle ?
Modifié par polau (15 Feb 2006 - 12:14)

polau a écrit :
Je fait tout mon possible pour rendre accésible mon site a maximum de personne.
Mais là a mon grand regret je doit choisir entre ne pas le rentre accésible au handicapé ou revoir l'intégraliser de mon site au détriment du design.

Je note au passage qu'une fois de plus les hanpicapé sont ... oublier.
C'est quand même fort, je fait tout mon possible pour respecter au plus préci les standarts et voilà t'il pas qu'il n'existe rien dans le CSS pour les handicaper !

moua c'est chaut ....

En passant, ne le prends pas mal, mais prendre en compte les personnes handicapées, c'est aussi et surtout leur proposer un contenu compréhensible.
Lorsqu'un texte contient des fautes qui modifient la prononciation d'un mot, alors les lecteurs d'écran ne vont rien comprendre et prononcer les textes un peu n'importe comment, ce qui pose un réel problème à la personne qui l'écoutera.
Ici, je n'ai fait que mettre en gras les fautes qui modifient la prononciation des mots. Comme tu le vois, ça aussi c'est important

polau a écrit :
Tout çà pour une question de design

Je me contente de poser encore et toujours la même question : c'est une question de design ou de contenu ?

Tes boutons de menus, s'ils sont correctement structurés, c'est à dire avec une balise <a> et un texte de contenu réel*, ne poseront guère de soucis d'accessibilité.



* en clair le HTML doit contenir l'information et non le design : <a href="" title="">lien</a>
Le design, en CSS pourra très bien être un background sur <a>
Modifié par Raphael (15 Feb 2006 - 12:21)

hi non je le prend pas mal et tu a raison de le souligné Raphael

Mon contenu est entièrement corriger par ma princesse, faut dire que depuis mes années collège ma note la plus haute en orthographe est zero. c'est un handicap pour moi, mais j'y travaille ...
Modifié par polau (15 Feb 2006 - 12:37)

mon menu

<ul id="menu">
		<li><a href="index.php?page=page/accueil" class="accueil">&nbsp;</a></li>
		<li class="separateur">&nbsp;</li>
		<li><a href="#" class="news">&nbsp;</a></li>
		<li class="separateur">&nbsp;</li>
		<li><a href="#" class="forum">&nbsp;</a></li>
		<li class="separateur">&nbsp;</li>
		<li><a href="#" class="membres">&nbsp;</a></li>
		<li class="separateur">&nbsp;</li>
		<li><a href="#" class="tutoriaux">&nbsp;</a></li>
		<li class="separateur">&nbsp;</li>
		<li><a href="#" class="download">&nbsp;</a></li>
		<li class="separateur">&nbsp;</li>
		<li><a href="#" class="liens">&nbsp;</a></li>
	</ul>

jpv a écrit :

Mais j'aimerais bien avoir un exemple d'un cas de ce type qui me semble poser des problèmes "intrinsèques" :
Une image est un objet, ses dimensions originales sont un élément indissociable, par ailleurs dans le cas d'image extensible, sur les médias qui ne supportent pas ou mal ou partiellement CSS, c'est la taille originale qui sera utilisée.

exemple vite fait sur le gaz

raphael a écrit :

On parle encore de design et non de contenu.
Si l'image est censé faire partie du design, elle ne fait pas partie du contenu. Sinon la structure est mal pensée.

Pas si sûr, Raphaël... en gros en en général oui, mais l'exemple que je viens de mettre en ligne appréhende et traite l'image à la fois comme contenu (on peut imaginer un logo de commune à la place du texte) et comme design (l'image s'adapte graphiquement au format de page) simultanément. Je ne suis pas sûr que la structure soit mal pensée dans ce cas-là, qui, comme le disait JP, reste "exceptionnel et très circonstanciel".

Bonjour

@Arsene : Je n'avais pas compris cette notion. En fait ce que tu fais là un système à coulisse.
Nous avons bien une image dans le code.

Je pensais que tu parlais d'images à dimension relatives, dans cette exemple ce n'est pas le cas.

Je ne vois aucun sooucis à cette méthode entendu que l'information importante "ho mon beau village" est bien présente sur l'images dans le code et peut-être reprise dans le alt.
La partie image CSS ne porte aucune information ou sens ajouté, donc c'est un élément décoratif.

Jean-pierre

polau a écrit :
mon menu

Le code de menu que tu proposes est effectivement complètement inaccessible aux personnes non-voyantes puisque le texte des liens est vide (espace insécable).
C'est à éviter absolument.

Une image peut donc dans certains cas relever du design ET du contenu : en fait 2 images dans mon exemple, mais pour l'internaute ça n'en fait qu'une seule.

jpv a écrit :
entendu que l'information importante "ho mon beau village" est bien présente sur l'images dans le code et peut-être reprise dans le alt

<div id="image"><img src="html.jpg" width="450" height="202" alt="oh le beau village" /></div>

Bon, le point possitif c'est que j'ai bien comprid la notion d'image de contenu et d'image de non contenu.

Je reprend depuis de debut:

Mon menu est en menu "roll over en CSS avec une plusieur images"
Presque comme ceci http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique.
Les image de fond que j'utilise représente un logo et du texte mais le tout est une seule image (différente a chaque éllement du menu).

Donc les images que j'utilise pour le menu sont des images de design et non de contenu.

Cependant sur la page (X)HTML je n'affiche pas de texte dans le menu (je triche en utilisent un espace) et comme les images sont stoker dans le css externe, l'attribu "Alt" ne peut être renseigner se qui rend le menu totalement inaccessible aux personnes non-voyantes.

Aprés moulte réflextions.
Je pense que la solution consiste a mettre du texte pour les éllements du menu dans la page (X)HTML en fesant en sorte pour que le texte soit invisible.
Ainsi je conserve mon design de menu pour les voyants, et lorsque la page est afficher sans style le menu est accésible pour les non-voyants.

Vous suivez mon raisonnement, suis-je asser clair ?

Je sais que alpha rend le texte invisible mais ne fonctionne pas sur tout les navigateurs.

Comment rentre du texte invisible par tout les navigateurs ?

polau a écrit :
Presque comme ceci http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique.
Les image de fond que j'utilise représente un logo et du texte mais le tout est une seule image (différente a chaque éllement du menu).

En passant, tu trouveras beaucoup d'exemples ici puisque tous les menus emploient cette technique et n'utilisent qu'une seule image

polau a écrit :
Cependant sur la page (X)HTML je n'affiche pas de texte dans le menu (je triche en utilisent un espace) et comme les images sont stoker dans le css externe, l'attribu "Alt" ne peut être renseigner se qui rend le menu totalement inaccessible aux personnes non-voyantes.

Aprés moulte réflextions.
Je pense que la solution consiste a mettre du texte pour les éllements du menu dans la page (X)HTML en fesant en sorte pour que le texte soit invisible.
Ainsi je conserve mon design de menu pour les voyants, et lorsque la page est afficher sans style le menu est accésible pour les non-voyants.

Vous suivez mon raisonnement, suis-je asser clair ?

Je sais que alpha rend le texte invisible mais ne fonctionne pas sur tout les navigateurs.

Comment rentre du texte invisible par tout les navigateurs ?

Après moultes réflexions, tu aurais pu économiser beaucoup de temps en passant faire un tour dans la FAQ
http://forum.alsacreations.com/faq/index.php#item13

(lire aussi et surtout les 3 liens complémentaires associés à cet item de la FAQ)

Bonne lecture