1174 sujets

Accessibilité du Web

Alt - Espacement avec le texte

Bonjour,

imaginons un icône error.gif, dont le visuel ne serait pas vraiment explicite. J'écris alors ceci :

<strong>
< img src ="error.gif" width ="16" height ="16" alt ="Erreur" />Votre e-mail n'est pas valide.
<strong>


Je désactive le CSS ainsi que l'affichage des images et je trouve ce rendu :

ErreurVotre e-mail n'est pas valide.

Le texte alternatif est collé au texte qui suit. Est-ce "autorisé" ?

Donc il faudrait :
- Toujours mettre un espace entre l'image et le texte (lorsque alt est renseigné) ?
- Ou alors prévoir un espace dans l'attribut alt ?
alt ="Erreur " (espace avant le guillemet fermant...)
Modifié par Newzic (09 Apr 2013 - 13:00)
Ou un padding-right sur l'image, essayez un text-indent:-1em; + display:inline-block; pour activé le contexte de formatage ?
Bien non, j'ai peut-être oublié de préciser que je parle du rendu CSS désactivé et images désactivées.

Donc je ne parle pas du rendu graphique mais uniquement du rendu textuel tel qu'il sera lu par un lecteur d'écran. Je le reformule dans mon premier post.
Modifié par Newzic (09 Apr 2013 - 12:13)
oui, mettre un espace sécable ou insécable entre l'image et le texte et avoir recours à du CSS pour le gérer c'est ce que je fais. Ceci pour le rendu mais là, je cherche un réponse sur la "bonne pratique" pour le placement d'une image ayant besoin d'un attribut alt renseigné et quand cette image fait parti d'une même phrase. Je me suis d'ailleurs posé cette question en lisant le livre "Intégration Web - Les bonnes pratiques" de Corinne Schillinger au chapitre 8.

Je me retrouve parfois confronté à ce problème lorsque j'ai une image flottante pour introduire un texte : dois-je mettre un espace entre le texte et l'image ? Uniquement si l'image à un attribut alt renseigné ?
Modifié par Newzic (09 Apr 2013 - 13:09)
Bonsoir,

Ca pose effectivement problème aux lecteurs d'écran si les mots sont collés entre eux; plus spécifiquement, c'est suceptible de changer la prononciation et du coup rendre le message inintelligible.

Cela dit, plusieurs choses à noter :

1 - Tu n'as pas vraiment le contrôle sur la présence ou non d'un espace à cet endroit précis dans le rendu texte. Les navigateurs font ce qu'ils veulent: certains ajoutent l'espace pour séparer le rendu texte des deux noeuds du DOM alors que d'autres collent toujours tout systématiquement même quand ça ne se justifie à priori pas; certains suppriment les blancs jugés inutiles au début et/ou à la fin de chaque élément ou attributs tandis que d'autres ne le font pas... rien de précis n'est spécifié dans les normes.
L'espace insécable peut être une solution, mais je me doute bien que ça pose problème dans le rendu graphique...

2 - Les lecteurs d'écran eux-mêmes sont aussi assez inégalitaires sur le sujet. Ils ne découpent pas les textes provenant de plusieurs éléments à la suite de la même façon. En principe ça dépend fortement du type des éléments impliqués et il faut donc faire attention.
N.B. Ne pas confondre rendu texte et rendu par un lecteur d'écran; ce n'est pas pareil

Par contre, pour te rassurer, dans ton exemple avec image classique et texte, tous les lecteurs d'écran que je connais séparent clairement le texte alternatif de l'image et le texte qui suit; on entend toujours bien deux mots séparés et non collés.

Ca en aurait été autrement si tu avais utilisé ce genre de code, malheureusement courant (CSS inline à des fins illustratives) :

<span style="background-image:URL('truc.png'); width:100px; height:100px; display:block; text-indent:-10000000px;">Un vrai faux bouton qui ressemble à un bouton mais qui n'en est pas un d'un point de vue sémantique</span>
Sujet clos
Aller à