5546 sujets
Sémantique web et HTML
Hello,
Sur une image, ce sera surtout l'attribut "alt" ("title" s'adressant plus aux liens).
Quand à l'usage recommandé :
Et pour title tu peux jeter un coup d'oeil ici.
Modifié par BeliG (22 Jul 2008 - 16:34)
Sur une image, ce sera surtout l'attribut "alt" ("title" s'adressant plus aux liens).
Quand à l'usage recommandé :
a écrit :Source Accessiweb.
Alternative textuelle (image) : texte associé à une image via une technique appropriée et décrivant l'information véhiculée par l'image (par rapport au contexte du contenu Web dans lequel elle se trouve). Cette alternative peut décrire la fonction de l'image (exemple : descriptif de l'action réalisée en cliquant sur l'image pour un lien image comme "Retour à la page d'accueil du site Web NomSiteWeb"). Elle peut aussi être vide s'il s'agit d'une image de décoration. Hors cas particuliers, cette alternative doit avoir une longueur maximum de 80 caractères.
Et pour title tu peux jeter un coup d'oeil ici.
Modifié par BeliG (22 Jul 2008 - 16:34)
merci
mais si je mets un attribut 'alt' sur une image ce sont les boots qui la prennent, si j'en mets une 'title' là (selon les navigateurs) l'internaute la voit au passage de la souris au-dessus ....
donc doit bien y avoir une raison ???
à preuve ici même, la pub sur les livres en haut de page :
@+
b g
Modifié par Igor (24 Jul 2008 - 13:52)
mais si je mets un attribut 'alt' sur une image ce sont les boots qui la prennent, si j'en mets une 'title' là (selon les navigateurs) l'internaute la voit au passage de la souris au-dessus ....
donc doit bien y avoir une raison ???
à preuve ici même, la pub sur les livres en haut de page :
<img src="http://www.alsacreations.com/livre/xmedia/couverturemini.gif" height="60" alt="CSS2" title="CSS2 Pratique du design web - Raphael Goetter (Eyrolles, 320 pages)" /></a></li>
@+
b g
Modifié par Igor (24 Jul 2008 - 13:52)
Re,
Mmh...
Tout d'abord un peu de lecture :
- Attributs alt et title en HTML
- Internet explorer: collision entre les attributs alt et title
- Des images accessibles
Le alt doit reprendre la fonction du lien. Pour ce qui est de la pub, je l'aurais plus vu comme ça :
Avec éventuellement un title sur le lien qui englobe l'image pour préciser que la page s'ouvre dans une nouvelle fenêtre...
Modifié par BeliG (22 Jul 2008 - 17:29)
a écrit :
mais si je mets une balise 'alt' sur une image ce sont les boots qui la prennent, si j'en mets une 'title' là (selon les navigateurs) l'internaute la voit au passage de la souris au-dessus ....
Mmh...
Tout d'abord un peu de lecture :
- Attributs alt et title en HTML
- Internet explorer: collision entre les attributs alt et title
- Des images accessibles
Le alt doit reprendre la fonction du lien. Pour ce qui est de la pub, je l'aurais plus vu comme ça :
<img src="..." alt="Acheter CSS2 Pratique du design web de Raphael Goetter sur Amazon"/>Avec éventuellement un title sur le lien qui englobe l'image pour préciser que la page s'ouvre dans une nouvelle fenêtre...
Modifié par BeliG (22 Jul 2008 - 17:29)
BeliG a écrit :Moi je dirais plutôt :
Le alt doit reprendre la fonction du lien. Pour ce qui est de la pub, je l'aurais plus vu comme ça :
<img src="..." alt="Acheter CSS2 Pratique du design web de Raphael Goetter sur Amazon"/>
Avec éventuellement un title sur le lien qui englobe l'image pour préciser que la page s'ouvre dans une nouvelle fenêtre...
<img src="..." alt="Couverture de CSS2 Pratique du design web de Raphael Goetter" title="Acheter CSS2 Pratique du design web de Raphael Goetter sur Amazon" />alt et title sont tout à fait complémentaires à mon avis ...
Bonjour Changaco 
Je suis assez partagé... Je pense qu'il importe peu au visiteur de savoir que l'image est en fait une couverture de livre. Ce qui l'intéresse (et ce qui est mentionné dans les critères accessiweb), c'est la fonction première du lien : acheter le livre du chef sur Amazon...
Pour le title, honnêtement je sais pas. Le "alt" expliquant clairement la fonction du lien, je pense qu'il vaut mieux n'ajouter aucun title. Ni sur le <a>, ni sur <img>.
D'autres avis ?
Changaco a écrit :
Moi je dirais plutôt :
<img src="..." alt="Couverture de CSS2 Pratique du design web de Raphael Goetter" title="Acheter CSS2 Pratique du design web de Raphael Goetter sur Amazon" />
alt et title sont tout à fait complémentaires à mon avis ...
Je suis assez partagé... Je pense qu'il importe peu au visiteur de savoir que l'image est en fait une couverture de livre. Ce qui l'intéresse (et ce qui est mentionné dans les critères accessiweb), c'est la fonction première du lien : acheter le livre du chef sur Amazon...
Pour le title, honnêtement je sais pas. Le "alt" expliquant clairement la fonction du lien, je pense qu'il vaut mieux n'ajouter aucun title. Ni sur le <a>, ni sur <img>.
D'autres avis ?
BeliG a écrit :L'attribut "alt" sert à décrire l'image. De plus c'est une information qui n'est pas visible pour l'utilisateur lambda, elle sert principalement aux aveugles et aux moteurs de recherche. "title" quant à lui est fait pour donner une information supplémentaire.
Bonjour Changaco
Je suis assez partagé... Je pense qu'il importe peu au visiteur de savoir que l'image est en fait une couverture de livre. Ce qui l'intéresse (et ce qui est mentionné dans les critères accessiweb), c'est la fonction première du lien : acheter le livre du chef sur Amazon...
Pour le title, honnêtement je sais pas. Le "alt" expliquant clairement la fonction du lien, je pense qu'il vaut mieux n'ajouter aucun title. Ni sur le <a>, ni sur <img>.
D'autres avis ?
En fait voila ce que j'aurais mis :
<a href="..." title="Acheter CSS2 Pratique du design web de Raphael Goetter sur Amazon"><img src="..." alt="Couverture de CSS2 Pratique du design web de Raphael Goetter" /></a>J'ai juste envie d'ajouter un info supplémentaire à ce sujet...
Le "alt" est comme son nom l'indique (enfin presque ;p) : Un texte alternatif.
Grossièrement : Un texte qui survient quand l'image n'est pas visible. (Surtout pratique pour des questions d'accessibilité).
Toujours accompagner l'attribut "alt" dans sa balise img, même vide, dans le cas par exemple d'une image uniquement illustrative.
On peut donc considérer l'attribut alt comme obligatoire, si on veut bien faire les choses.
En revanche, le "title" est, comme expliqué plus haut, une information supplémentaire, qui se traduit par une info-bulle.
Bien évidemment pas obligatoire, il est pourtant interessant de renseigner cet attribut pour un avantage ergonomique. En effet, il est toujours agréable de savoir où mène un lien avant de cliquer dessus, le lien n'étant pas toujours très explicite.
(Attention à la limite des 80 caractères)
Et c'est là que nous arrivons à l'information que je souhaitais ajouter !
Admettons que nous avons en main ce code HTML ci-dessous :
En bref : Une image dans un lien, un texte alternatif sur une image (normal), ainsi qu'un title bonus sur le lien, pour aider à la navigation.
Figurez-vous que sous ce Rogntudju d'IE6 (entre autres, mais restons-en là), les "alt" ont le même rôle que les title, à savoir : Générer une info-bulle.
Et bien sur, dans ce cas précis, c'est le alt qui a la priorité sur le title.
Pour éviter cet espèce de bug, il existe une solution toute bête qui consiste à ajouter le "title" non pas sur le lien, mais sur la balise "img", en compagnie directe du "alt".
Comme ceci :
Voici donc l'explication de la présence de ces deux attributs dans une balise img.
Modifié par Nigel (23 Jul 2008 - 23:27)
Le "alt" est comme son nom l'indique (enfin presque ;p) : Un texte alternatif.
Grossièrement : Un texte qui survient quand l'image n'est pas visible. (Surtout pratique pour des questions d'accessibilité).
Toujours accompagner l'attribut "alt" dans sa balise img, même vide, dans le cas par exemple d'une image uniquement illustrative.
On peut donc considérer l'attribut alt comme obligatoire, si on veut bien faire les choses.
En revanche, le "title" est, comme expliqué plus haut, une information supplémentaire, qui se traduit par une info-bulle.
Bien évidemment pas obligatoire, il est pourtant interessant de renseigner cet attribut pour un avantage ergonomique. En effet, il est toujours agréable de savoir où mène un lien avant de cliquer dessus, le lien n'étant pas toujours très explicite.
(Attention à la limite des 80 caractères)
Et c'est là que nous arrivons à l'information que je souhaitais ajouter !
Admettons que nous avons en main ce code HTML ci-dessous :
<a href="#" title="Allez, clique-donc sur ce lien ma poule"><img src="..." alt="Ici y a une image qui déchire mais tu la vois pas !" /></a>En bref : Une image dans un lien, un texte alternatif sur une image (normal), ainsi qu'un title bonus sur le lien, pour aider à la navigation.
Figurez-vous que sous ce Rogntudju d'IE6 (entre autres, mais restons-en là), les "alt" ont le même rôle que les title, à savoir : Générer une info-bulle.
Et bien sur, dans ce cas précis, c'est le alt qui a la priorité sur le title.
Pour éviter cet espèce de bug, il existe une solution toute bête qui consiste à ajouter le "title" non pas sur le lien, mais sur la balise "img", en compagnie directe du "alt".
Comme ceci :
<a href="#"><img src="" title="" alt="" />Voici donc l'explication de la présence de ces deux attributs dans une balise img.
Modifié par Nigel (23 Jul 2008 - 23:27)
Je voudrais ajouter une fois de plus pour votre information que souvent les lecteurs d'écran choisissent le plus long des deux entre alt et title pour la lecture, et ignorent l'autre. Donc il est important de reprendre l'information mise dans le alt quand vous mettez un title.
Réaction sur les codes présentés : indiquer qu'il s'agit de la couverture du livre, en fait, on s'en fiche : ce qui est important à mettre dans le alt dans le cas particulier d'un lien, c'est la fonction, ici à savoir acheter le livre sur amazon.
On dit toujours que le cordonnier est le plus mal chaussé.
Plus sérieusement : Tout autant qu'alsacréations est très sérieux et excellent, cela ne l'empêche pas pour autant d'abriter quelques erreurs parfois.
Réaction sur les codes présentés : indiquer qu'il s'agit de la couverture du livre, en fait, on s'en fiche : ce qui est important à mettre dans le alt dans le cas particulier d'un lien, c'est la fonction, ici à savoir acheter le livre sur amazon.
a écrit :
le code du lien que j'ai mis est celui qui se trouve dans cette page ... et ce site est quand même réputé pour sa 'conception' ... donc il y a bien une
raison , non ?
On dit toujours que le cordonnier est le plus mal chaussé.
Plus sérieusement : Tout autant qu'alsacréations est très sérieux et excellent, cela ne l'empêche pas pour autant d'abriter quelques erreurs parfois.