Checklist Renow beta 4.2 accessibilité

Cette checklist contient 82 critères. Leur respect permettra de veiller à une bonne accessibilité du site.

Code

10 critères
Numéro
Rôle Description
CD.001 Accessibilité
Chaque page comporte la déclaration de type document «!doctype html»
CD.002 Accessibilité
Les balises et les rôles ne sont pas détournées de leur fonction (au regard du type de document déclaré)
CD.003 Accessibilité
Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?
La zone d'en-tête de la page possède un rôle ARIA banner ;
Le menu de navigation principal possède un rôle ARIA navigation ;
La zone de contenu principal possède un rôle ARIA main ;
La zone de pied de page possède un rôle ARIA contentinfo ;
Le moteur de recherche sur le site possède un rôle ARIA search ;
Les rôles ARIA banner, main, contentinfo et search sont uniques dans la page ;
Le rôle ARIA navigation est réservé aux zones de navigations principales et secondaires.
CD.004 Accessibilité
Les textes cachés visuellement sont utilisés de manière compréhensible et ont un intérêt.
CD.005 Rédacteur Accessibilité
Dans le contenu des pages, les titres suivent l'ordre hiérarchique de titre 2 (h2) à titre 5 (h5) .
CD.007 Accessibilité
La langue par défaut est précisée dans le tag HTML du site.
Au début de chaque page, la propriété lang doit être renseigné au niveau de la balise html, exemple si la page est en français: "html ...lang="fr" "
CD.008 Accessibilité
Les changements de langue dans le texte et dans les valeurs de l'attribut HTML sont indiquées
Pour chaque paragraphe, la propriété lang doit être renseignée au niveau de la balise html, exemple si un paragraphe est en allemand: lang="de" < ...lang="fr">
CD.009 Rédacteur Accessibilité
Les citations doivent utiliser le balisage Q ou BLOCKQUOTE : elles ne doivent pas être simulées à l'aide de guillemets directement saisis dans le texte ou d'italique
CD.010 Rédacteur Accessibilité
Les listes à puces ou numérotées sont correctement structurées (à l'aide des balises UL et OL)
CD.011 Accessibilité
Si un contenu (notamment, emoticon, art ASCII,...) ou une fonctionnalité du site nécessite une alternative pour être accessible, l'information donnée par cette alternative est équivalente à l'information fournie par la version d'origine.

Contenu

10 critères
Numéro
Rôle Description
CT.001 Rédacteur
Accessibilité
Les informations sont placées de manière exclusive dans l'arborescence du site
CT.007 Rédacteur
Accessibilité
La rubrique "A propos du site" donne des informations sur l'objet, l'éditeur et la qualité du site ainsi que la déclaration d'accessibilité.
CT.013 Rédacteur
Accessibilité
La première mention d'une abréviation ou d'un acronyme au sein d'une page donne l'intitulé complet suivi du sigle.
CT.014 Rédacteur
Accessibilité
Les pages sont organisées à l'aide de titres explicites et concis qui identifient l'information apportée par chaque section.
CT.015 Accessibilité
Le poids des pages n'excède pas 600Ko, sauf exception argumentée
CT.017 Accessibilité
Le site s'affiche sans scroll horizontal (notamment les images quelques soient le support).
CT.020 Rédacteur
Accessibilité
Les documents proposés en téléchargement sont accessibles ou ont une alternative accessible (avec les mêmes informations et actions)
CT.025 Rédacteur
Accessibilité
Pour chaque élément proposé en téléchargement, le type, le poids du fichier et, si besoin la langue, est indiqué dans le texte de lien en respectant le formalisme suivant : Titre de l'élément - lang (type, poids en Ko, Mo ou Go) - nouvelle fenêtre
CT.026 Rédacteur
Accessibilité
Les documents téléchargeables sont de préférence proposés au format PDF (largement répandus)
CT.029 Rédacteur
Accessibilité
La structure et les informations d'une page disponible en plusieurs langues ne varient pas d'une version à l'autre.

Formulaire

14 critères
Numéro
Rôle Description
FM.002 Graphiste
Accessibilité
Les champs de formulaire ont un label explicitement associé et pertinent.
Le label contient la propriété for et l'input contient un id identique
FM.003 Accessibilité
Les labels sont placés au dessus de leur champs
FM.004 Accessibilité
Les champs sont visuellement regroupés (fieldset) et possèdent une légende, si cela facilite la compréhension.
FM.005 Accessibilité
Les groupes d'options des champs SELECT sont balisés avec des éléments OPTGROUP dotés d'un libellé via l'attribut LABEL.
FM.011 Graphiste
Accessibilité
Les actions de formulaires ne sont pas mis en forme comme des liens.
FM.012 Graphiste
Accessibilité
Les libellés des boutons indiquent clairement l'action de manière concise.
FM.013 Accessibilité
Le formulaire peut être validé à l'aide de la touche entrée.
FM.015 Graphiste
Accessibilité
Les champs obligatoires sont différenciés par une astérisque rouge dans leur LABEL, sous la forme "Intitulé * :".
La propriété "required" doit également être présente sur le champs
FM.016 Accessibilité
La note "* Champ obligatoire" est spécifié au niveau du formulaire.
FM.017 Accessibilité
Les messages d'erreurs indiquent la nature de l'erreur ainsi que les moyens de correction de l'erreur directement après le champ
FM.019 Accessibilité
En cas d'erreur, toutes les informations saisies par l'utilisateur (correctes et erronées) sont conservées et modifiables.
FM.020 Accessibilité
Pour chaque formulaire recueillant des informations personnelles ou ayant des conséquences au delà du site, l'envoi des données se fait en 3 étapes distincts:
-la saisie
- la confirmation (avec modification possible)
- le résultat de l'envoi des données (avec, si réussite, récapitulatif des informations)
FM.021 Accessibilité
Lorsqu'un format de données est attendu, l'utilisateur est informé.
FM.022 Accessibilité
Lorsqu'une aide contextuelle masquée est proposée, elle apparait dans un encart à proximité du champs tout en permettant la saisie.

Image et Multimédia

7 critères
Numéro
Rôle Description
IM.001 Rédacteur Accessibilité
Les alternatives textuelles d'images de contenu sont concises, limitées à l'information essentielle apportée spécifiquement par l'image. Elles ne font pas doublon avec l'information textuelle déjà présente dans le corps du texte.
IM.002 Rédacteur Accessibilité
L'information apportée par une image complexe est explicitée dans le corps du texte, et l'image a une alternative textuelle permettant de localiser la description.
IM.003 Rédacteur Accessibilité
Les éléments graphiques qui n'apportent pas d'information nécessaires à la compréhension du contenu possèdent une alternative textuelle vide.
IM.004 Rédacteur Accessibilité
L'alternative textuelle d'une image-lien ou d'un bouton graphique indique la cible ou la fonction du lien ou du bouton.
IM.005 Accessibilité
Les sons et/ou vidéos sont uniquement déclenchés par l'utilisateur.
IM.006 Accessibilité
Chaque changement d'affichage (vidéo, modale, slider,...) est contrôlable par l'utilisateur.
IM.007 Rédacteur
Accessibilité
L'information délivrée dans les documents audio et vidéo est reproduite sous forme de transcriptions textuelles.

 

 

Navigation

19 critères
Numéro
Rôle Description
NV.003 Rédacteur Accessibilité
Les menus de navigation sont composés uniquement de liens vers des pages HTML internes du produit.
NV.006 Rédacteur
Accessibilité
Les titres de pages de même niveau sont définis de manière homogène
NV.007 Accessibilité
Les titres affichés dans la barre de titre du navigateur respectent le formalisme suivant: "Titre de la page en cours - Nom du site"
NV.010 Rédacteur
Accessibilité
Chaque titre de page (H1) est unique.
NV.011 Rédacteur
Accessibilité
Aucune page cachée n'est présente : toutes les pages internes sont accessibles depuis une des zones de navigations (primaires, secondaires ou rubriques de support).
NV.013 Accessibilité
Le chemin de localisation décrit de manière fidèle la position de l'utilisateur dans le produit (site, application) et reprend tous les titres des pages parentes associées. Le dernier élément correspond à la page en cours.
NV.017 Rédacteur Accessibilité
Les rubriques de support suivantes sont obligatoires : Plan du site, Contact, A propos, Aspects légaux.
NV.018 Accessibilité
Le plan du site / application reprend, dans le même ordre que l'arborescence, les titres exacts de toutes les pages des 3 premiers niveaux des navigations primaire et secondaire et des rubriques de support.
NV.019 Accessibilité
Aucune fenêtre pop-up n'est autorisée (ouverture inopinée et non renseignée, non anticipable par l'utilisateur de nouvelles fenêtres, encore appelées fenêtres surgissantes ou intruses).
NV.020 Accessibilité
Les changements d'affichage (lancement de vidéo, affichage d'une modale, nouvelle fenêtre ...) sont uniquement issus d'une action de l'utilisateur. Sauf alerte importante et slider.
NV.021 Accessibilité
Toutes les actions peuvent être accomplies à l'aide du clavier
NV.022 Accessibilité
Le parcours au clavier est visible et anticipable par l'utilisateur
NV.023 Graphiste
Accessibilité
Chaque élément d'interaction possède une zone d'interaction de
- soit une surface minimum de 32px sur 20px
- soit une surface minimum de 20px sur 12px et une marge de 6px avec les éléments alentours.
NV.024 Rédacteur
Accessibilité
Les libellés de liens sont significatifs et univoques.
NV.025 Rédacteur Graphiste
Accessibilité
Le contenu ne contient pas de lien ayant un texte identique pour des cibles différentes.
NV.027 Rédacteur
Accessibilité
Chaque lien interne (pointant vers une page du produit) s'ouvre dans la fenêtre courante.
NV.028 Rédacteur
Accessibilité
La longueur des textes de lien proposés dans le corps de texte est comprise entre 5 et 80 caractères.
NV.037 Accessibilité
Le changement de version linguistique est proposé sous forme de lien rédigé dans les langues cibles
NV.038 Rédacteur Accessibilité
Pour des versions du site entièrement identiques en terme de contenu, l'accès aux versions linguistiques alternatives est présent sur toutes les pages du site de manière à ce que l'utilisateur accède d'1 clic à la traduction de la page en cours de consultation

Présentation

16 critères
Numéro
Rôle Description
PR.002 Accessibilité Les liens d'évitement "aller au contenu", "aller à la navigation", "aller à la recherche" sont présents, au même endroit sur chaque site, s'ils ont un intérêt. Ils sont visibles au focus.
PR.003 Graphiste
Accessibilité
L'information ne doit pas être donnée uniquement par la couleur, la forme, la taille ou la position.
PR.004
Accessibilité
L'information est compréhensible (contenu + ordre par type de contenu) lorsque l'on désactive les feuilles de styles
PR.005
Accessibilité
Les textes restent lisibles et ne se chevauchent pas en zoom 200%.
PR.007 Accessibilité Les informations de même niveau (titres principaux, titres secondaires, texte standard, légendes, box ...) se présentent partout de la même manière.
PR.009 Rédacteur
Graphiste
Accessibilité
Les textes mis en images ne sont utilisés que si un texte mis en forme par des styles CSS ne peut pas produire l'effet attendu (boutons, menu navigation, contenus?).
PR.010
Graphiste
Accessibilité
Les pages n'imposent pas d'effets de flash, des changements de luminosité ou des clignotements.
PR.014 Accessibilité Si des tableaux sont utilisés pour gérer des aspects de présentation, le contenu est compréhensible lorsqu'il est linéarisé.
PR.015 Rédacteur

Accessibilité
Les liens externes (renvoyant vers un autre site) et les éléments téléchargeables s'ouvrent dans une nouvelle fenêtre. L'indication d'ouverture dans une nouvelle fenêtre est précisée dans l'attribut TITLE (intitulé - nouvelle fenêtre).
PR.017 Rédacteur

Graphiste
Accessibilité
La taille minimale du texte doit être lisible quelle que soit sa fonction (une taille inférieure à 12px est souvent illisible).
PR.021 Graphiste
Accessibilité
Les liens de type "contenu" sont soulignés ou ont un contraste avec le texte alentour de 3.1 minimum.
PR.022 Accessibilité L'effet de roll-over des liens de contenu non-soulignés font apparaître un soulignement.
PR.024 Accessibilité L'onglet actif est relié visuellement à la portée de son contenu.
PR.025 Graphiste
Accessibilité
Le contraste entre l'avant-plan et l'arrière-plan est au moins de 4,5:1. Pour les textes de plus de 18 pt ou 14 pt gras et les éléments graphiques (pictogramme,...) de plus de 5px, il est au moins de 3:1.
PR.026 Graphiste
Accessibilité
Le texte principal de la zone de contenu doit avoir un ratio de contraste minimum de 5,5:1.
PR.027 Graphiste
Accessibilité
Dans les contenus, les liens visités ont une couleur différente des liens non-visités.

Recherche

1 critères
Numéro
Rôle Description
RC.002 Accessibilité La recherche simple s'effectue sur tous les contenus internes proposés par le produit (partie informationnelle et partie applicative).

Tableau

5 critères
Numéro
Rôle Description
TB.001 Rédacteur
Accessibilité
Les tableaux sont uniquement utilisés pour présenter des données nécéssitant une structure en ligne/colonne
TB.002 Rédacteur
Accessibilité
Chaque tableau possède des en-têtes TH appropriés.
TB.003 Rédacteur
Accessibilité
La portée de chaque cellule d'en-tête (TH) de ligne ou de colonne (SCOPE) est indiquée dans le code source des tableaux de données.
TB.004 Rédacteur
Accessibilité
Les tableaux de données ont un titre CAPTION
TB.008 Accessibilité Lorsqu'un tableau triable est présent, lors de l'activation d'un tri, le focus reste sur l'en-tête de la colonne activée.
Dernière mise à jour