Validation préliminaire en 15 points

Ceci ne constitue pas l’ensemble des normes d’accessibilité: il vous faut référer les fournisseurs aux règles complètes sur Repères.

Navigation et structure de site

Navigation par clavier

En vue desktop, la navigation doit pouvoir s’effectuer à partir de la touche «tabulation» du clavier. Règle d’accessibilité: html et css

Focus

En vue desktop lors de la navigation par tabulation, le focus doit également être pris en charge afin d’identifier la position courante. Règle d’accessibilité: html et css

Liens d’évitement

Lors de la navigation par tabulation, les liens d’évitement «Aller au menu principal», «Aller au contenu principal», «Aller au pied de page», et «Aide à la navigation» doivent être présents. Règles d’accessibilité: html et css; design graphique

Menu et sous-navigation

Dans chaque menu, la position courante doit avoir un aspect différent pour se distinguer des autres éléments du menu ou de la sous-navigation. Règle d’accessibilité: design graphique

Contenu visuel

Description des images

Les images informatives doivent afficher un texte alternatif en tout temps. Cette règle n’est pas nécessaire pour les images décoratives. Règle d’accessibilité: html et css

Illustration de données sous forme d’images

Toutes les données doivent pouvoir être lues par un lecteur d’écran; les images informatives incluant des données doivent pouvoir être présentées sous forme de lien html, ou intégrées dans le champ long du CMS. Règle d’accessibilité: design graphique

Sens véhiculé par la couleur

L’information doit demeurer compréhensible pour qui ne perçoit pas la couleur: éviter une légende associée à la couleur et privilégier l’information près du contenu. Règles d’accessibilité: design graphique; contributeur éditorial

Contraste

Les ratios de contrastes entre un arrière-plan et la typographie doivent être de 1:3 (fonte de plus de 18 px ou de 14 à 18 px en gras), ou de 1:4,5 (fonte de 17 px et moins). Règle d’accessibilité: design graphique + bons outils 1 ou 2 pour valider les contrastes

Contexte textuel

Interlignage

L’interlignage d’un texte doit être d’un ratio d’1:3 pour les textes courts (titre, amorce etc) et de 1:5 pour tout texte courant. Règle d’accessibilité: design graphique

Alignement

Les textes ne doivent jamais être justifiés, sauf pour de courts textes (titres, amorce). L’alignement à gauche pour le texte courant est recommandé. Règle d’accessibilité: design graphique

Agrandissement

Les textes doivent pouvoir être codés de façon à être lus correctement sans se chevaucher lorsque l’utilisateur double la taille du texte à l’aide des fonctions d’agrandissement de son navigateur. Règle d’accessibilité: html et css

Structure du contenu

Le contenu doit être structuré de manière hiérarchique pour faciliter la lecture par un lecteur d’écran, du niveau H2 à H3 à H4. Règle d’accessibilité: contributeur éditorial

Contenu animé

Système de mise en pause

Les carrousels et les contenus animés tel que les vidéos doivent afficher un mécanisme de mise en arrêt (play/pause) pour pouvoir soit y lire le contenu, soit arrêter l’image animée (lors d’une animation de plus de 6 secondes ou animée en boucle). Règle d’accessibilité: design graphique

Boutons et liens

Intitulés

Les liens et les boutons doivent avoir des intitulés explicites et clairs à comprendre pour qui ne voit pas l’interface (contre-exemple: «Cliquer ici») Règles d’accessibilité: design graphique; contributeur éditorial

Zone réactive

La zone cliquable des liens et les boutons doit être suffisamment grande (36 px x 36 px sur desktop, 48 px x 48 px sur mobile). Règle d’accessibilité: design graphique