[Accessibilité] Affichage d'une page sans CSS - cas du logo

Bonjour tout le monde,

Lors de ma formation (dans le web), un professeur avait indiqué qu'il était important que le logo d'un site ne soit pas intégré en tant qu'image de fond mais en tant qu'image "normale" dans la structure HTML. En effet, pour des raisons d'accessibilité, en l'absence de CSS, cela permet au visiteur d'identifier clairement le site qu'il visite.

N'ayant trouvé aucune norme sur ce point, j'aimerais savoir si certains d'entre vous seraient à même de me communiquer d'avantage d'informations. Je doute qu'il y ai des normes sur ce genre de "détails" (qui n'en sont pas forcément au final) mais il existe peut-être des bonnes pratiques ou des usages courants sur ce point précis.

A contrario, ne serait-il également pas plus accessible d'avoir dans la structure HTML, un élément qui auraient pour background le logo et pour contenu textuel le nom du site, sa baseline, etc., texte ensuite masqué avec un text-indent négatif. Ainsi, en cas d'absence de CSS, l'information textuelle serait certainement plus claire que l'information visuelle (même si on peu conserver les 2 en remplissant consciencieusement l'alternative textuelle de l'image).

Dans l'attente de vos retours :)


PS : je note que dans la forêt de forums que propose developpez.net, aucun n'est consacré à l'accessibilité web :/ Dommage.

Bonsoir,
pour faire simple...
- si ton image est porteuse de contenu significatif, c'est généralement le cas pour une image LOGO, c'est dans la balise IMG qu'elle doit se trouver.
- si c'est pour ajouter de "l'élégance" à la page elle peut être mise en background.

Coté des bonnes pratiques, ne pas oublier les attributs alt et title des balises IMG.

Je dirais qu'un logo indique "la marque de fabrique" et identifie une association. Il est donc normal de le trouver la plupart du temps dans la bannière ou à un endroit bien visible du site.
Mais il est possible de le mettre en background-image, mais je pense que ce que le formateur a voulu dire, c'est d'éviter que ce logo ne rende le contenu du site difficile à lire, notamment le texte. Il faut alors en faire comme un filigrane mais il perd alors de sa visibilité et de son impact.

Citation:

---

Envoyé par GxiGlon

Je doute qu'il y ai des normes sur ce genre de "détails" (qui n'en sont pas forcément au final)

---

Tests de contrôles 10.2 et 10.3 d'AccessiWeb.

Citation:

---

Envoyé par GxiGlon

A contrario, ne serait-il également pas plus accessible d'avoir dans la structure HTML, un élément qui auraient pour background le logo et pour contenu textuel le nom du site, sa baseline, etc., texte ensuite masqué avec un text-indent négatif.

---

Non, ceux qui n'affichent pas les images n'auront pas accès à ton contenu caché.

Citation:

---

Envoyé par NoSmoking

Coté des bonnes pratiques, ne pas oublier les attributs alt et title des balises IMG.

---

Dupliquer systématiquement la valeur du alt dans le title est une mauvaise pratique ;)
L'attribut title sert à apporter une information complémentaire afin de signaler à l'utilisateur la fonction de l'image ou du lien.

Citation:

---

Dupliquer systématiquement la valeur du alt dans le title est une mauvaise pratique ;)
L'attribut title sert à apporter une information complémentaire afin de signaler à l'utilisateur la fonction de l'image ou du lien.

---

Oui l'attribut title sert en quelque sorte de légende à l'image, souvent via une info-bulle.
Mais attention , certains navigateurs (tel que Microsoft Internet Explorer) utilisent le title au lieu du alt en remplacement de l'image si l'affichage des images est désactivé ou si les images ne peuvent se charger.

Citation:

---

Envoyé par miss_socrates

Mais attention , certains navigateurs (tel que Microsoft Internet Explorer) utilisent le title au lieu du alt en remplacement de l'image si l'affichage des images est désactivé ou si les images ne peuvent se charger.

---

8O J'ai jamais rencontré ce bug, je viens même d'essayer sur IE6 - 9.

Citation:

---

Envoyé par Macmillenium

Citation:

---

Envoyé par NoSmoking

Coté des bonnes pratiques, ne pas oublier les attributs alt et title des balises IMG.

---

Dupliquer systématiquement la valeur du alt dans le title est une mauvaise pratique :wink:
L'attribut title sert à apporter une information complémentaire afin de signaler à l'utilisateur la fonction de l'image ou du lien.

---

:ccool: Tout à fait, j'ai été un peu court en explication sur cette phrase.

Citation:

---

Envoyé par Macmillenium

Citation:

---

Envoyé par GxiGloN

A contrario, ne serait-il également pas plus accessible d'avoir dans la structure HTML, un élément qui auraient pour background le logo et pour contenu textuel le nom du site, sa baseline, etc., texte ensuite masqué avec un text-indent négatif. Ainsi, en cas d'absence de CSS, l'information textuelle serait certainement plus claire que l'information visuelle (même si on peu conserver les 2 en remplissant consciencieusement l'alternative textuelle de l'image).

---

Non, ceux qui n'affichent pas les images n'auront pas accès à ton contenu caché.

---

Le background étant sur un élément de type block et non sur une image, donc la problématique des images non-affichées ne se serait pas posée :)


J'avais en réalité parfaitement intégré la notion de "image porteuse de contenu = image incluse dans le code HTML". Je pense qu'en réalité, la question que je me posais était plus de savoir si un logo avait plus de sens qu'une alternative textuelle, souvent plus lisible ? A priori oui donc.

Citation:

---

en cas d'absence de CSS

---

Par curiosité, ça signifie quoi ?

Citation:

---

Envoyé par GxiGlon

Le background étant sur un élément de type block et non sur une image, donc la problématique des images non-affichées ne se serait pas posée :)

---

Je ne vois pas trop le rapport.
Tu parles bien de cette technique? :

Code:

---

1 2	<div id="logo">Ton logo, bla bla</div>

---

Code:

---

1 2 3 4 5

#logo { background:url(ton logo); text-indent:-9999px; }

---

Si c'est ça, ton logo devient inaccessible si les images ne s'affichent pas alors que CSS est activé.