1178 sujets

Accessibilité du Web

Bonjour,

Certaines images sont des éléments de navigation de mon site.
Ces images sont définies via ma CSS, avec l'attribut background d'une classe.
Pour diverses raisons, je ne peux pas modifier cela.

Le problème est que lorsque je désactive ma CSS, ces images n'apparaissent plus et mes barres de navigations ne sont donc plus visibles.

1) y a t'il un moyen de paramétrer une alternative textuelle à mes images dans ce cas

2) Est ce que d'un point de vue "accessiweb" ou "RGAA", je peux dire que le plan de mon site peut-être considéré comme "une alternative"

Merci beaucoup pour vos réponses
Modifié par proutz (08 Jul 2008 - 16:36)
Bonjour,

Pour faire court,
1. non

2. non

Pour faire plus long, la navigation au sein d'une page ou d'un groupe de pages est une fonctionnalité. Cette fonctionnalité repose sur des liens. Ces liens sont une information. Par conséquent, ils doivent être disponibles dans le code HTML, de manière à être accessible sans javascript et/ou CSS (à une réserve près: s'ils pointent vers des fonctionnalités annexes qui ne sont disponibles qu'avec javascript activé; or la navigation n'est pas annexe).

Les contenus dans les feuilles de style sont interdits, car ils sont inaccessibles aux personnes utilisant un outil de consultation ne supportant pas ou mal les CSS. En effet, s'il s'agit de contenu graphique, il est impossible de fournir une alternative textuelle. Et s'il s'agit de contenu textuel (par exemple à l'aide de la propriété content), alors... eh bien, il n'y a pas d'alternative non plus Smiley cligne .

Les pages vers lesquelles tu lies sont certes présentes dans le plan du site, mais franchement, penses-tu à utiliser un plan du site quand tu as besoin de naviguer? La fonction du plan de site (tel que je le conçois) est de fournir une vue d'ensemble de la taxonomie utilisée sur le site, pour pouvoir chercher une page en particulier. La barre de navigation a fait un tri pertinent des pages qui permettent d'être aiguillé dans le site...
Modifié par Gilles (08 Jul 2008 - 17:34)
Notons tout de même que si les liens ont un contenu texte (donc intitulés des liens en texte dans le code HTML), on peut masquer le texte par différents procédés, et afficher une image de fond.
Ce n'est pas une solution accessible, mais c'est déjà plus accessible, ou moins pire.
Euh, à la réflexion, j'ai une question : même quand tes images sont présentes (css actives) on fait comment pour cliquer dessus ? J'imagine donc que tu dois avoir un dispositif quelconque avec quelque chose qui ressemble à un a href quelque part, non ? On pourrait s'appuyer là-dessus ?
1 - tu mets un title dans le <a href, et ça sera déjà mieux, ou moins pire. Mais bon, ce n'est quand même pas le top. Tu ferais mieux de mettre tes images en dur dans le HTML, tu ajouteras du javascript si tu veux faire de jolis effets par la suite, c'est toujours possible.

2 - Le plan du site est un complément, pas une alternative.
a écrit :
1) y a t'il un moyen de paramétrer une alternative textuelle à mes images dans ce cas


Ce n'est pas à proprement parler un texte alternatif (comme alt pour les balises <img>), mais un des moyens que j'utilise est celui-ci :

J'imagine que ton menu peut ressembler à ça :


<ul id="menu">
<li class="accueil"></li>
<li class="projets"></li>
<li class="contacts"></li>
</ul>


Il te suffit d'écrire ton "texte alternatif" entre les balises <li></li> et pour ne pas que ça apparaisse si ton CSS est activé, de mettre le text-indent des ul li à -5000px.

Il y a d'autres manières et certainement que ton code est différent de celui que je te propose, mais c'est pour l'exemple Smiley cligne !

A plus,
swissboy
très mauvaise solution car le problème restera le même lorsque tu désactive les images mais pas les CSS (des zones cliquables vides sans texte puisqu'il est en text indent négatif)
je confirme, la solution fonctionne bien lorsque la css est désactivée, mais pas sans image et avec css...
Modifié par proutz (10 Jul 2008 - 11:53)
Modérateur
Salut,

goetsu a écrit :
très mauvaise solution car le problème restera le même lorsque tu désactive les images mais pas les CSS (des zones cliquables vides sans texte puisqu'il est en text indent négatif)
Si on fait un test de présence des images, on peut mettre le texte en dur et le remplacer par une image de fond tout en masquant ce texte via l'ajout d'une classe css par js, non ?

Cela peut permettre de ne se servir que d'une image unique et donc de diminuer le nombre de hits sur le serveur. (en revanche, la dégradation est plus forte qu'avec une image en dur lorsque js n'est pas actif Smiley murf )
Arsene a écrit :
Euh, à la réflexion, j'ai une question : même quand tes images sont présentes (css actives) on fait comment pour cliquer dessus ? J'imagine donc que tu dois avoir un dispositif quelconque avec quelque chose qui ressemble à un a href quelque part, non ? On pourrait s'appuyer là-dessus ?


Excuse je n'avais pas vu ta question.
J'ai un href (sans texte) dans mes li.
On peut donc effectivement se baser là dessus, d'où la solution de swissboy qui fonctionne bien sauf dans le cas énoncé par goetsu.
Modifié par proutz (10 Jul 2008 - 12:00)
et si je fais ca :

- Title dans HREF
- Texte dans les li (indenté par la CSS)
- et un petit gif ou png transparent (avec un alt oeuf corse) dans mon html

vous en pensez quoi ?
goetsu a écrit :
très mauvaise solution car le problème restera le même lorsque tu désactive les images mais pas les CSS (des zones cliquables vides sans texte puisqu'il est en text indent négatif)

C'est vrai. En même temps il était demandé comment faire lorsque l'on désactive la feuille de style Smiley cligne .
goetsu a écrit :
très mauvaise solution car le problème restera le même lorsque tu désactive les images mais pas les CSS (des zones cliquables vides sans texte puisqu'il est en text indent négatif)

C'est une solution qui n'est certes pas accessible, mais ça n'en fait pas une «très mauvaise solution». Elle est déjà sensiblement meilleure que la même chose sans texte HTML dans les liens, et meilleure également que le texte masqué à coup de display: none ou visibility: hidden. Il reste effectivement un cas d'utilisation problématique, mais ce cas est déjà plus rare.

Je ne la recommande pas pour autant. Un peu plus haut, je la mentionnais avec l'avertissement suivant:
a écrit :
Ce n'est pas une solution accessible, mais c'est déjà plus accessible, ou moins pire.