La checklist accessibilité d’une landing page

Une landing page accessible, c’est une page qu’une personne peut lire, parcourir au clavier et envoyer sans souris ni vue parfaite. Cette checklist accessibilité démarre sur les quatre vérifications qui attrapent la majorité des échecs : un contraste du texte d’au moins 4,5 pour 1, des contrôles interactifs d’au moins 24 par 24 pixels CSS, un état de focus visible sur chaque contrôle, et un vrai label sur chaque champ de formulaire. Les quatre coûtent peu à régler en design et cher à rattraper après coup.

C’est sur le contraste que la plupart des landing pages échouent

Les WCAG fixent le rapport de contraste minimum du texte courant à 4,5 pour 1 par rapport à son fond, au niveau AA. Le grand texte passe à 3 pour 1. Grand veut dire au moins 18 points, ou 14 points en gras, soit environ 24 px ou 18,5 px en gras dans le CSS. Les valeurs ne sont pas arrondies, donc 4,499 pour 1 échoue. Le gris clair sur blanc pour le corps de texte est le coupable habituel. Vient ensuite le texte blanc sur une photo, où le contraste tient en haut de l’image et s’écroule en bas.

Les boutons et les icônes ont aussi besoin de contraste

Le texte n’est que la moitié du sujet. Les WCAG demandent 3 pour 1 sur les composants d’interface et les objets graphiques porteurs de sens, par rapport aux couleurs voisines, également au niveau AA. Ça couvre la bordure d’un champ, le contour d’un bouton, une case à cocher, une étoile de notation, et toute icône qui porte du sens à elle seule. Un contour de champ gris pâle sur une carte blanche est l’oubli le plus fréquent sur une landing page. C’est aussi l’élément exact que les gens doivent repérer avant de pouvoir convertir.

Donnez 24 par 24 pixels à chaque zone tactile

Les WCAG 2.2 ont ajouté une règle de taille de cible au niveau AA. Les cibles interactives devraient faire au moins 24 par 24 pixels CSS. Des cibles plus petites sont acceptées quand elles sont assez espacées pour qu’un cercle de 24 pixels centré sur chacune n’en chevauche aucune autre. Les liens à l’intérieur d’une phrase font exception. En pratique, ça touche les boutons-icônes, le bouton de fermeture d’une modale, les icônes sociales d’un pied de page, et les liens serrés de la ligne légale en bas de page.

L’accès clavier se teste en cinq minutes

Lâchez la souris et appuyez sur Tab depuis le haut de la page. Chaque lien, bouton, champ et contrôle de menu devrait prendre le focus dans un ordre qui suit la mise en page, et vous devriez toujours voir où vous êtes. Ce sont les composants sur mesure qui échouent le plus souvent. Un slider fait de divs vous piège. Une modale vidéo garde le focus. Un header collant cache l’élément que vous venez d’atteindre. Si vous ne pouvez pas atteindre et déclencher votre bouton principal au clavier, la page est cassée.

Donnez un vrai label à chaque champ de formulaire

Un placeholder disparaît à la seconde où quelqu’un tape, donc celui qui perd le fil n’a plus rien à quoi se raccrocher. Les lecteurs d’écran traitent le texte de placeholder de façon inégale. Mettez un label visible au-dessus de chaque champ. Gardez le placeholder pour un exemple de format si vous en voulez un, et reliez proprement le label au champ, pour qu’un tap sur le label donne le focus au champ. Les messages d’erreur doivent dire avec des mots ce qui n’a pas marché. La couleur seule ne peut pas être ce qui signale un champ invalide.

Les règles européennes arrivées en 2025

L’European Accessibility Act est entré en vigueur le 28 juin 2025. Il s’applique aux services vendus aux consommateurs dans l’Union européenne, y compris l’e-commerce, la banque et la réservation de transport. Il s’appuie sur la norme EN 301 549, elle-même construite sur le niveau AA des WCAG. Si vous vendez à des consommateurs européens, l’accessibilité est passée de bonne pratique à obligation de conformité. Le contrôle passe par les États membres plutôt que par un organisme unique, ce qui rend l’exposition plus difficile à prévoir, et pas plus petite.

Passez cette checklist accessibilité en vingt minutes

Commencez par un outil automatique, puis ignorez le score, parce que les outils automatiques n’attrapent qu’une partie de ce qui compte. Parcourez toute la page avec Tab. Prélevez chaque couleur de texte et de bouton avec un vérificateur de contraste. Zoomez le navigateur à 200 % et confirmez que rien ne se chevauche ni ne se fait couper. Activez le lecteur d’écran intégré à votre système et écoutez le hero et le formulaire. Corrigez les valeurs de contraste dans vos design tokens plutôt que page par page, sinon le même défaut repart avec la page suivante.