| name | alt-text |
| description | Rédaction et audit d'alternatives textuelles pour images, icônes, logos, graphiques, PDF/PPTX/HTML. Utiliser quand il faut remplir ou vérifier un champ alt, texte de remplacement, image sans alt, image-lien, image décorative, CAPTCHA, image contenant du texte ou image complexe. |
| allowed-tools | Read, Glob, Grep, Bash |
| context | conversation |
| metadata | {"argument-hint":"[images, fichier HTML/PDF/PPTX, tableau d'images ou contexte à auditer]"} |
Alt-text
Promesse
Rendre la décision d'alternative textuelle prévisible en forçant l'analyse de la fonction du visuel, du contexte adjacent et de l'incertitude.
Produire un texte de remplacement, pas une description visuelle. L'alt doit transmettre ce que le lecteur aurait compris si l'image n'était pas affichée.
Principe
Avant de rédiger, déterminer la fonction de l'image dans son contexte. Imaginer la page lue au téléphone : remplacer l'image par les mots qui maintiennent le sens, sans annoncer l'existence de l'image.
Ne jamais commencer par "Image de", "Photo de", "Icône de", "Illustration de", "Logo de" ou "Logo". La technologie d'assistance annonce déjà le type d'élément ; pour un logo, donner le nom de l'organisation ou de la destination.
Périmètre
Utiliser ce skill pour rédiger, corriger ou auditer des alternatives textuelles dans des livrables web, PDF, PPTX, DOCX, Markdown ou tableaux d'images.
Ne pas utiliser pour :
- produire une description artistique, éditoriale ou SEO d'une image ;
- faire de l'OCR complet quand aucun texte lisible n'est fourni ;
- remplacer un audit RGAA/WCAG complet sur toutes les thématiques ;
- décrire des images hors contexte quand la fonction éditoriale manque.
Modes d'usage
| Mode | Déclencheur | Critère de fin |
|---|
| Rédaction unitaire | Une image ou icône avec contexte fourni | Le rôle est identifié, l'alt proposé conserve l'information utile, et l'incertitude éventuelle est signalée. |
| Audit de lot | Plusieurs images, page, document ou tableau d'images | Chaque image a un rôle, un alt proposé ou alt="", et une note justifie les cas ambigus. |
| Image complexe | Graphique, schéma ou visuel riche | Un alt court est proposé et la nécessité d'une description détaillée adjacente ou liée est décidée. |
| Source HTML/PDF/PPTX/DOCX/Markdown | Fichier source à vérifier | Les alt existants sont classés en garder, corriger, vider, relier ou compléter, avec preuve par contexte adjacent. |
Déploiement contrôlé
Ce skill agit comme copilote d'accessibilité, pas comme moteur de conformité autonome.
- Mode suggestion : produire des propositions, tableaux d'audit ou champs préremplis ; ne pas injecter de code ni modifier les sources sans validation explicite.
- Revue humaine : toute incertitude, mention
À confirmer, alternative longue ou image complexe doit déclencher une décision humaine.
- Traçabilité : chaque décision doit rester justifiée par la fonction, le contexte, le rôle et la note dans la sortie recommandée.
Contrat d'exécution
BRANCH-MAP :
| Branche | Déclencheur utilisateur ou modèle | Étapes nécessaires | Références nécessaires | Critère de fin |
|---|
| Rédaction | Image ou icône avec contexte | 1. lire le contexte ; 2. choisir le rôle ; 3. rédiger ou vider l'alt | commune: ce fichier | Rôle + alt proposé + incertitude éventuelle |
| Audit de lot | Tableau, page ou document | 1. inventorier ; 2. classer ; 3. proposer garder/corriger/vider/compléter | commune: ce fichier | Chaque ligne a rôle, décision et note si nécessaire |
| Complexe | Graphique, schéma, carte, statistique | 1. alt court ; 2. description longue ; 3. données disponibles | commune: ce fichier | Alt court + description ou demande de données |
| Intégration web | HTML, SVG, lien, figure, texte-image | 1. vérifier le support ; 2. nommer ou masquer ; 3. relier si besoin | commune: section technique | Technique correcte ou point à corriger |
LEXICAL-CANDIDATES :
| Intention comportementale | Candidats | Rejetés | Retenu | Effet sémiotique | Raison |
|---|
| Décider ce que l'image fait | fonction, rôle, action, destination, information, redondance | description, apparence, joli | fonction, rôle | cadrage + trace Rôle | Force le choix avant la rédaction. |
| Ancrer la lecture autour de l'image | contexte, adjacent, légende, titre, lien, paragraphe, destination | hors-sol, deviner | contexte | trace dans Note | Empêche les alt génériques. |
| Gérer le doute sans inventer | incertitude, confirmer, illisible, manquant, validation, hypothèse | probablement, sûrement | incertitude | trace À confirmer | Transforme le doute en revue humaine. |
| Couvrir les contraintes web | structure, SVG, figure, figcaption, données, tableau, HTML/CSS | pixel, couleur, style | structure | trace technique | Stabilise les cas SVG, graphique et légende. |
LEADING-WORDS :
| Mot conducteur | Comportement condensé | Répétition token | Trace observée | Test no-op |
|---|
fonction | Décider ce que l'image fait dans la page | Principe, règles, checklist | Colonne Rôle ou Note | Non no-op : distingue lien, décoratif, information |
contexte | Lire autour avant de rédiger | Principe, procédure, sortie | Justification par titre, légende ou lien | Non no-op : empêche l'alt hors sol |
rôle | Classer avant d'écrire | Modes, procédure, tableau | Colonne Rôle obligatoire | Non no-op : stabilise alt="" |
incertitude | Signaler au lieu d'inventer | Promesse, gestion, sortie | Note À confirmer | Non no-op : évite les alt faux |
structure | Vérifier le support technique avant de conclure | SVG, figure, texte-image, graphique | Note technique ou correction HTML/SVG | Non no-op : distingue nommer, masquer, relier |
INVESTIGATION-WORK :
| Branche | Actions d'investigation obligatoires | Preuve exigée | Critère renforcé avant split | Observation précipitation | Type de split | Décision split |
|---|
| Toutes branches | Lire le contexte adjacent, identifier le rôle, vérifier le support HTML/SVG, citer l'information manquante et ne pas modifier les fichiers source sans demande explicite. | Tableau final avec Image, Rôle, Alt proposé, Note ; ou alt unitaire avec rôle et incertitude. | Chaque image traitée a un rôle, un alt proposé ou alt="", et une note seulement si elle lève une incertitude, justifie un alt vide ou demande une description longue. | Aucune précipitation observée après ajout des modes et critères de fin ; le risque principal reste l'alt hors contexte, traité par contexte et rôle. | Aucun split. | Garder ce skill mono-skill tant que les branches tiennent dans ce fichier et restent sous 300 lignes. |
Critère de fin : chaque image traitée a un rôle, un alt proposé ou alt="", et une note seulement si elle lève une incertitude, justifie un alt vide ou demande une description longue.
COLOCATION :
| Concept critique | Définition | Règles | Limites/pièges | Emplacement unique | Justification si dispersé |
|---|
| Alternative textuelle | Texte qui remplace la fonction du visuel dans son contexte. | SVG, figure, texte-image, graphique, légende et incertitude restent ici. | Ne couvre pas un audit RGAA/WCAG complet ni l'OCR sans source lisible. | Ce fichier. | Disperser créerait des décisions d'alt contradictoires. |
PRUNING :
| Cible | Décision | Preuve comportementale de conservation | Saint-Exupéry |
|---|
| Duplication | Conserver seulement les interdits critiques. | Sans rappel, l'agent remplit les alt décoratifs par prudence. | Retirer casserait la décision alt="". |
| Sédiment | Supprimer les normes non actionnables. | Une citation qui ne change aucune décision d'alt est retirée. | Retirer améliore la lecture sans perte. |
| Sprawl | Garder ici tant que le fichier reste sous 300 lignes. | Externaliser seulement si une branche technique devient autonome. | Scinder maintenant dégraderait COLOCATION. |
| No-op | Supprimer les conseils esthétiques génériques. | Les adjectifs visuels sans effet informatif sont déjà interdits. | Retirer évite de payer des tokens inutiles. |
TALK-FIDELITY :
| Marqueur | Couverture | Preuve | Décision |
|---|
| Description comme pointeur de contexte | Présent | La description déclenche champ alt, image sans alt, image-lien, décoratif, CAPTCHA et image complexe. | Garder model-invoked. |
| Superpowers / skills invoqués par l'utilisateur | NA justifié | Le skill ne dépend pas d'une méthode de développement externe. | Ne pas ajouter de dépendance. |
| skill-writing-great-skills | Présent | Promesse, BRANCH-MAP, LEADING-WORDS, INVESTIGATION-WORK, PRUNING et METHOD-COMPLETE. | Contrat suffisant. |
| 2PRD, ADR, plan mode, Matt Pocock, domain modeling | NA justifié | Le skill promet une décision d'alt vérifiable, pas une architecture ou un plan produit. | La trace utile reste le tableau de sortie. |
SMOKE-TRIGGER :
| Prompt de routage | Verdict attendu | Raison |
|---|
J'ai une page HTML avec des images sans alt, des SVG et des icônes-liens : propose les alternatives. | Déclencher alt-text | Contient image sans alt, SVG, icônes-liens et demande d'alternatives. |
Décris cette photo de façon poétique pour une accroche marketing. | Ne pas déclencher | Demande description artistique ou SEO, explicitement hors périmètre. |
METHOD-COMPLETE
Promesse : rendre la décision d'alternative textuelle prévisible par fonction, contexte et incertitude.
Invocation : model-invoked ; charge contexte assumée par la description.
Branche : rédaction, audit de lot, complexe, intégration web.
Scénario représentatif : lot HTML avec icône bouton, SVG décoratif, graphique chiffré et image légendée.
Risque sans skill : descriptions visuelles, alt redondants ou masquage décoratif oublié.
Comportement avec skill : rôle choisi, alt ou masquage décidé, données du graphique et liaison de légende vérifiées.
Déclenchement modèle : smoke prompt sans nommer le skill et near-miss négatif définis dans SMOKE-TRIGGER ; runtime non mesuré ici.
Trace des mots conducteurs : fonction et rôle dans la colonne Rôle ; contexte et incertitude dans Note ; structure dans la note technique.
Test no-op : chaque mot conducteur change une décision observable : rédiger, vider, relier, masquer ou demander confirmation.
Preuve : tableau de sortie couvrant Image, Rôle, Alt proposé et Note.
Verdict : GO local
Ce skill reste mono-skill : ne pas le scinder ni créer de référence externe tant que la procédure tient dans ce fichier et que les cas complexes se résolvent par une description détaillée adjacente ou liée.
Procédure
- Lire le contexte adjacent : titre, légende, paragraphe, bouton, lien, consigne, destination.
- Identifier le rôle réel de l'image :
- décorative ou redondante ;
- informative ;
- lien ou bouton ;
- logo ou marque ;
- image contenant du texte ;
- graphique, schéma ou image complexe ;
- CAPTCHA.
- Rédiger l'alt selon le rôle, avec la formulation la plus courte qui conserve l'information.
- Vérifier que la phrase environnante reste naturelle si l'image est remplacée par l'alt.
- Si l'information utile est inconnue ou illisible, signaler le besoin de validation au lieu d'inventer.
Gestion des incertitudes
| Situation | Action |
|---|
| Image absente ou illisible | Demander l'image, une capture ou le contexte source |
| Contexte adjacent absent | Proposer une hypothèse prudente et marquer À confirmer |
| Texte dans l'image partiellement lisible | Ne reprendre que le texte certain et signaler l'incertitude |
| Image complexe sans description longue | Proposer un alt court et demander ou rédiger une description détaillée séparée |
| Image possiblement décorative mais utilisée comme lien | Traiter comme lien : action ou destination obligatoire |
Ne jamais inventer une information métier, un chiffre, une identité ou une destination qui n'est pas visible dans l'image ou donnée par le contexte.
Règles par type
| Type d'image | Alt attendu |
|---|
| Décorative | alt="" |
| Redondante avec le texte adjacent | alt="" |
| Informative | Information portée par l'image, sans détail inutile |
| Lien ou bouton | Destination ou action, pas l'apparence |
| Logo seul | Nom de l'organisation ou du service |
| Logo-lien | Destination, souvent "Accueil" si le lien revient à l'accueil, sans préfixe Logo |
| Texte dans l'image | Texte visible repris fidèlement ; en audit, recommander le remplacement par du texte HTML/CSS sauf logotype ou contrainte justifiée |
| Graphique ou schéma complexe | Alt court + description détaillée adjacente ou liée, avec données chiffrées exactes si elles existent |
| CAPTCHA | Nature et fonction du test, jamais le contenu du code |
Contraintes web techniques
| Cas technique | Décision attendue |
|---|
<img> décoratif | Utiliser alt="" et ne pas ajouter de titre redondant. |
<svg> décoratif | Retirer de l'arbre d'accessibilité avec aria-hidden="true" si le SVG n'est pas focusable ni interactif. |
<svg> informatif | Ajouter un rôle image et un nom accessible : role="img" avec aria-label, aria-labelledby ou un <title> fiable ; utiliser aria-describedby ou un lien pour une description longue. |
| Image-lien ou bouton icône seul | Le nom accessible indique l'action ou la destination ; si un texte visible existe déjà, masquer l'icône décorative. |
| Image texte informative | Préférer du texte HTML stylé en CSS ; si impossible ou logotype, reprendre le texte visible dans l'alt. |
| Image complexe ou graphique | Fournir la tendance dans l'alt court et les données numériques dans la description détaillée, souvent sous forme de tableau. |
| Image avec légende visible | Vérifier l'association programmée : image et légende dans <figure>, légende dans <figcaption>, et nom du groupe cohérent avec la légende si nécessaire. |
Contraintes de rédaction
- Viser 80 caractères maximum. Tolérer jusqu'à 120 si le sens l'exige.
- En audit, une alternative de plus de 80 caractères est un candidat à revue humaine, pas une non-conformité automatique.
- Traiter les préfixes
image de, photo de, illustration de, logo de ou logo comme des candidats redondants à vérifier, pas comme une suppression automatique hors contexte.
- Éviter les adjectifs visuels sans valeur informative : joli, bleu, grand, stylisé.
- Ne pas répéter une légende, un titre ou un texte immédiatement adjacent.
- Ne pas écrire un alt vide pour une image porteuse d'information.
- Ne pas utiliser le nom de fichier comme alt.
- Pour une image complexe, ne pas compresser toute l'analyse dans l'alt : ajouter ou demander une description longue visible ou liée.
Exemples
| Contexte | Mauvais | Bon |
|---|
| Logo Twitter non cliquable | Logo constitué d'un oiseau bleu | Twitter |
| Loupe qui lance une recherche | Loupe | Lancer la recherche |
| Séparateur décoratif | Trait décoratif | alt="" |
| Image affichant "Soldes -50 %" | Bannière de promotion | Soldes -50 % |
| CAPTCHA avant envoi | Lettres A7K9 | Code de sécurité anti-spam |
| Photo déjà légendée avec la même info | répétition de la légende | alt="" |
| Graphique de progression | Graphique en barres bleu | Progression des inscriptions 2024 + description longue |
Exemple HTML :
<button type="submit">
<img src="loupe.svg" alt="Lancer la recherche">
</button>
<img src="separateur.svg" alt="">
<a href="/">
<img src="logo.svg" alt="Accueil">
</a>
<svg aria-hidden="true" focusable="false">
</svg>
<figure role="group" aria-label="Répartition des inscriptions par année">
<img src="inscriptions.png" alt="Progression des inscriptions 2022-2024">
<figcaption>Répartition des inscriptions par année</figcaption>
</figure>
Exemple de demande :
Entrée : icône loupe dans un bouton submit du formulaire de recherche.
Sortie : Lancer la recherche
Entrée : photo déjà légendée "Marie Dupont remet le prix Accessibilité 2026".
Sortie : alt=""
Note : information déjà donnée par la légende adjacente.
Entrée : graphique sans description longue montrant les inscriptions 2022-2024.
Sortie : Progression des inscriptions 2022-2024
Note : ajouter une description détaillée des valeurs et tendances.
Sortie recommandée
Pour un lot d'images, produire un tableau court :
| Image | Rôle | Alt proposé | Note |
|---|
slide08-Image_20.png | décorative | alt="" | Redondante avec le titre adjacent |
search-icon.svg | bouton | Lancer la recherche | Action déclenchée |
chart.svg | image complexe | Progression des inscriptions 2022-2024 | Ajouter les valeurs exactes dans un tableau adjacent |
Si l'image est ambiguë, mettre À confirmer dans la note, pas dans l'attribut alt.
Pièges connus et checklist
Excuses interdites :
- "Je décris ce que je vois, ce sera plus complet" : non, l'alt remplace l'information utile.
- "Je remplis tous les alt pour éviter les champs vides" : non,
alt="" est correct pour le décoratif.
- "Je laisse l'alt long pour être exhaustif" : non, utiliser une description longue séparée.
- "Je devine le message de l'image" : non, signaler l'incertitude.
Pièges fréquents :
- Alt visuel au lieu de fonctionnel : ne pas écrire
Loupe si l'image lance une recherche.
- Alt non vide sur élément décoratif : ne pas remplir pour rassurer un validateur automatique.
- Alt trop long sur graphique : ne pas remplacer la description détaillée par une phrase de 300 caractères.
- Longueur ou mot redondant transformé en verdict RGAA : remonter un signal de revue humaine, jamais une conformité ou non-conformité automatique.
- SVG traité comme
<img> : ne pas proposer alt="" sur un <svg> ; choisir aria-hidden ou nom accessible.
- Image texte conservée sans raison : proposer du texte HTML/CSS sauf logotype ou contrainte justifiée.
- Légende visible non reliée : vérifier la structure
<figure> / <figcaption> en audit web.
- Alt inventé : ne pas déduire une information qui n'est ni visible ni donnée par le contexte.
- NE PAS transformer l'alt en légende éditoriale, résumé de slide ou commentaire pédagogique.
- JAMAIS masquer une information nécessaire avec
alt="".
Avant de livrer, vérifier :
