Accessibilité
La page d'accueil est-elle utilisable sans les yeux ? Langue, textes alternatifs, libellés, liens — lus dans le HTML servi.
Mis à jour le 11 septembre 2026
Sur cette page
Ce qu'un lecteur d'écran annonce se lit dans le HTML servi, avant tout JavaScript : la langue de synthèse vocale, le texte de remplacement des images, le nom des champs et des liens. Une refonte qui remplace les libellés par des placeholders, ou un composant d'icônes qui génère des liens sans texte, ne casse rien de visible — et personne ne s'en aperçoit avant le courrier d'un utilisateur, ou d'un avocat. C'est un contrôle du site : créé par PostShip, hors quota, exécuté au déploiement.
Ce que PostShip vérifie
Une lecture statique du HTML de la page d'accueil, sans navigateur. PostShip ne mesure donc ni les contrastes, ni le focus, ni ce que le JavaScript ajoute : seulement ce qui est faux dans le HTML tel qu'il est servi, et qui l'est donc pour tout le monde.
| Règle | Ce qui compte |
|---|---|
| Langue | html lang="…" présent et non vide. Sans lui, le lecteur d'écran prononce le français avec les règles de sa langue par défaut — souvent l'anglais — et le résultat est incompréhensible. C'est le défaut le plus courant et le moins cher à corriger. |
| Images | Chaque img doit porter l'attribut alt. alt="" est valide : c'est la façon normée de dire « décorative ». Ce qui est faux, c'est l'attribut absent — le lecteur d'écran lit alors le nom du fichier, et hero-v3-final.jpg n'aide personne. role="presentation" et aria-hidden="true" retirent l'image de l'arbre : rien à dire. |
Titre h1 | Au moins un. Plusieurs : avertissement. |
| Champs | Chaque input, select, textarea doit avoir un nom accessible : aria-label, aria-labelledby, title, un label for qui pointe vers son id, ou un label parent. Un placeholder ne suffit pas : il disparaît dès qu'on tape et la plupart des lecteurs d'écran ne l'annoncent pas. Les input de type hidden, submit, button, reset et image sont exemptés — ils prennent leur nom ailleurs. |
| Liens | Chaque a doit avoir un texte : contenu, aria-label, aria-labelledby, title, ou une image avec alt. Le défaut classique est le bouton-icône <a href><svg/></a> : dans la liste des liens, l'utilisateur entend « lien, lien, lien ». Le <title> d'un SVG compte. |
| Identifiants | Un id présent deux fois ne casse pas l'affichage, mais label for et aria-labelledby pointent vers le premier et se trompent en silence sur les suivants. Avertissement, dix listés au plus. |
<title> | Le titre du document (pas celui d'un SVG en ligne) — première chose annoncée à l'arrivée. Avertissement : les balises et l'indexabilité ont d'autres raisons de le regarder, on ne fait pas échouer deux fois. |
Un score sur 100 accompagne le verdict : chaque manque coûte 20 points, chaque avertissement 5. Le manque est ce qui bloque quelqu'un ; l'avertissement, ce qui le gêne.
Régler
Rien à créer. Projet → Santé → Contrôles du site → Accessibilité. Le détail de la cible donne les compteurs — images sans alt sur le total, champs sans libellé, liens vides, nombre de h1, identifiants en double — et le score.
Les corrections sont dans votre gabarit, pas dans PostShip : lang sur la balise html, un alt sur chaque image (vide si décorative), un label par champ, un aria-label sur chaque bouton-icône. Un composant corrigé corrige toutes les pages qui l'utilisent.
Ce qui déclenche une alerte
Manques — la cible échoue :
| Code | Phrase |
|---|---|
a11y_lang_absent | La langue de la page n'est pas déclarée (<html lang>). |
a11y_images_sans_alt | Des images n'ont pas de texte alternatif. |
a11y_h1_absent | La page n'a pas de titre <h1>. |
a11y_champs_sans_label | Des champs de formulaire n'ont pas d'étiquette. |
a11y_liens_vides | Des liens n'ont aucun texte lisible. |
Avertissements — notés, sans alerte :
| Code | Phrase |
|---|---|
a11y_h1_multiples | Plusieurs <h1> sur la page. |
a11y_ids_dupliques | Des identifiants HTML sont en double. |
a11y_titre_absent | La page n'a pas de <title>. |
L'alerte nomme la première cause en termes de changement — Des images ont perdu leur texte alternatif — https://acme.fr/, La page n'a plus de titre <h1> — https://acme.fr/ — puisqu'elle part au déploiement qui a introduit le défaut. Un échec coûte au plus 10 points au Ship Score, catégorie « hygiène du site », plafonnée avec les autres contrôles.
Limites et plans
| Free | Pro | Team | |
|---|---|---|---|
| Contrôle et verdict sur Santé | Oui | Oui | Oui |
| Alerte envoyée | Non | Oui | Oui |
Une seule page est analysée : l'accueil. C'est là que vivent l'en-tête, le pied de page et les composants partagés, donc la plupart des défauts de gabarit.
Dépannage
Pourquoi « des images sans alt » alors que mon composant Image en met toujours un ?
Cherchez les images hors du composant : un logo dans le pied de page, une image de fond en img, un pixel de suivi. Le détail donne le compte ; une recherche de <img sans alt= dans le HTML rendu (pas dans le code source) les trouve.
Mon formulaire utilise des placeholders, pourquoi est-il en échec ?
Parce qu'un placeholder n'est pas un libellé. Gardez-le si vous voulez, et ajoutez un label — visuellement masqué s'il le faut — ou un aria-label sur le champ.
Le score est bas mais rien n'est en échec
Plusieurs avertissements à 5 points chacun. Ils ne bloquent personne ; ils s'affichent pour que vous les régliez quand vous passez par là.