Alt title images et liens

(reprise du message précédent)

En fait, l'exemple de Florent doit bien être compris comme une image non cliquable et donc sans action possible (le terme bouton-picto peut être mal compris). Le title n'est alors plus dans un cadre ergonomique quand il se trouve sur un lien.

Dans un contexte d'image non cliquable, le title n'est qu'un plus ergonomique pour véhiculer un sens que l'image ne saurait transmettre par elle-même à tous les utilisateurs.

L'accessibilité n'est pas là pour faire comprendre mais pour que chaque utilisateur ait la même information. D'où la remarque pertinente de Florent qui ne remet nullement en cause la bonne démarche ergonomique de jeanmark .

Hors d'un lien ? C'est même pas tabulé ... Il n'y a qu'avec une souris et en passant dessus (alors qu'il n'y a a priori pas de raison de le faire) qu'on va découvrir une infobulle.

yodaswii a écrit :
Plus je lis et participe à des discussions sur cet attribut title plus je me dis qu'il a un statut bâtard et qu'il y a vraiment besoin d'éclaircir l'utilité de celui-ci.

Et commencer par l'implémenter correctement dans les navigateurs, yop (je parle pas d'IE avec la vieille confusion alt vs title mais de tous les navigateurs où title n'est pas accessible au clavier sans lecteur d'écran)

yodaswii a écrit :
En fait, l'exemple de Florent doit bien être compris comme une image non cliquable et donc sans action possible (le terme bouton-picto peut être mal compris).

En fait je voulais mettre un lien dans l'exemple, mais dans l'absolu ça pourrait aussi être un élément BUTTON pour une interface scriptée. Donc je me suis concentré sur le contenu du lien ou bouton.
Modifié par Florent V. (11 Nov 2010 - 14:18)

Dans ce cas petite correction :

<a href="#"      title="Nom de l'action et des infos complémentaires">
  <img src="button-nomdelaction.png"      alt="Nom de l'action" >
</a>

Le title se met sur le a, le alt sur l'image.
Le title reprend les infos du alt (pas forcément au mot près) ET y ajoute des infos

Felipe,

Merci pour tes précisions.

Seulement je ne suis pas complètement d'accord avec l'exemple de code que tu fournis. Je m'explique :
Ce qui va te permettre de réellement mettre en oeuvre l'accessibilité, dans le cas d'une image lien, comme dans ton exemple c'est précisément le contenu de l'attribut alt.

Nous avons par ailleurs évoqué le fait que le title avait toutes les chances de ne pas être (sauf paramétrage utilisateur) restitué par la technologie d'assistance. Et qu'il serait utile à certains utilisateurs en tant que "tooltip" affiché.

Or dans ton exemple, le contenu que tu prêtes à l'attribut alt :

alt="Nom de l'action"

est moins précis que le title que tu donnes en exemple :

title="Nom de l'action et des infos complémentaires"

Personnellement, je ne validerai pas cette solution dans le cas d'une "image lien".

Par contre, ta solution s'avère utile pour expliciter un lien.
Modifié par jeanmark (11 Nov 2010 - 19:37)

La seule chose pouvant être invalidante (en terme d'accessibilité) dans le code de Felipe est la pertinence du title. Le fait que l'alternative soit moins fournie que le title n'est pas invalidant. La vérification porte juste sur la pertinence de l'alternative et la pertinence du title.

Différents niveaux d'interprétation d'une image avec le référentiel AW :
- <img /> sans lien : à traiter dans la thématique 1 images ;
- <img /> avec lien : à traiter dans la thématique 6 liens ;
- <input type="image" /> : à traiter dans la thématique 1 images.

Dans le cas, de l'image sans lien :

<img src="monimage.png" alt="Description de mon image" />

l'ajout d'un attribut title n'est pas invalidant et reste plus du ressort de l'ergonomie.

Dans le cas de l'image avec lien :

<a href="#" title="Nom de l'action et des infos complémentaires"><img src="button-nomdelaction.png" alt="Nom de l'action" /></a>

l'attribut title doit être pertinent pour valider le critère 6.2 d'AW "[Bronze] Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?" (ça implique aussi le 6.1 "[Bronze] Chaque lien est-il explicite (hors cas particuliers) ?").

De fait, l'attribut title sur tout autre élément qu'un lien ou un cadre n'est jamais invalidant. On pourrait très bien avoir ce que propose Florent :

<a href="#"><img src="button-nomdelaction.png" alt="Nom de l'action" title="Nom de l'action" /></a>

sans pouvoir dire quoi que ce soit ... d'ailleurs si on y réfléchit une utilisation comme celle-ci permet de se préserver une invalidité du 6.2 avec un code du genre :

<a href="#" title="Nom de l'action"><img src="button-nomdelaction.png" alt="Nom de l'action" /></a>

où, pour le coup, la pertinence du title est toquable. Erreur de ma part : Par exception, un titre de lien identique à l'intitulé est accepté dans le seul cas d'un lien image (lien ne contenant que des images), une icône par exemple.

Felipe a écrit :
Hors d'un lien ? C'est même pas tabulé ... Il n'y a qu'avec une souris et en passant dessus (alors qu'il n'y a a priori pas de raison de le faire) qu'on va découvrir une infobulle.

Avec un tabindex="0" sur un élément non focusable ça devrait le faire.
Le survol souris me semble instinctif sur une image où le sens n'est pas total (cas ergonomique).

Felipe a écrit :
Et commencer par l'implémenter correctement dans les navigateurs, yop (je parle pas d'IE avec la vieille confusion alt vs title mais de tous les navigateurs où title n'est pas accessible au clavier sans lecteur d'écran)

C'est là où le bas blesse. Il me semble que rien n'est indiqué aux éditeurs sur l'implémentation du title dans un contexte navigation au clavier. Je suppute d'ailleurs que la solution "texte caché pour expliciter un lien" soit déconseillée par les référentiels actuels en attendant une amélioration du côté du title.

Entre cette implémentation incomplète et le fait qu'on peut le mettre sur n'importe quel élément, y a de quoi se tirer les cheveux.
Modifié par yodaswii (12 Nov 2010 - 11:28)

Souvenez vous :

Le but était de rendre explicite la fonction d'un pictogramme dont le traitement graphique laissait à désirer.

La bonne démarche pour ce qui est de l'accessibilité est d'avoir un attribut alt pertinent qui va venir donner un maximum d'information sur la fonction du picto.

Franchement quel est l'intérêt de doubler ton alt d'un title qui vient expliciter une chose que tu peux d'ores et déjà faire à l'aide de l'attribut alt si ce n'est bien sûr de provoquer l'affichage du tooltip.

Le alt, ben tu es sûr qu'il sera correctement restitué. Pourquoi compliquer lorsqu'on peut faire simple ?



Moi je trouve pas ton utilisation du title très pertinente au regard du critère 6.2 si ce n'est le fait de dire que tu l'utilise pour apporter un complément d'informations que tu pouvais déjà apporter et restituer à un utilisateur non voyant par une bonne utilisation de l'attribut alt.
Modifié par jeanmark (11 Nov 2010 - 22:44)

jeanmark a écrit :
Le alt, ben tu es sûr qu'il sera correctement restitué. Pourquoi compliquer lorsqu'on peut faire simple ?

Sauf que tu omets la restitution de l'information pour un utilisateur de navigateur graphique.

Si j'ai un bouton où il est écrit "Télécharger le rapport" avec un logo PDF à sa droite et que j'ai le code suivant :

<a href="rapport.pdf"><img src="pdf.png" alt="Télécharger le rapport n°1 au format PDF (150ko)" /></a>

En tant qu'utilisateur de synthèse vocale je n'ai pas la même info que l'utilisateur de navigateur graphique. En accessibilité, on doit avoir la même info. L'attribut title permet alors de fournir des infos complémentaires disponibles à tous (contrairement à l'alternative textuelle).

jeanmark a écrit :
... si ce n'est le fait de dire que tu l'utilise pour apporter un complément d'informations que tu pouvais déjà apporter et restituer à un utilisateur non voyant par une bonne utilisation de l'attribut alt.

Complément que je n'ai pas en étant "voyant" .
Modifié par yodaswii (11 Nov 2010 - 22:40)

yodaswii a écrit :

Sauf que tu omets la restitution de l'information pour un utilisateur de navigateur graphique.

Soyons clairs, je pense car nous semblons tourner en rond.
Je n'ai pas suggéré de ne pas utiliser l'attribut title qui en effet par l'intermédiaire du "tooltip" va profiter à tous les utilisateurs. ce qui encore une fois relève plus de l'ergonomie.

J'ai juste suggéré dans l'hypothèse ou tu utilise l'attribut title, attention, dans notre cas précis d'un lien image que sa valeur soit identique à celle de l'attribut alt, dès lors que tu as un alt déjà pertinent.

Pourquoi l'utilisateur voyant aurait t'il droit à plus d'informations que l'utilisateur non voyant. J'avoue ne pas comprendre ?
Modifié par jeanmark (11 Nov 2010 - 23:04)

jeanmark a écrit :
Pourquoi l'utilisateur voyant aurait t'il droit à plus d'informations que l'utilisateur non voyant. J'avoue ne pas comprendre ?

Nullement les deux doivent avoir la même information .

jeanmark a écrit :
Soyons clairs et je vais arrêter ici, je pense car nous semblons tourner en rond.
Je n'ai pas suggéré de ne pas utiliser l'attribut title qui en effet par l'intermédiaire du "tooltip" va profiter à tous les utilisateurs. ce qui encore une fois relève plus de l'ergonomie.

Non, ça ne tourne pas en rond. C'est juste un sujet pas simple .

Le title du lien n'est pas ergonomique justement : il est utile en complément que ce soit pour donner un contexte à un utilisateur de synthèse vocale ou / et pour donner des informations complémentaires (qui ne sont pas véhiculées dans l'image).

jeanmark a écrit :
J'ai juste suggéré dans l'hypothèse ou tu utilise l'attribut title, attention, dans notre cas précis d'un lien image que sa valeur soit identique à celle de l'attribut alt, dès lors que tu as un alt déjà pertinent.

Cela invalide le 6.2 . Erreur de ma part : Par exception, un titre de lien identique à l'intitulé est accepté dans le seul cas d'un lien image (lien ne contenant que des images), une icône par exemple. Cela dit, il faut que les infos soient uniquement celles véhiculées dans l'image.
Modifié par yodaswii (11 Nov 2010 - 23:05)

yodaswii a écrit :


cela invalide le 6.2 . Erreur de ma part : Par exception, un titre de lien identique à l'intitulé est accepté dans le seul cas d'un lien image (lien ne contenant que des images), une icône par exemple. Cela dit, il faut que les infos soient uniquement celles véhiculées dans l'image.

Tu as raison, on avance, merci pour ton implication. En ourtre je ne remets pas en cause l'utilité du title en matière d'accessibilité.

Une icone, de surcroit pas très bien réussie graphiquement, tiens tiens, c'est justement notre sujet.

Là ou je te rejoins complètement yodaswii, c'est lorsque tu dis que chacun à le droit à la même information et que dans le cas d'une icone imcompréhensible du fait d'un mauvais traitement graphique l'utilisation du title va permettre d'apporter au plus grand nombre une information importante et que nous dépassons ici le stade de l'ergonomie. yes man !

L'accesibilité : on est en plein dedans !
Modifié par jeanmark (12 Nov 2010 - 00:01)