Images invisibles / menus d'évitement / html5 [résolu]

Bonjour,

Je m'apprête à lancer un petit blog de cuisine, et j'essaie d'écrire la partie html/css de façon à être un maximum accessible. ( je ne sais pas si des non-voyants ont une chance d'être intéressés par des recettes, mais ça n'est pas à moi d'en juger, et autant développer "propre" ! ). Après lecture de nombreuses pages d'alsacréations, de W3C schools et quelques autres, il me reste des questions :

Je me demandais donc s'il serait intéressant de placer à certains endroits des images invisibles ( par exemple 1px/1px transparent ou de la couleur du fond ) ayant un " alt" un peu développé, afin d'afficher plus d'informations pour les navigateurs en mode texte ou synthèse vocale que pour les navigateurs traditionnels. En écrivant cela je me rend compte qu'il existe peut être encore plus simple ( une balise img sans src ? une balise spéciale " affichage en mode texte" ? ). !! Edit : en me baladant sur le forum, je vois qu'il existe une pratique de ce genre comme référencement malhonnête. J'en déduis que mon idée était très mauvaise, mais je me demande toujours s'il existe une balise dédiée à l'affichage dans les navigateurs texte/vocaux ?

Je me demande également comment faire pour les menus d'évitement ( j'ai lu l'article " les liens d'évitement" de jpv ) : utiliser <a> comme ancre, sachant qu'elles seront mal comprises par les logiciels pour non-voyants, ne me plaît pas. Mais je n'ai pas trouvé plus satisfaisant. Avez-vous une solution ?

J'espérais enfin utiliser un peu de html5 mais j'ai en grande partie renoncé en voyant tout ce qu'il fallait faire pour rester compatible. J'ai cependant ajouté à plusieurs endroits des role=" " en me disant que ça ne pouvait pas faire de mal : est-ce une erreur ? J'ai utilisé les roles suivants : banner, contentinfo, 3 fois navigation, main. Je n'ai pas utilisé "article" par ce que je n'ai pas tout à fait compris ce dont il s'agit: j'ai lu sur le forum qu'il ne fallait pas plus de 5 à 7 de ces roles au total sur la page, et pour un blog il y aura toujours au moins 4 articles par page...

J'ai opté pour du xhtml 1.0 strict, valide, mais je ne validerai pas mon css car j'utilise les jolis bords arrondis du css3 ( le graal ! ).

Merci beaucoup,


Yate.

(edit: correction de maladresses. )
Modifié par Yate (06 Sep 2010 - 11:46)

Salut,

Yate a écrit :
( je ne sais pas si des non-voyants ont une chance d'être intéressés par des recettes, mais ça n'est pas à moi d'en juger, et autant développer "propre" ! )

D'une part, je ne vois pas en quoi la cécité empêcherait un non-voyant de s'intéresser aux recettes de cuisine et, d'autre part, l'accessibilité du Web ne se réduit pas aux aveugles et malvoyants.

Yate a écrit :
Je me demandais donc s'il serait intéressant de placer à certains endroits des images invisibles ( par exemple 1px/1px transparent ou de la couleur du fond ) ayant un " alt" un peu développé, afin d'afficher plus d'informations pour les navigateurs en mode texte ou synthèse vocale que pour les navigateurs traditionnels. En écrivant cela je me rend compte qu'il existe peut être encore plus simple ( une balise img sans src ? une balise spéciale " affichage en mode texte" ? ). !! Edit : en me baladant sur le forum, je vois qu'il existe une pratique de ce genre comme référencement malhonnête. J'en déduis que mon idée était très mauvaise, mais je me demande toujours s'il existe une balise dédiée à l'affichage dans les navigateurs texte/vocaux ?

Pas besoin d'insérer des images invisibles pour améliorer l'accessibilité. Sache que toute image codée en dur en HTML (élément img) doit comporter une alternative textuelle (l'attribut alt est obligatoire, de même que l'attribut src, soit dit en passant). Si ton image véhicule du contenu, tu dois renseigner l'attribut alt avec l'alternative textuelle qui convient ; le contenu de l'attribut alt est affiché par les navigateurs graphiques lorsque l'image n'est pas chargée, ainsi que par les navigateurs textuels, et restitué par les lecteurs d'écran (que ce soit en synthèse vocale ou en affichage sur une plage braille). En revanche, si l'image est purement décorative, soit tu renseignes un attribut alt vide (alt="") soit tu affiches l'image en question en arrière-plan en CSS ; dans ces deux derniers cas, l'image sera ignorée des lecteurs d'écran.

Yate a écrit :
Je me demande également comment faire pour les menus d'évitement ( j'ai lu l'article " les liens d'évitement" de jpv ) : utiliser <a> comme ancre, sachant qu'elles seront mal comprises par les logiciels pour non-voyants, ne me plaît pas. Mais je n'ai pas trouvé plus satisfaisant. Avez-vous une solution ?

Tu peux utiliser des liens d'évitement et utiliser l'élément a comme ancre sans problème. En ce qui concerne les ancres, tu as deux solutions :
1.

<p><a href="#contenu">Aller au contenu</a></p>
<div>
  <a id="contenu" name="contenu"></a>
  <!-- Le contenu du contenu -->
</div>

2.

<p><a href="#contenu">Aller au contenu</a></p>
<div id="contenu">
  <!-- Le contenu du contenu -->
</div>

En fait, le problème qui peut se poser est la présence de l'attribut href dans une ancre nommée (pour pallier le comportement inapproprié de certains navigateurs), comme suit :

<a href="#contenu" id="contenu" name="contenu"></a>

Dans ce cas, les aides techniques (comme les lecteurs d'écran) y verront un lien vide factice. Bref, si tu ne veux pas te casser la tête, utilise la deuxième solution que j'ai indiquée (utilisation de l'attribut id dans un élément autre que l'élément a).

Yate a écrit :
J'espérais enfin utiliser un peu de html5 mais j'ai en grande partie renoncé en voyant tout ce qu'il fallait faire pour rester compatible. J'ai cependant ajouté à plusieurs endroits des role=" " en me disant que ça ne pouvait pas faire de mal : est-ce une erreur ? J'ai utilisé les roles suivants : banner, contentinfo, 3 fois navigation, main. Je n'ai pas utilisé "article" par ce que je n'ai pas tout à fait compris ce dont il s'agit: j'ai lu sur le forum qu'il ne fallait pas plus de 5 à 7 de ces roles au total sur la page, et pour un blog il y aura toujours au moins 4 articles par page...

L'attribut role est un attribut ARIA et son utilisation n'est pas une erreur. Le principal souci est l'implémentation d'ARIA dans les navigateurs (IE ne l'implémente qu'à partir de la version 8).

Yate a écrit :
J'ai opté pour du xhtml 1.0 strict, valide, mais je ne validerai pas mon css car j'utilise les jolis bords arrondis du css3 ( le graal ! ).

Le validateur CSS du W3C te permet de valider une feuille de style CSS 3.

Hello Yate et bienvenue,

juste un petit détail : l'article sur les liens d'évitement date de 2006 et la mise en garde sur la compatibilité n'est plus de mise (cf. l'exemple 2 de Victor qui va bien).

a écrit :
D'une part, je ne vois pas en quoi la cécité empêcherait un non-voyant de s'intéresser aux recettes de cuisine et, d'autre part, l'accessibilité du Web ne se réduit pas aux aveugles et malvoyants. cligne

Désolée, j'étais juste un peu gênée de faire tant d'efforts sur l'accessibilité sachant que mon site n'aura surement que très très peu de traffic... c'était une maladroite tentative de me justifier.

a écrit :

Pas besoin d'insérer des images invisibles pour améliorer l'accessibilité. Sache que toute image codée en dur en HTML (élément img) doit comporter une alternative textuelle (l'attribut alt est obligatoire, de même que l'attribut src, soit dit en passant). Si ton image véhicule du contenu, tu dois renseigner l'attribut alt avec l'alternative textuelle qui convient ; le contenu de l'attribut alt est affiché par les navigateurs graphiques lorsque l'image n'est pas chargée, ainsi que par les navigateurs textuels, et restitué par les lecteurs d'écran (que ce soit en synthèse vocale ou en affichage sur une plage braille). En revanche, si l'image est purement décorative, soit tu renseignes un attribut alt vide (alt="") soit tu affiches l'image en question en arrière-plan en CSS ; dans ces deux derniers cas, l'image sera ignorée des lecteurs d'écran.

Merci beaucoup, j'avais bien conscience de tout cela, ma question était un peu tordue, je me demandais en fait comment ajouter du texte pour certains utilisateurs qui peuvent en avoir plus besoin que d'autres. M'enfin, je suppose qu'il n'y a rien de prévu et qu'une page bien codée se suffit à elle même.


Pour l'ancre avec les ID, cela me sauve vraiment ! Pour le coup je suis ravie d'avoir posté !

Quant au CSS3, ça ne passera pas puisque pour les coins arrondis il faut encore des -moz bidules et autres préfixes propriétaires.

Bon, je pense que ce sujet est résolu, et je vous remercie encore !