Accessibilité & Span

Salut.

Je viens soulever quelques questions qui ont déjà été abordé sur pas mal d'articles dont AlsacréationS ...

Je suis en train de développer un site assez "graphique", donc pour une question d'accessibilité, je passe par les CSS pour afficher les images.

Exemple : Dans un menu (Catégories) suivit d'une liste de lien vers différentes catégories, le titre de cette colonne (Catégories) est une image graphique, donc je me suis servi des CSS pour l'afficher tout en ayant un texte de remplacement (Catégories) entouré de Span.

L'image : http://img517.imageshack.us/img517/5185/catjf.jpg

J'ai lu et relu l'article sur "Halte aux display:none", mais j'ai encore quelques doutes.

Voici le code concerné :

<div id="categories">
<div class="cat-haut"><span>Catégories</span></div>
<div class="cat-milieu">
<ul class="txt-categories">
<li><h2><a href="#" title="Tshirts Homme">Tshirts Homme</a></h2></li>
<li><h2><a href="#" title="Tshirts Femme">Tshirts Femme</a></h2></li>
<li><h2><a href="#" title="Accessoires">Accessoires</a></h2></li>
</ul>
</div>
<div class="cat-bas"></div>
</div>

#categories {
width:215px;
margin-top:5px;
margin-right:20px;
margin-bottom:20px;
}
.cat-haut {
width:211px;
height:58px;
background-image:url(interne/sprites2.png);
background-repeat:no-repeat;
background-position:-382px -839px;
}
.cat-haut span {
width:105px;
height:28px;
background-image:url(interne/sprites2.png);
background-repeat:no-repeat;
background-position:-640px -44px;
float:left;
margin-left:50px;
margin-top:20px;
text-indent:-5000px;
}
.cat-milieu {
width:211px;
background-image:url(interne/cat-milieu.png);
background-repeat:repeat-y;
position: relative;
}
.cat-bas {
width:211px;
height:47px;
background-image:url(interne/sprites2.png);
background-repeat:no-repeat;
background-position:-382px -897px;
margin-top:-30px;
}

Est-ce la bonne façon de faire ?

Dans ce cas présent le texte n'est pas visible mais l'image oui, et lorsque je désactive les CSS, l'image n'est pas visible mais le texte oui.

Est-ce correct ? J'ai la vague impression de me compliquer la vie en fait
Modifié par yank (13 Jun 2010 - 15:48)

Et dans la CSS au lieu de faire :

span { display:none;}

je fais :

span { float:left; text-indent:-5000px;}

pour tous les autres textes ou titres à remplacer par une image graphique.

Est-ce la meilleure solution ?
Modifié par yank (13 Jun 2010 - 15:39)

Sinon faire ce que j'avais au début, intégrer directement l'image du titre dans le HTML avec le ALT correctement défini.

Cette méthode me semble la plus propre mais je voulais éviter d'inclure trop d'images dans le HTML (car beaucoup de titres graphiques) et quand on désactive les CSS de voir le texte au lieu de l'image source.

Si quelqu'un peut me donner son avis sur la question, je tourne en rond

Merci
Modifié par yank (13 Jun 2010 - 16:11)

Bonjour,

la meilleure solution est celle des images incluses dans le code HTML.
Avec le remplacement de texte par des images via CSS, si tu désactives les images mais pas les CSS, tu perds les principales informations de ta page (titres, ...). Avec des éléments img tu n'as pas ce problème.

CSS ou HTML tu as autant d'images à charger pour afficher une page (à moins que tu n'utilises des sprites CSS mais pour des titres susceptibles d'évoluer régulièrement et différents d'une page à l'autre je vois pas bien l'intérêt).

Si tu utilises une police libre (et qui ne pèse pas 400 ko ...), il y a @font-face

Felipe a écrit :
Bonjour,
la meilleure solution est celle des images incluses dans le code HTML.
Avec le remplacement de texte par des images via CSS, si tu désactives les images mais pas les CSS, tu perds les principales informations de ta page (titres, ...). Avec des éléments img tu n'as pas ce problème.
CSS ou HTML tu as autant d'images à charger pour afficher une page (à moins que tu n'utilises des sprites CSS mais pour des titres susceptibles d'évoluer régulièrement et différents d'une page à l'autre je vois pas bien l'intérêt).
Si tu utilises une police libre (et qui ne pèse pas 400 ko ...), il y a @font-face

Merci pour ta réponse.

a écrit :
la meilleure solution est celle des images incluses dans le code HTML.

C'est ce que j'ai fini par me dire, effectivement.

Sinon oui j'utilise des sprites, par exemple concernant ce titre, il n'évolue pas sur les autres pages, c'est pour cela que je l'ai inclus dans les sprites comme les autres titres... mais bon, je crois que je vais refaire mes sprites en retirant ces titres et les inclurent directement dans le HTML.

@font-face j'y ai pensé, mais je préfère la bonne vieille solution des images + ALT à la rigueur

Merci

En passant, quand je regarde l'image je vois:
- Un titre "Catégories".
- Une liste de liens.

Tu as balisé le titre sans utiliser d'élément HN, et chaque lien en H2 alors que ce ne sont pas du tout des titres.

Boire ou coder, il faut choisir.