W3C Web Accessibility Initiative
Ressources, tutoriels et repères pour concevoir et évaluer des contenus web accessibles, des images aux formulaires et aux médias.
Capture de la page d’accueil du . Le site actuel peut avoir évolué.
Rendre un contenu accessible
Trouver des tutoriels et méthodes pour images, formulaires et médias.
Avant de vous appuyer sur le résultat : Tester le résultat avec de vrais parcours, pas seulement une règle.
Comparer avec les autres besoins de la rubrique →Nos guides liés à W3C Web Accessibility Initiative
La fiche de l’annuaire décrit le site. Ces guides expliquent des tâches concrètes et les vérifications à effectuer.
- Lire un rapport d’accessibilité automatisé sans surinterpréter le scoreDéfinissez les pages et états testés, examinez les alertes puis complétez les contrôles avec un parcours au clavier et une relecture.
- Signaler un obstacle d’accessibilité sur un siteDécrivez la tâche bloquée, la page et les étapes de reproduction. Envoyez un signalement utile et demandez une solution de remplacement lorsque la démarche est urgente.
- Rendre un document plus accessibleStructurez les titres, décrivez les images utiles et nommez les liens avant de vérifier le fichier exporté. Grille de relecture intégrée au guide.
- Améliorer le confort et l’accessibilitéRéglez le zoom, utilisez le clavier et les sous-titres, puis testez votre parcours de lecture avec une grille de confort à consulter.
Comparer cette ressource avec d’autres fiches →
Choisir une alternative selon le rôle réel de l’image
- Image de lien
- Expliquer la destination.
- Image informative
- Transmettre le sens utile.
- Lisez l’image dans son contexte de page.
- Distinguez décoration, information et fonction.
- Choisissez l’alternative et vérifiez le texte déjà présent.
Exemple fictif : la même flèche apparaît dans un décor et dans un lien sans texte. L’équipe examine ces deux usages séparément ; elle n’applique pas la même alternative aux deux images.
Votre trace utile : Rôle de l’image, texte voisin et alternative choisie.
L’arbre de décision est un repère ; il ne couvre pas tous les cas.
Choisir une autre méthode commentée
Méthode éditoriale construite à partir de W3C WAI — Arbre de décision alt. Documentation consultée le . Les exemples sont des exercices fictifs, pas des résultats de test du service.
Décrire l’image selon sa fonction
Le texte alternatif dépend de l’usage de l’image dans la page.
| Élément | Signification |
|---|---|
| Bouton image | Donner l’action si aucun autre texte ne la nomme. |
| Image informative | Transmettre le sens utile dans ce contexte. |
| Décoration | Utiliser alt="" si l’image n’apporte aucune information. |
Mettre le raisonnement à l’épreuve
Situation pédagogique. Une loupe seule lance la recherche. « Loupe grise » est-il un nom utile ?
Lire l’explication
Le lecteur a besoin de l’action « Rechercher ». Si un texte visible fournit déjà ce nom, éviter une annonce redondante.
Documentation du tableau : W3C WAI — An alt Decision Tree · . L’exercice est un exemple pédagogique.
Passer du standard à un obstacle concret
WAI propose des ressources pour expliquer les objectifs d’accessibilité et documenter les obstacles rencontrés. Une déclaration utile décrit la démarche, les limites connues et un contact de retour ; elle ne remplace pas l’évaluation du site.
- Pour l’éditeur
- Décrire l’état de l’accessibilité, les mesures et les limites connues.
- Pour l’utilisateur
- Signaler URL, tâche, blocage et environnement pertinent.
- Pour le suivi
- Garder les échanges et demander une solution alternative pour une démarche urgente.
- Graphique ou carte
- Associer une identification brève à une description détaillée accessible dans la page : valeurs utiles, unités et relations que le visuel sert à montrer.
- Vérification éditoriale
- Relire la page sans ses images : le texte permet-il encore de comprendre la conclusion et de retrouver les données essentielles ?
- En-tête réel de tableau
- Mettre un texte en gras ne le transforme pas en en-tête accessible. Le balisage doit distinguer cellules d’en-tête et cellules de données et relier correctement lignes et colonnes.
Source : W3C WAI — Tables Tutorial · consultée le - Après conversion du document
- La structure des tableaux peut se perdre lors d’une conversion de format. Vérifier le fichier final : titre du tableau, en-têtes et relations doivent encore permettre de comprendre chaque valeur hors de son seul aspect visuel.
Source : W3C WAI — Tables Tutorial · consultée le - Image fonctionnelle
- L’alternative décrit la destination ou l’action si l’image donne seule le sens du lien.
Source : W3C WAI — Arbre de décision alt · consultée le - Image complexe
- Le contenu informatif complexe doit aussi être expliqué ailleurs dans la page.
Source : W3C WAI — Arbre de décision alt · consultée le
Documentation du profil initial
- W3C WAI — Accessibility statements ↗
- W3C WAI — Reporting barriers ↗
- W3C WAI — Alternatives pour les images complexes ↗
Documentation du profil initial consultée le . Les repères ajoutés portent leur propre source et date de consultation ci-dessus.
Choisir l’alternative d’une image selon son rôle
L’alternative textuelle dépend de ce que l’image apporte. Décrire son apparence ne suffit pas lorsqu’elle sert de bouton ou porte des données.
- Définir le rôle
- Rédiger l’équivalent
- Relire sans l’image
| Situation | Ce qui change | Vérification utile |
|---|---|---|
| Image informative | Transmettre l’information essentielle dans le contexte. | Ne pas répéter inutilement une légende voisine. |
| Image fonctionnelle | Nommer l’action ou la destination. | Un bouton doit annoncer son rôle, pas seulement la forme de son icône. |
| Graphique complexe | Fournir l’équivalent complet des données ou relations utiles. | Associer une description et, si adapté, un tableau lisible. |
Un attribut alt vide évite l’annonce d’une image purement décorative. Relisez la page sans ses images : actions et informations essentielles doivent rester identifiables.
Documentation : W3C WAI — Images Tutorial ↗ ·
