Le alt l’attribut est utilisé pour attribuer un texte de remplacement à un img. Le texte alternatif est utilisé à chaque fois que l’image n’est pas rendue et par des technologies d’assistance telles que les lecteurs d’écran. En outre, les moteurs de recherche qui offrent des capacités de recherche basées sur des images s’appuient sur le texte alt pour déterminer la signification des images., Fournir des valeursalt pour les images n’est vraiment pas facultatif, c’est quelque chose que vous devriez absolument faire si vous êtes un concepteur, un développeur ou un webmaster. Cependant, utiliser correctement l’attribut alt est tout aussi important que de l’utiliser en premier lieu.
lignes directrices pour une utilisation correcte du texte alternatif
lorsqu’elles sont utilisées correctement, les alternatives textuelles pour les éléments visuels signifient que les utilisateurs qui ne peuvent pas visualiser les images peuvent toujours utiliser toutes les fonctionnalités d’un site web. Cependant, lorsque des alternatives de texte ne sont pas utilisées correctement, elles peuvent créer de la confusion., Suivez ces règles simples pour fournir aux visiteurs de votre site web la meilleure expérience possible.
toujours fournir un texte alternatif
Il peut sembler inutile de le dire, mais vous devez toujours ajouter lealt attribué à chaque image que vous utilisez sur une page Web. Même dans certains cas particuliers où aucun texte n’est fourni, l’attribut alt doit toujours être présent et laissé vide.,
aide les lecteurs D’écran à ignorer les Images esthétiques
lorsqu’un lecteur d’écran rencontre une image sans l’attributalt, il indiquera simplement au visiteur du site web « image”. Cela laisse le visiteur se demander quelles informations ils peuvent manquer. Cependant, si l’attribut de texte alternatif est présent mais laissé vide, comme ceci alt="", le lecteur d’écran comprend que l’image doit être ignorée entièrement. Utilisez ces connaissances pour indiquer aux technologies d’assistance telles que les lecteurs d’écran quelles images ils doivent simplement ignorer., Si vous avez des images qui sont fournies uniquement à des fins de conception ou d’esthétique – une telle image utilisée pour rendre une barre horizontale-fournissez un attribut de texte alternatif vide afin que les technologies d’assistance sachent qu’elles doivent ignorer entièrement l’image.
dupliquer le Message véhiculé par l’Image
Quelles informations l’image transmet-elle? Encapsulez ces informations dans une brève déclaration et utilisez-les comme alternative au texte., Le but de alt text est de transmettre exactement la même signification à un visiteur qui ne peut pas voir une image que l’image elle-même transmet à un visiteur qui peut la voir. Dans les cas où l’image fournit des informations textuelles, fournissez simplement le même texte que le texte alt.
indiquer aux visiteurs où vont les Images liées
Les Images sont souvent utilisées comme liens vers d’autres sites web. Il peut être le cas que vous utilisez des images de bouton pour les liens, ou vous pouvez simplement lier une image dans un article à la source de l’image., Si vous liez des images à d’autres sites Web, utilisez le texte alternatif de l’image pour indiquer aux utilisateurs où se trouve le lien.
cas particuliers
en suivant les directives ci-dessus, vous fournirez de meilleures alternatives de texte que de nombreux sites Web courants. Alors que ces lignes directrices couvriront la grande majorité des besoins de texte alternatif, il y a quelques cas particuliers que vous devriez être au courant.
utiliser 125 caractères ou moins
de nombreuses technologies d’assistance traitent le texte en morceaux de 125 caractères. Améliorer l’expérience des utilisateurs de lecteurs d’écran en limitant votre texte alternatif à 125 caractères., Si vous ne pouvez pas réduire le textealt à moins de 125 caractères, fournissez une description étendue sur une page séparée et un lien vers celle-ci. Par exemple, si vous avez une image d’un diagramme qui ne peut pas être résumée en moins de 125 caractères, attribuez à l’image un court texte alternatif tel que « diagramme de quelque chose de génial” (mais dites au visiteur quelle chose impressionnante est montrée dans le diagramme)., Il existe deux façons différentes de compléter le texte alternatif court avec une description étendue qui fournit beaucoup plus de détails:
- immédiatement en dessous de l’image, insérez un lien qui dit quelque chose comme description étendue de diagramme impressionnant et un lien vers une page séparée avec une description étendue.
- immédiatement en dessous ou à côté de l’image, Ajoutez une lettre majuscule D et liez-la à la description étendue sur une page séparée. Ce lien est appelé un D-Link et quelques experts en accessibilité plaident pour son utilisation, mais nous préférons et recommandons la méthode décrite ci-dessus.,
une autre façon de fournir une description étendue dans le passé était d’utiliser l’attribut longdesc. Cependant, vous devez savoir qu’il a été obsolète en HTML5 et qu’il n’est plus un bon moyen de fournir une description étendue. Ignorer longdesc et utiliser l’une des deux méthodes décrites ci-dessus pour fournir une description étendue d’une image complexe.
fournir un bref résumé pour les Images qui ont déjà été décrites
Il y aura des moments où vous utiliserez une image et la décrivez dans le texte du paragraphe sur la page., Par exemple, vous pouvez poster une photo d « un récent voyage de pêche et inclure dans le texte du paragraphe sur la page une description de l » image qui est quelque chose comme ça » j « ai passé un bon moment à pêcher le week-end dernier et attrapé la basse de 7 livres que vous voyez dans l » image!” Dans un cas comme celui-ci, il est toujours important de fournir une alternative de texte à l’image, mais le texte utilisé peut être très court. Dans le cas de notre exemple de pêche, un bon alt texte pourrait ressembler à ceci: alt="weekend fishing trip".,
Points à retenir
L’utilisation correcte de l’attributalt peut être résumée avec quatre points clés:
- utilisez toujours l’attribut
alt, même si vous le laissez vide. - gardez le texte alternatif bref.
- dupliquez les informations véhiculées par l’image.
- Dites aux visiteurs où vont les images liées.
Vous savez maintenant à quel point il est important de fournir une alternative de texte pour chaque image de votre site web. Mieux encore, vous savez comment utiliser correctement le texte alternatif afin qu’il soit aussi efficace que possible.,
Laisser un commentaire