Guide de conformité aux WCAG | AU NOUVEAU BLOG

Introduction aux WCAG

Les directives pour l’accessibilité du contenu Web (WCAG) définissent comment rendre le contenu Web plus accessible aux personnes handicapées. Ces directives rendent également le contenu Web plus utilisable par les personnes âgées, les personnes malvoyantes, daltoniennes et dont les capacités changent en raison du vieillissement, et améliorent souvent la convivialité pour les utilisateurs en général.

Les WCAG sont organisés selon quatre principes principaux : perceptible, exploitable, compréhensible et robuste.

Règles des directives pour l’accessibilité du contenu Web (WCAG) :

ÉTAPE 1:

La fonctionnalité Passer au contenu principal doit être implémentée, au clic de laquelle le focus doit se poser sur le premier élément de contenu principal.

ÉTAPE 2:

• Identification des points de repère: Les points de repère doivent être spécifiés dans le code afin qu’ils puissent être racontés et identifiés à l’aide des touches de raccourci D/R
• Titres de pages: Chaque page de la candidature doit avoir un titre spécifique à la page.

ÉTAPE 3:

Le rapport de contraste des couleurs est la valeur numérique attribuée à la différence de lumière entre le premier plan et l’arrière-plan. Le rapport de luminosité minimum pour tout contenu coloré doit être de 4:5 entre la couleur de premier plan (par exemple, texte, liens, etc.) et la couleur d’arrière-plan.

• AA: Le texte a un rapport de contraste d’au moins 4,5 : 1 pour un texte de taille normale (14 px) et d’au moins 3 : 1 pour un texte à grande échelle (au moins 18/24 px)
• AAA: Le texte a un rapport de contraste d’au moins 7 : 1 pour un texte de taille normale (14 px) et d’au moins 4,5 : 1 pour un texte à grande échelle (au moins 18/24 px)

=> Vérifiez le contraste des couleurs grâce à cet outil : Color Contrast Analyzer (CCA).

ÉTAPE 4:

• Sensible: Le site doit prendre en charge une vue zoomée jusqu’à 400 % et doit également prendre en charge les modifications de mise en page (1024×1280).
• Espacement du texte: Le contenu et la fonction conservent leur sens lorsque les utilisateurs modifient les éléments de l’espacement du texte.
  
  Hauteur de ligne (espacement des lignes) au moins 1,5 fois la taille de la police ;
  Espacez les paragraphes suivants d’au moins 2 fois la taille de la police ;
  Espacement des lettres (suivi) à au moins 0,12 fois la taille de la police ;
  L’espacement des mots doit être au moins 0,16 fois la taille de la police.

Redimensionner le texte: Le texte peut être redimensionné à 200 % sans perte de contenu ou de fonction.

ÉTAPE-5 :

• Narration: Nom et valeur Narration, les étiquettes, les titres et les textes alternatifs appropriés pour les images et les identifiants doivent être définis. Pensez également aux liens de pagination en bas de la page. Message d’erreur/Message de réussite/Alertes/Avertissements (État) Doit être raconté.
• Narration au clavier: Navigation au clavier (Mode Focus) Chaque élément interactif doit pouvoir être focalisé. Tout élément interactif, par exemple une description, ne doit pas pouvoir être focalisé. La navigation au clavier doit être accessible à l’aide de touches de raccourci telles que T (aller au tableau), H (aller au titre), F (aller au formulaire), K (aller au lien), etc. Navigation au niveau du titre : les titres doivent être dans un ordre séquentiel. en utilisant le mode de mise au point et la touche de raccourci H.
• Ordre de navigation séquentiel: Tous les éléments doivent être accessibles à l’aide de la touche TAB dans le même ordre qu’ils apparaissent à l’écran. Problème d’ID en double, généralement identifié par l’outil Accessibility Insights for Web. Chaque élément HTML légitime doit avoir une valeur UNIQUE pour l’attribut id. Les liens doivent être soulignés tout au long de la candidature.

ÉTAPE-6

• Formulaire: Tous les champs obligatoires doivent être accompagnés de la mention « Obligatoire », ainsi que d’une description de l’état et du rôle. L’état des contrôles interactifs doit être raconté. Exemple : Développé, Réduit, Coché, Non coché, Indisponible (désactivé).
• Gestion des listes déroulantes – Tout le contenu des listes déroulantes (éléments de liste/éléments de menu) doit être accessible à l’aide du clavier.

ÉTAPE-7

• Gestion des boîtes de dialogue: Lorsque la boîte de dialogue s’ouvre, le focus doit être sur l’élément interactif et le focus ne doit pas quitter la boîte de dialogue jusqu’à sa fermeture. La boîte de dialogue doit être fermée en cliquant sur le bouton Annuler/Fermer et en appuyant sur la touche ESC n’importe où dans la boîte de dialogue ouverte. Et lorsque la boîte de dialogue est fermée, le focus doit être défini à partir de l’endroit où vous avez cliqué.

ÉTAPE-8

Lecteurs d’écran (NVDA, JAWS) (mode Focus et Parcourir)
Analyseur de contraste de couleur (CCA)
Informations sur l’accessibilité pour le Web (FastPass)
Phare
Espacement du texte