Directive 1. Fournir des alternatives équivalentes au contenu visuel et auditif.
Le texte est considéré accessible à la plupart des utilisateurs dès qu'il peut être géré par des lecteurs à l'écran, des navigateurs non visuels, et des lecteurs braille. Il peut être affiché visuellement, grossi, synchronisé avec une vidéo pour créer des titres, etc. Lorsque vous concevez un document avec de l'information non-textuelle (images, applets, sons, présentation multimédia, etc.), pensez à compléter cette information avec un équivalent textuel lorsque c'est possible.
Un équivalent texte décrit la fonction ou la signification du contenu. Pour les contenus complexes (diagrammes, graphiques, etc.), l'équivalent texte peut être plus long et inclure des informations descriptives
Les équivalents texte devraient être fournis pour des logos, des photos, des boutons d'envoi, des applets, des puces dans une liste, de l'art ascii, et tous les liens dans une image map ainsi que pour les images invisables utilisées pour modeler une page.
Test rapide ! Un bon test pour déterminer si un équivalent texte est utile est d'imaginer la lecture du document grâce à un téléphone. Que diriez vous à propos de cette image pour la rendre compréhensible à quelqu'un qui écoute au combiné ?
- Règle 1.1
- Fournir un équivalent texte pour tout élément non texte (ex., par "alt", "longdesc", ou dans un élément contenu). Ceci inclut : les images, les représentations graphiques de texte (y compris les symboles), les régions des images cliquables, les animations, (ex., les GIFs animés), les applets et les objets programmables, l'art ascii art, les frames, les scripts, les images utilisées comme puces de liste, les espacements, les boutons graphiques, les sons (joués avec ou sans l'interaction de l'utilisateur), les fichiers audio seuls, les pistes audio des vidéos, et les vidéos. [Priorité 1]Pour en savoir plus :
http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#text-equivalent
http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#image-text-equivalent
Solutions techniques :
Attention à ne pas le confondre avec l'attribut title ! Alt="" ne sert pas à afficher une info-bulle, vous devez pour cela utiliser l'attribut title="".
En principe l'attribut alt="" ne devrait être visible que si les images ne sont pas affichées, une fois de plus Internet Explorer, en ne respectant pas les normes établies, induit les utilisateurs en erreur en affichant le contenu de l'attribut alt dans une info-bulle (uniquement si l'attribut title n'est pas utilisé).
Pensez à remplir systématiquement la partie alt="..." en ne vous bornant pas à mettre le nom de l'image, n'oubliez pas que ce texte remplace la photo lorsque celle-ci ne s'affiche pas à l'écran, ce texte doit donc décrire l'image qu'il remplace.
Mettez un attribut "alt" vide alt="" pour les images servant uniquement à la décoration. N'oubliez pas le alt="" sans quoi les navigateurs textuels afficheront le nom de l'image à la place de celle-ci sans que cela n'apporte aucune information utile.
Si vous utilisez une image à la place d'une balise <hr /> vous devez mettre alt="-" ou alt="__" ou alt="---" ou encore alt="Séparateur".
Limitez la longueur de l'attribut alt à 60 caractères, au dela pensez à mettre en place un attribut "longdesc" et un lien "D" vers une page détaillant l'image.
Mettez un attribut "alt" pour les images map et pour de l'art ASCII.
Si une image servant à la navigation contient du texte, reprendre l'intégralité du texte.
Si vous utilisez une image représentant une flèche gauche pour revenir à la page précédente, mettre "page précédente" dans l'attribut alt.
Dans le cas ou votre site comporte des images contenant du texte, l'attribut alt="..." doit reprendre l'intégralité du texte contenu dans l'image.
Si vous utilisez des images map sur votre site, avez-vous pensé à utiliser l'attribut alt="..." pour toutes les zones réactives de vos images map ?
Se référer également aux règles 9.1 et 13.10 - Règle 1.2
- Fournir des liens texte redondants pour chaque région active d'une image cliquable côté serveur. [Priorité 1]
Explications :
Certains navigateurs sont incapables d'interpréter les images map côté serveur, si vous utilisez ce type d'image sur votre site vous devez doubler les liens d'une manière classique. Ce point peut-être négligé si l'image map est utilisée pour des statistiques (genre Weborama, Xiti...)
Se référer également aux règles 1.5 et 9.1 - Règle 1.3
- Depuis que les agents utilisateur peuvent automatiquement lire l'équivalent texte d'une piste visuelle, fournir une description auditive de l'information importante de la piste visuelle d'une présentation multimédia
Pour en savoir plus :
http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#video-information - Règle 1.4
- Pour toute présentation multimédia basée sur le temps (ex., un film ou une animation), synchronisez les alternatives équivalentes (ex., les sous-titres ou les descriptions auditives de la piste visuelle) avec la présentation. [Priorité 1]Pour en savoir plus :
http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#av-in-dynamic-objects - Règle 1.5
- Fournir des liens texte redondants pour chaque région active d'une image cliquable côté client. [Priorité 3]
Tableau des directives et des points de contrôles :
| N° de Directive | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Total |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Level A - Priorité 1 | 4 | 1 | 0 | 1 | 2 | 3 | 1 | 1 | 1 | 0 | 1 | 1 | 0 | 1 | 17 |
| Level AA - Priorité 2 | 0 | 1* | 7 | 0 | 2 | 2 | 4 | 1** | 2 | 2 | 2 | 3 | 4 | 0 | 30 |
| Level AAA - Priorité 3 | 5 | 2 | 7 | 3 | 6 | 5 | 5 | 1 | 5 | 5 | 4 | 4 | 10 | 3 | 65 |
* Considéré comme Priorité 2 pour les images et Priorité 3 pour le texte.
** Priorité 1 si la fonctionnalité est importante et n'est pas présenté ailleurs, sinon Priorité 2
