Checklist de conformité EAA : exigences web EN 301 549
Checklist complète pour la conformité à la Directive européenne sur l’accessibilité. Toutes les exigences du chapitre 9 de la norme EN 301 549 (contenu web) mises en correspondance avec les WCAG 2.2, avec indicateurs de tests automatisés et manuels.
Référence rapide : EN 301 549 en un coup d’œil
Comprendre la norme EN 301 549 et l’EAA
La Directive européenne sur l’accessibilité (EAA) exige que les produits et services numériques vendus aux consommateurs de l’UE soient accessibles. La norme technique à laquelle elle fait référence est la EN 301 549, qui intègre les WCAG 2.1 niveau AA pour le contenu web.
Le chapitre 9 de la norme EN 301 549 couvre les exigences relatives au contenu web. Les numéros de clause correspondent directement aux WCAG : la clause EN 301 549 9.X.Y.Z correspond à WCAG X.Y.Z. Par exemple, la clause EN 301 549 9.1.4.3 correspond à WCAG 1.4.3 (Contraste).
Comment utiliser cette checklist
- Les exigences automatisées peuvent être détectées par des outils de scan (inclly les détecte)
- Les exigences manuelles nécessitent un jugement et des tests humains
Chaque exigence indique à la fois le numéro de clause EN 301 549 (pour la documentation de conformité UE) et le critère WCAG correspondant (pour l’implémentation technique).
9.1 Perceptible
Les informations et les composants de l’interface utilisateur doivent être présentés de manière perceptible par les utilisateurs.
Contenu non textuel
Level ATout contenu non textuel présenté à l’utilisateur dispose d’une alternative textuelle servant un objectif équivalent.
Comment corriger
- -Ajoutez un texte alt à toutes les images informatives
- -Utilisez un alt="" vide pour les images décoratives
- -Fournissez des alternatives textuelles pour les graphiques complexes
Audio seul et vidéo seule (préenregistré)
Level AFournissez des alternatives pour les médias temporels : transcriptions pour l’audio, audiodescription ou texte pour la vidéo.
Comment corriger
- -Créez des transcriptions pour les podcasts
- -Ajoutez des audiodescriptions pour le contenu vidéo uniquement
Sous-titres (préenregistrés)
Level ADes sous-titres sont fournis pour tout contenu audio préenregistré dans un média synchronisé.
Comment corriger
- -Ajoutez des sous-titres synchronisés à toutes les vidéos avec audio
- -Incluez l’identification du locuteur
Audiodescription ou alternative média
Level AUne alternative pour les médias temporels ou une audiodescription est fournie pour le contenu vidéo préenregistré.
Comment corriger
- -Fournissez des audiodescriptions pour les informations visuelles dans les vidéos
Audiodescription (préenregistrée)
Level AAUne audiodescription est fournie pour tout contenu vidéo préenregistré.
Comment corriger
- -Ajoutez des audiodescriptions décrivant les éléments visuels pendant les pauses naturelles
Information et relations
Level AL’information, la structure et les relations transmises par la présentation peuvent être déterminées par programmation.
Comment corriger
- -Utilisez du HTML sémantique
- -Associez les labels aux champs de formulaire
- -Utilisez un balisage de tableau correct
Séquence significative
Level ALorsque la séquence de présentation du contenu affecte sa signification, un ordre de lecture correct peut être déterminé par programmation.
Comment corriger
- -Assurez-vous que l’ordre du DOM correspond à l’ordre visuel
- -Testez avec le CSS désactivé
Caractéristiques sensorielles
Level ALes instructions fournies pour comprendre et utiliser le contenu ne reposent pas uniquement sur des caractéristiques sensorielles.
Comment corriger
- -Évitez « cliquez sur le bouton vert » ou « voir la barre latérale »
- -Utilisez plusieurs caractéristiques d’identification
Orientation
Level AALe contenu ne restreint pas son affichage et son fonctionnement à une seule orientation d’écran.
Comment corriger
- -Prenez en charge les orientations portrait et paysage
- -Ne restreignez que si c’est essentiel
Identification de la finalité de la saisie
Level AALa finalité de chaque champ de saisie collectant des informations sur l’utilisateur peut être déterminée par programmation.
Comment corriger
- -Utilisez les attributs autocomplete sur les champs d’information personnelle
- -Ex. : autocomplete="email"
Utilisation de la couleur
Level ALa couleur n’est pas le seul moyen visuel de transmettre une information.
Comment corriger
- -Ajoutez des icônes ou des labels textuels en plus des indicateurs de couleur
- -Utilisez des motifs dans les graphiques
Contrôle du son
Level ASi un son est lu automatiquement pendant plus de 3 secondes, un mécanisme permet de le mettre en pause ou de l’arrêter.
Comment corriger
- -Évitez la lecture automatique du son
- -Fournissez des contrôles de pause/arrêt si nécessaire
Contraste (minimum)
Level AALe texte a un rapport de contraste d’au moins 4,5:1 (3:1 pour le texte de grande taille).
Comment corriger
- -Utilisez un outil de vérification du contraste
- -Le texte de grande taille (18pt+) nécessite un rapport de 3:1
Redimensionnement du texte
Level AALe texte peut être redimensionné sans technologie d’assistance jusqu’à 200 % sans perte de contenu ni de fonctionnalité.
Comment corriger
- -Utilisez des unités relatives (rem, em)
- -Testez à 200 % de zoom du navigateur
Texte sous forme d’image
Level AASi la même présentation visuelle peut être réalisée avec du texte, les images de texte ne sont pas utilisées.
Comment corriger
- -Utilisez le CSS pour le style du texte plutôt que des images
- -Les logos sont une exception
Redistribution
Level AALe contenu peut être présenté sans perte d’information ni de fonctionnalité à une largeur de 320px sans défilement bidimensionnel.
Comment corriger
- -Utilisez le design responsive
- -Testez à une largeur de fenêtre de 320px
Contraste du contenu non textuel
Level AAL’information visuelle nécessaire pour identifier les composants d’interface et les objets graphiques a un contraste d’au moins 3:1.
Comment corriger
- -Les champs de formulaire doivent avoir des bordures visibles
- -Les indicateurs de focus nécessitent un contraste de 3:1
Espacement du texte
Level AAAucune perte de contenu ni de fonctionnalité lorsque les utilisateurs ajustent les propriétés d’espacement du texte.
Comment corriger
- -Évitez les conteneurs à hauteur fixe pour le texte
- -Testez avec une hauteur de ligne et un espacement des lettres augmentés
Contenu au survol ou au focus
Level AALe contenu supplémentaire déclenché au survol/focus est masquable, survolable et persistant.
Comment corriger
- -Les infobulles doivent pouvoir être fermées avec Échap
- -Le contenu doit rester visible jusqu’à ce qu’il soit fermé
9.2 Utilisable
Les composants de l’interface utilisateur et la navigation doivent être utilisables.
Clavier
Level AToutes les fonctionnalités sont accessibles au clavier.
Comment corriger
- -Testez uniquement avec Tab, Entrée, Espace et les touches fléchées
- -Assurez-vous que tous les éléments interactifs sont focusables
Pas de piège au clavier
Level ALe focus clavier peut être déplacé hors de tout composant en utilisant uniquement le clavier.
Comment corriger
- -Testez les fenêtres modales et les boîtes de dialogue pour la navigation au clavier
- -Le focus ne doit jamais être piégé
Raccourcis clavier à caractère unique
Level ALes raccourcis clavier à caractère unique peuvent être désactivés ou reconfigurés.
Comment corriger
- -Évitez les raccourcis à touche unique
- -Offrez des paramètres pour désactiver ou reconfigurer si utilisés
Réglage du délai
Level ALes utilisateurs peuvent désactiver, ajuster ou prolonger les limites de temps.
Comment corriger
- -Prévenez les utilisateurs avant l’expiration de la session
- -Permettez la prolongation des limites de temps
Mettre en pause, arrêter, masquer
Level ALe contenu en mouvement, clignotant ou défilant peut être mis en pause, arrêté ou masqué.
Comment corriger
- -Les carrousels doivent avoir des contrôles de pause
- -Les animations de plus de 5 secondes doivent avoir des contrôles
Pas plus de trois flashs ou sous le seuil
Level ALes pages web ne contiennent rien qui flashe plus de trois fois par seconde.
Comment corriger
- -Évitez complètement le contenu clignotant
- -Maintenez la fréquence de flash sous 3 Hz
Contourner des blocs
Level AUn mécanisme est disponible pour contourner les blocs de contenu répétés sur plusieurs pages.
Comment corriger
- -Ajoutez un lien « aller au contenu principal »
- -Utilisez les landmarks ARIA
Titre de page
Level ALes pages web ont des titres qui décrivent leur sujet ou leur finalité.
Comment corriger
- -Chaque page doit avoir un titre unique et descriptif
- -Incluez le nom de la page et le nom du site
Parcours du focus
Level ASi la séquence de navigation affecte la signification, les composants focusables reçoivent le focus dans un ordre qui préserve la signification.
Comment corriger
- -L’ordre de tabulation doit suivre l’ordre de lecture visuel
- -Les fenêtres modales doivent piéger le focus de manière appropriée
Finalité du lien (selon le contexte)
Level ALa finalité de chaque lien peut être déterminée à partir du texte du lien seul ou avec le contexte déterminable par programmation.
Comment corriger
- -Évitez « cliquez ici » sans contexte
- -Utilisez aria-label si nécessaire
Accès multiples
Level AAPlus d’un moyen est disponible pour localiser une page web au sein d’un ensemble de pages.
Comment corriger
- -Fournissez une recherche sur le site
- -Incluez un plan du site
- -Utilisez une navigation claire
En-têtes et labels
Level AALes en-têtes et les labels décrivent le sujet ou la finalité.
Comment corriger
- -Utilisez des en-têtes descriptifs et uniques
- -Les labels de formulaire doivent décrire clairement la saisie attendue
Visibilité du focus
Level AAToute interface utilisateur opérable au clavier dispose d’un indicateur de focus visible.
Comment corriger
- -Ne supprimez jamais l’outline sans remplacement
- -Utilisez :focus-visible pour les styles réservés au clavier
Focus non masqué (minimum)
Level AALorsqu’un élément reçoit le focus clavier, il n’est pas entièrement masqué par du contenu créé par l’auteur.
Comment corriger
- -Les en-têtes fixes ne doivent pas couvrir les éléments focusés
- -Utilisez scroll-margin pour les éléments fixes
Gestes de pointage
Level AToute fonctionnalité utilisant des gestes multipoints ou basés sur un tracé peut être utilisée avec un pointeur simple.
Comment corriger
- -Le pincer-pour-zoomer doit avoir des alternatives par bouton
- -Les gestes de balayage doivent avoir des alternatives par bouton
Annulation du pointeur
Level APour les fonctionnalités opérées par un pointeur simple, au moins l’un des éléments suivants est vrai : pas d’événement descendant, abandon ou annulation, inversion ascendante, essentiel.
Comment corriger
- -Utilisez click/touch-end au lieu de mousedown
- -Fournissez une option d’annulation pour les actions destructrices
Label dans le nom
Level APour les composants d’interface avec des labels textuels visibles, le nom accessible contient le texte visible.
Comment corriger
- -Le nom accessible doit correspondre ou inclure le label visible
Activation par le mouvement
Level ALes fonctionnalités déclenchées par le mouvement de l’appareil peuvent être utilisées via des composants d’interface.
Comment corriger
- -Secouer-pour-annuler doit avoir une alternative par bouton
- -Les contrôles par mouvement doivent être optionnels
Mouvements de glissement
Level AAToute fonctionnalité utilisant un mouvement de glissement peut être réalisée par un pointeur simple sans glissement.
Comment corriger
- -Fournissez des boutons haut/bas pour le réordonnancement des listes
- -Le glisser-pour-réordonner nécessite une alternative en un clic
Taille de la cible (minimum)
Level AALa taille de la cible pour les entrées de pointeur est d’au moins 24 par 24 pixels CSS.
Comment corriger
- -Les boutons et liens doivent faire au moins 24x24 pixels
- -44x44 pixels recommandés pour le mobile
9.3 Compréhensible
L’information et le fonctionnement de l’interface utilisateur doivent être compréhensibles.
Langue de la page
Level ALa langue par défaut de chaque page web peut être déterminée par programmation.
Comment corriger
- -Ajoutez l’attribut lang à l’élément html
- -Utilisez le code de langue correct (en, nl, fr, etc.)
Langue d’un passage
Level AALa langue de chaque passage ou expression peut être déterminée par programmation.
Comment corriger
- -Utilisez l’attribut lang sur les éléments contenant du texte dans une langue différente
Au focus
Level ALorsqu’un composant reçoit le focus, cela ne déclenche pas de changement de contexte.
Comment corriger
- -Ne soumettez pas automatiquement les formulaires au focus
- -N’ouvrez pas de nouvelles fenêtres au focus
À la saisie
Level ALa modification du paramètre d’un composant d’interface ne provoque pas automatiquement un changement de contexte, sauf si l’utilisateur a été informé.
Comment corriger
- -Les formulaires doivent avoir des boutons de soumission explicites
- -Prévenez avant la soumission automatique
Navigation cohérente
Level AALes mécanismes de navigation répétés sur plusieurs pages apparaissent dans le même ordre relatif.
Comment corriger
- -Conservez la navigation au même emplacement sur toutes les pages
- -Maintenez un ordre de menu cohérent
Identification cohérente
Level AALes composants ayant la même fonctionnalité sont identifiés de manière cohérente.
Comment corriger
- -Utilisez des labels cohérents pour des fonctions similaires
- -Les icônes de recherche doivent toujours signifier recherche
Aide cohérente
Level ASi des mécanismes d’aide sont inclus sur plusieurs pages, ils apparaissent dans le même ordre relatif.
Comment corriger
- -Conservez les liens d’aide à un emplacement cohérent
- -Les coordonnées de contact doivent être au même endroit
Identification des erreurs
Level ASi une erreur de saisie est automatiquement détectée, l’élément en erreur est identifié et l’erreur est décrite.
Comment corriger
- -Affichez des messages d’erreur clairs
- -Identifiez le champ contenant l’erreur
Labels ou instructions
Level ADes labels ou instructions sont fournis lorsque le contenu requiert une saisie de l’utilisateur.
Comment corriger
- -Chaque champ de formulaire doit avoir un label
- -Fournissez des indications de format pour la saisie attendue
Suggestion après une erreur
Level AASi une erreur de saisie est détectée et que des suggestions sont connues, elles sont fournies.
Comment corriger
- -Suggérez des corrections lorsque c’est possible
- -Affichez le format attendu pour une saisie invalide
Prévention des erreurs (juridique, financier, données)
Level AAPour les pages comportant des engagements juridiques ou des transactions financières : réversible, vérifié ou confirmé.
Comment corriger
- -Permettez la vérification avant soumission
- -Fournissez une étape de confirmation
- -Permettez l’annulation
Saisie redondante
Level ALes informations précédemment saisies par l’utilisateur sont pré-remplies ou disponibles pour sélection.
Comment corriger
- -Pré-remplissez l’adresse de livraison à partir de l’adresse de facturation
- -Mémorisez les préférences au sein de la session
Authentification accessible (minimum)
Level AALes tests de fonction cognitive ne sont pas requis pour aucune étape d’authentification, sauf si des alternatives sont fournies.
Comment corriger
- -Autorisez les gestionnaires de mots de passe
- -Permettez le copier-coller pour les codes
- -Offrez des alternatives aux CAPTCHA
9.4 Robuste
Le contenu doit être suffisamment robuste pour être interprété de manière fiable par les agents utilisateurs, y compris les technologies d’assistance.
Nom, rôle et valeur
Level APour tous les composants d’interface, le nom et le rôle peuvent être déterminés par programmation ; les états, propriétés et valeurs peuvent être définis par programmation.
Comment corriger
- -Les composants personnalisés nécessitent des rôles ARIA
- -Utilisez aria-pressed pour les bascules
- -Utilisez aria-expanded pour les éléments dépliables
Messages de statut
Level AALes messages de statut peuvent être déterminés par programmation sans recevoir le focus.
Comment corriger
- -Utilisez les régions aria-live pour les mises à jour
- -Utilisez role="alert" pour les erreurs
- -Annoncez les états de chargement
Questions fréquemment posées
Quelle est la relation entre la norme EN 301 549 et les WCAG ?
La norme EN 301 549 est la norme européenne pour l’accessibilité des TIC. Le chapitre 9 (Web) intègre directement les WCAG 2.1 niveau AA. Les numéros de clause correspondent directement : la clause EN 301 549 9.X.Y.Z correspond à WCAG X.Y.Z. Si vous êtes conforme aux WCAG 2.2 AA, vous respectez les exigences web de la norme EN 301 549.
L’EAA s’applique-t-elle à mon entreprise située hors de l’UE ?
Oui, si vous vendez des produits ou services numériques à des consommateurs de l’UE. L’EAA s’applique en fonction de l’emplacement de vos clients, et non de celui de votre siège social. Les entreprises américaines et britanniques vendant à des clients de l’UE doivent s’y conformer.
Quelle est la date limite de conformité à l’EAA ?
L’EAA est entrée en vigueur le 28 juin 2025. Tous les produits et services couverts doivent désormais être accessibles. Il existe une période de transition jusqu’en juin 2030 pour les produits existants mis sur le marché avant juin 2025.
Quelles sont les sanctions en cas de non-conformité ?
Les sanctions varient selon les États membres de l’UE, car chaque pays applique l’EAA via sa législation nationale. Les sanctions peuvent inclure des amendes, des mesures correctives obligatoires et, dans certains cas, le retrait de produits du marché. En France, l’ARCOM (Autorité de régulation de la communication audiovisuelle et numérique) et le Défenseur des droits supervisent l’application des règles d’accessibilité.
Dois-je fournir une déclaration d’accessibilité ?
Oui, l’EAA exige une déclaration d’accessibilité décrivant le statut de conformité, les limitations connues et les coordonnées de contact. Cette déclaration doit être mise à jour lorsque vous effectuez des modifications importantes. inclly peut vous aider à générer des déclarations d’accessibilité conformes aux exigences de l’UE à partir de vos données de scan.
Continuer à apprendre
Explorez des guides connexes pour soutenir votre conformité en matière d’accessibilité européenne.
Loi européenne sur l’accessibilité
Ce que les entreprises américaines et britanniques doivent savoir sur l’EAA en 2026.
Guide EN 301 549
La norme européenne d’accessibilité expliquée avec des découpages par chapitre.
EAA vs WCAG
Comment la Loi européenne sur l’accessibilité se rapporte à WCAG et ce que signifie la conformité.
Exigences ACM en matière d’accessibilité
Calendriers d’application de l’EAA aux Pays-Bas et étapes de conformité.
Prêt à vérifier votre conformité EAA ?
inclly scanne votre site web par rapport aux exigences de la norme EN 301 549 et fournit des recommandations de correction spécifiques. Découvrez exactement ce qui doit être corrigé pour atteindre la conformité UE.