Sunday, April 15, 2012

Rédaction d'un texte Alt efficace pour les Images

Quiconque sait rien sur l'accessibilité du web sait qu'images besoin d'un texte alternatif, ou ALT, qui leur sont confiée. C'est parce que les lecteurs d'écran ne peut pas comprendre les images, mais plutôt lire à haute voix le texte de remplacement qui leur sont confiée. Dans Internet Explorer, nous pouvons voir ce texte ALT, simplement par la souris sur l'image et à la recherche de l'info-bulle jaune qui apparaît. Autres navigateurs (à juste titre) ne pas ce faire. Le code HTML pour insérer du texte ALT est :


img src="filename.gif" alt = "description Alternative passe ici"


Mais sûrement, il ne peut y avoir un talent pour l'écriture de texte ALT pour les images ? Vous pop juste une description là et vous êtes prêt à partir, à droite ? Ainsi, sorte de. Bien sûr, il n'est pas sorcier, mais il y a quelques lignes directrices, que vous devez suivre...


Des images d'espacement et le texte ALT manquant


Images d'espacement devraient toujours être affectés nulle texte ALT ou alt = "". De cette façon la plupart des lecteurs écran d'ignorer complètement l'image et ne même annoncent sa présence. Des images d'espacement sont des images invisibles qui utilisent plutôt la plupart des sites Web. Le but de leur est, comme son nom l'indique, à créer de l'espace sur la page. Parfois, il n'est pas possible de créer l'affichage visuel vous avez besoin, donc vous pouvez coller une image (en spécifiant la hauteur et la largeur) et volià, vous avez l'espace supplémentaire dont vous avez besoin.


Pas tout le monde utilise ce nul texte ALT pour les images d'espacement. Certains sites Web de bâton en alt = « image d'espacement ». Imaginez comment gênant cela peut être pour un utilisateur de lecteur écran, surtout quand vous avez dix d'entre eux dans une ligne. Un lecteur d'écran diraient, « L'Image, une image d'espacement » dix fois d'affilée (lecteurs d'écran généralement dire le mot, « Image », avant la lecture de son texte ALT) - maintenant ce n'est pas utile !


Les autres développeurs web simplement laissent de côté l'attribut ALT pour les images d'espacement (et peut-être d'autres images). Dans ce cas, la plupart des lecteurs écran vont lire sur le nom du fichier, qui pourrait être « newsite/images/onepixelspacer.gif ». Un lecteur d'écran pourrait annoncer cette image en tant que « Image, images de barre oblique newsite slash un pixel d'espacement dot gif ». Imaginez ce que cela sonnerait comme s'il y avait dix d'entre elles en une ligne !


Balles et icônes


Balles et les icônes doivent être traités de la même manière que les images d'espacement, devrait être affecté null texte de remplacement, ou alt = "". Pensez à une liste d'articles avec une balle de fantaisie, instance de chaque élément. Si le texte ALT, « Bullet » est attribué à chaque image puis, volonté « Image, balle » être lu à voix haute par les lecteurs d'écran avant chaque élément de liste, rendant à prendre que le bit plus au travail par le biais de la liste.


Icônes, habituellement utilisés pour compléter les liens, devraient également être affectés alt = "". Plusieurs sites Web, ce qui place l'icône à côté du texte du lien, utilisez le texte du lien dans le texte de remplacement de l'icône. Lecteurs d'écran auraient d'abord annoncer ce texte ALT et puis le texte du lien, ce serait dire ensuite deux fois, le lien qui n'est évidemment pas nécessaire.


(Idéalement, icônes et puces doivent être appelées comme images de fond à travers le document CSS - cela leur retirer complètement le document HTML et donc supprimer la nécessité pour toute description ALT.)


Images décoratives


Les images décoratives trop doivent être assignés texte alternatif null ou alt = "". Si une image est pure eye candy alors il n'est pas nécessaire pour un utilisateur de lecteur d'écran même savoir c'est là, et être informé de sa présence ajoute simplement à la pollution par la bruit.


À l'inverse, vous pourrait prétendre que les images sur votre site créer une identité de marque et en cachant les utilisateurs de lecteur écran vous êtes refusant ce groupe d'utilisateurs de la même expérience. Spécialistes de l'accessibilité ont tendance à favoriser l'argument ancien, mais il est certainement un cas valide pour ce dernier trop.


Navigation & texte incorporé dans les images


Les menus de navigation nécessitant un texte fantaisie n'ont aucun choix que d'incorporer le texte de l'image. Dans ce cas, le texte ALT ne devrait pas être utilisé pour agrandir l'image. En aucun cas le texte ALT dise, « Lisez tout à propos de nos services fantastiques, conçus pour vous aider dans tout ce que vous faites ». Si l'élément de menu indique, « Services » puis le texte ALT devrait également dire « Services ». Texte ALT devrait toujours décrire le contenu de l'image et doit répéter le texte mot à mot. Si vous voulez étendre sur la navigation, comme dans cet exemple, vous pouvez utiliser l'attribut title.


Il en va de même pour tout autre texte incorporé dans une image. Le texte ALT devrait simplement répéter, mot à mot, le texte contenu dans cette image.


(À moins que la police utilisée est surtout unique il est souvent inutile d'incorporer le texte dans les images - navigation avancée et effets d'arrière-plan peuvent maintenant être réalisés avec CSS).


Logo de la compagnie


Sites Web ont tendance à varier dans leur application texte ALT de logos. Certains disent, « Nom de l'entreprise », d'autres « Logo nom d'entreprise » et d'autres décrivent la fonction de l'image (généralement un lien vers la page d'accueil), « retour à la maison ». N'oubliez pas, le texte ALT devrait toujours décrire le contenu de l'image ainsi le premier exemple, alt = « Nom de la société », est probablement la meilleure. Si le logo est un lien vers la page d'accueil peuvent être efficacement communiquée par le biais de la balise de titre.


Conclusion


Texte de remplacement efficace écrit n'est pas trop difficile. Si c'est une image décorative alors nul texte de remplacement ou alt = "" devrait être généralement utilisé - jamais, jamais omettre l'attribut ALT. Si l'image contient du texte puis le texte ALT devrait tout simplement répéter ce texte, mot à mot. N'oubliez pas, texte ALT doit décrire le contenu de l'image et rien de plus.


Aussi Veillez également à garder ALT texte court et concis que possible. À l'écoute d'une page web avec un lecteur d'écran prend beaucoup plus longtemps que les méthodes traditionnelles, afin de ne rendre le surf expérience douloureuse pour les utilisateurs de lecteur écran avec texte ALT surdimensionné et inutile.

No comments:

Post a Comment