Vérifier l'accessibilité

[Carolinedanslesnuages]

Layout

• Déclarer un doctype valide.
• Déclarer toujours la langue de traitement sur la balise html.
• Valider le code source.
• Structurer votre page avec les landmarks ARIA.
• Si le site est en HTML5, structurer la page avec les balises HTML5 et les landmarks ARIA.

Navigation

• Définir des titres de pages pertinents.
• Implémenter un lien d'accès rapide au contenu.
• Implémenter un lien d'accès rapide à la navigation principale.
• Implémenter des liens d'évitement pour tous les groupes de liens importants.
• Implémenter deux systèmes de navigation au moins.

Contenus

• Donner un titre pertinent aux cadres en ligne.
• Utiliser les balises appropriées pour structurer les listes.
• Indiquer les changements de langue et de sens de lecture.
• Indiquer les ouvertures de nouvelles fenêtres.
• Indiquer le format et le poids des documents en téléchargements.

Tableaux

• Implémenter le role="presentation" sur les tableaux de mise en forme.
• Déclarer les cellules d'en-têtes dans des éléments th.
• Implémenter un attribut scope="col" pour les en-têtes de colonnes.
• Implémenter un attribut scope="row" pour les en-têtes de lignes.
• Utiliser les relations id, headers pour relier les cellules de données à leurs en-têtes dans le cas de cellules fusionnées.

Liens

• Attention aux liens vides.
• Définir des intitulés de liens pertinents.
• Respecter la construction des titres de liens.

Formulaires

• Définir des étiquettes pertinentes.
• Utiliser une méthode conforme pour relier les champs à leurs étiquettes respectives.
• Pour les champs obligatoires avec un format de saisie, pensez toujours à l'indiquer (de préférence dans l'étiquette du champ).
• Pour les erreurs de saisie, reliez l'erreur au champ concerné et indiquez un exemple de saisie réelle lorsque nécessaire.

Focus

• La prise de focus est visible, les valeurs de l'outline ne la dégradent pas.
• Une mise en forme autre que la couleur permet d'identifier les liens ainsi que leur survol et la prise de focus.
• Lors de la navigation au clavier la prise de focus est cohérente et ne reste pas bloquée sur un élément (piège au clavier).

Respecter la distinction fond et forme

• Aucun contenu ne disparaît lors de l'activation ou de la désactivation des styles.
• La page reste compréhensible et les différentes zones sont correctement ordonnées lorsque les styles sont désactivés.

Images

• Définir un alt sur toutes les images img.
• Définir un alt="" sur les images de décoration.
• Définir une alternative conforme et pertinente lorsqu'elle est porteuse d'information.
• Éviter le plus possibles les images textes

Informations par la forme et la couleur

• Ne pas donner d'informations uniquement par la couleur.
• Ne pas donner d'informations uniquement par la forme.
• Implémenter des alternatives à la couleur et à la forme qui soient pertinentes.

Agrandissement des caractères

• Ne pas définir des tailles de caractères en pixels.
• Eviter de fixer des hauteurs de boîte en pixels.
• Utiliser la propriété overflow:hidden avec précaution.
• Définir si possible des points de rupture en em.

Multimédia

• Faire précéder toutes les vidéos d'un titre.
• Fournir un lien clairement identifié permettant d'accéder à l'alternative accessible des médias non temporels.