<C²: webløg />

Courriel - email address

Avatar Denis

vendredi 18 juillet 2003
par Denis Boudreau

Titres en images vraiment accessibles

Regrettez-vous le contrôle typographique dont nous jouissions auparavant, à la sombre époque du design Web des années 90, alors que les images utilisées pour des titres nous permettaient de donner un peu de panache à un document HTML ? Depuis l'avènement des CSS, de nombreux développeurs ont abandonné avec raison cette pratique parce qu'elle portait une sérieuse entrave à l'accessibilité des documents, mais au prix d'une utilisation restreinte de polices de caractères systèmes, souvent moins intéressantes que leurs consoeures, maquillées sous PhotoShop. Résultat; un élément argumentaire de plus pour mener à la conclusion que le design CSS était morne et ennuyeux. Petit à petit, ces préjugés tombent comme des mouches, parce que l'on comprend de mieux en mieux que les CSS ne nous limitent en rien, mais qu'utilisées astucieusement, elles nous ouvrent des avenues jusqu'alors encore inexplorée. Et bien, cette époque vanille de titres en verdana est maintenant révolue ! Si je vous disais qu'il est à nouveau possible d'utiliser les images ad nauseam dans nos fichiers sans nuire d'aucune façon que ce soit à l'accessibilité de l'information, qu'en penseriez-vous ? Et si je vous disais que nous avons toujours pu, mais que nous l'ignorions ?

Une discussion rapide avec un fidèle lecteur de CYBERcodeur hier (Clément Hardouin, pour ne pas le nommer ;) hier m'a amené à découvrir un carnet de Douglas Bowman expliquant en détail une astuce pour permettre d'utiliser des images pour les titres des documents Web sans pour autant négliger d'une quelconque manière que ce soit l'accessibilité de l'information. Une véritable mine d'or et comme toujours pour ce qui touche à CSS, d'une simplicité si déconcertante qu'on se sent rapidement idiot de ne pas y avoir pensé plus tôt. À garder sous le coude, pour le jour où des titres en images seront de mise dans votre projet Web conforme, valide et accessible.

Denis Boudreau | 2003.07.18 @ 13:09

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.07.18 @ 13:38 par Eric Daspet

Mais qu'est ce que c'est que ce truc ?

C'est ce que je me suis dis en (re)lisant le lien que tu donnes. On y met du marquage supplémentaire sous forme de <span>, des identifiants sur les titres pour pouvoir y passer des images, des CSS pas génériques pour un sou (vu qu'il faut y mettre les images pour chaque titre) ...

C'est trop vite oublier que le 'alt' des images est fait pour ca. Une image mise en direct est tout autant accessible, nettement plus simple, et peut être même plus correcte.
Les images _sont_ accessibles en elle même avec la balise de texte alternatif, pourquoi chercher compliqué ?

<h1><img src='...' alt='mon titre' /></h1> c'est très bien, accessible, simple ....

Haut retour au début de la page

2003.07.18 @ 14:00 par CYBERcodeur

C'est effectivement ce que j'ai été amené à penser moi-même lorsqu'on m'a présenté l'astuce, puisque personnellement, j'utilise exactement la méthode que tu proposes pour mon <h1> qui est sur le logo tout en haut... et c'est vrai, tout ça semble très accessible.

En théorie, cette approche est tout à fait valable et je l'utilise tout le temps (ce qui n'empêche pas que bien des gens n'y ont jamais pensé encore, aussi simple cela puisse paraître -- du moins si je me fies à mon entourage immédiat), mais elle comporte un tout petit défaut que la méthode de Bowman semble régler; si ma mémoire est bonne j'ai appris récemment que le ALT n'était pas toujours adéquatement pris en compte lors de l'interprétation d'une page par des agents utilsateurs autres que nos populaires applications de type desktop comme Mozilla, Firebird, Opera et ahummm... les autres.

Si c'est vrai, cela signifierait qu'on ne peut réellement compter à 100% sur le ALT pour faire le travail d'accessibilité ... ainsi, la méthode proposée par Bowman devient vachement intéressante parce que dans un tel cas, le texte qui est dissimulé pour certains utilisateurs devient totalement visible pour les autres... au prix, je te l'accorde d'une sémantique un peu sabrée, mais à peine; quel mal un misérable petit <span> pourrait-il occasionner ?

Haut retour au début de la page

2003.07.18 @ 14:38 par Jerome

Je confirme: beaucoup de navigateurs n'exploitent pas les alt. Je pense aux pda et telephones portables.

Haut retour au début de la page

2003.07.18 @ 14:48 par Jerome

Pour info: une astuce pour rendre accessible des titres sous les navigateurs autres qu'ie5+/gecko/khtml:

Si vous avez un design complexe photoshopisé dont le logo/titre du site est bien incrusté dans tout un dessin que vous avez décidé de mettre en background par exemple, pensez à mettre juste l' <img> du logo en question dans un <h1> qui aurait pour style display: none; . Ainsi votre logo est accessible aux autres navigateurs si les css leurs sont cachés ou non analysés (NS4, pda...)

La preuve en images: http://www.via-israel.com

Inconveniant: l'image du <h1> non affichée est quand meme telechargée par les ie5+/gecko/khtml...

Haut retour au début de la page

2003.07.18 @ 15:00 par Bleizig

Un truc à ne pas oublier aussi est que si il y a abus dans l'utilisation des images, la page sera quasi innaccessible aux utilisateurs narrowband car elle sera beaucoup trop lourde à télécharger.

Haut retour au début de la page

2003.07.18 @ 15:11 par Nicolas Moreau

L'inconvénient de la méthode background-image, c'est que si l'image manque, alors le visiteur est privé de l'information, puisqu'il n'y a pas de alt, et que le texte est masqué

Haut retour au début de la page

2003.07.18 @ 15:48 par Eric Daspet

Pas vraiment d'accord Bleizig, les faibles bandes passantes n'ont qu'a ne pas télécharger les images et bénéficier des alt, tous les navigateurs classiques le font.

Apres que certains pda ne le fassent pas, comment dire ... c'est la faute du pda. Et de toute facon faire une page commune aux pda et aux navigateurs classiques, ca reste à mon avis illusoire, ca sera probablement inadapté à au moins un des deux (meme si lisible).

Haut retour au début de la page

2003.07.19 @ 17:25 par Bleizig

Je suis d'accord avec toi Eric que dans le meilleur des mondes, un browser serait assez intelligent pour reconnaitre que la page est bcp trop lourde a telecharger et il se limiterait aux alt.
Cependant, les navigateurs ne le font pas par defaut et je ne pense pas que la plupart des utilisateurs ont une quelconque idee qu'il leur serait possible de surfer plus vites avec les images desactives. Alors resultat, ils zappent ... et c'est a mon sens un defaut d'accessibilite.

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)