Checklist Renow 4.3

Filtrer

53 résultat(s) trouvé(s)

Code

CD.001 - Type de codage - Niveau 1

Chaque page comporte la déclaration de type document «!doctype html»
Le code source de la page doit commencer avec l'élément : <CODE><!DOCTYPE html></CODE>
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 4.1.1(A)

CD.007 - Langue du site - Niveau 1

La langue par défaut est précisée dans la balise 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: <code><html lang="fr" ></code>
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 3.1.1(A)

CD.010 - Contenu en liste - Niveau 1

Les listes à puces ou numérotées sont correctement structurées (à l'aide des balises UL et OL)
  • Etape(s):
    • Prototype
    • Rédaction
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 1.3.1(A)

Contenu

CT.009 - Pages d'erreur - Niveau 1

Les pages d'erreur contiennent la nature de l'erreur, un moteur de recherche, un lien vers la page d'accueil, vers le plan du site et vers le formulaire de contact.
Page 404 et autres erreurs
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.1.1(A)
    • 3.3.3(AA)

Code

CD.006 - Validité du code - Niveau 1

Le code est valide: ID unique, balise fermée, pas d'attribut ou balise obsolètes
vérifier avec le validateur du W3C : https://validator.w3.org/
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 4.1.1(A)

Formulaire

FM.016 - Note champs obligatoire - Niveau 1

La note "* Champ obligatoire" est spécifié au niveau du formulaire.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 3.3.2(A)

Image et Multimédia

IM.004 - Alternative des images-liens - Niveau 1

L'alternative textuelle d'une image-lien ou d'un bouton graphique indique la cible ou la fonction du lien ou du bouton.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.1.1(A)
    • 4.1.2(A)

Navigation

NV.008 - Cohérence entre lien et titre - Niveau 1

Le titre H1 de la page en cours de consultation correspond à l'intitulé de l'élément de navigation permettant d'accéder à cette page. Il reprend au moins l'intitulé exact mais peut être complété. Par exemple : Intitulé affiché dans l'élément de navigation "Méthode" et titre de page associé : "La méthode Renow".
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie

Formulaire

FM.015 - Distinction des champs obligatoires - Niveau 1

Les champs obligatoires sont différenciés par une astérisque dans leur LABEL, sous la forme "Intitulé * :".
La distinction peut être faite avec la mention (obligatoire) écrit en toute lettre. La propriété "required" doit également être présente sur le champs <label for="numero-serie">Numéro de série *</label>
<input type="text" id="numero-serie" required>
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.2.1(A)
    • 3.2.2(A)

Navigation

NV.020 - Contrôle explicite - Niveau 1

Les changements d'affichage (animation, lancement de vidéo ou son, affichage d'une modale, nouvelle fenêtre ...) sont uniquement issus d'une action de l'utilisateur.
Les actualisations, les sliders et les alertes importantes font exceptions.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.2.2(A)
    • 2.2.2(A)

Image et Multimédia

IM.003 - Alternatives des images décoratives - Niveau 1

Les éléments graphiques qui n'apportent pas d'information nécessaires à la compréhension du contenu possèdent une alternative textuelle vide.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 1.1.1(A)

Navigation

NV.026 - Apparence des zones d'interactions - Niveau 1

Les "actions utilisateurs" (p.ex. lancer une recherche) se distinguent clairement des liens de navigation.
Pour l'accessibilité, une action utilisateur se présente avec une balise ou un role button.
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 4.1.2(A)

NV.035 - Annulation des clics - Niveau 1

L'utilisateur doit pouvoir annuler l'action de sélection si le relâchement a lieu en dehors de la zone cliquable pointée.
Lorsqu'on clique sur un lien: l'action d'appuyer se distingue de l'action de relachement, l'utilisateur peut changer d'avis après l'appui et avant le relâchement.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.5.2(A)

NV.010 - Titre de page unique - Niveau 1

Chaque titre dans l'onglet du navigateur (title) est unique et correspond au titre de la page (h1).
  • Etape(s):
    • Arborescence
    • Prototype
    • Rédaction
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.4.2(A)

Présentation

PR.004 - Compréhension sans design - Niveau 1

L'information est compréhensible (contenu + ordre par type de contenu) lorsque l'on désactive les feuilles de styles
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 1.3.2(A)

PR.013 - Utilisation de citation - Niveau 1

Les citations, extraits d'articles et de textes de lois sont identifiés et présentés de manière particulière.
La mise en évidence se fait à l'aide de balises appropriées : - q pour les citations courtes, -blockquote pour les citations longues. -Pour les lois, em ou q peuvent être utilisées
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 1.3.1(A)

Navigation

NV.025 - Intitulé unique - Niveau 1

Le contenu ne contient pas de lien ayant un texte identique pour des cibles différentes.
Les textes et titres dont le lien fait parti, doivent le rendre explicite.
  • Etape(s):
    • Prototype
    • Rédaction
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.4.4(A)
    • 2.4.9(AAA)

Présentation

PR.019 - Apparition d'alertes - Niveau 1

Lorsqu'une alerte (ou un message d'erreur) apparait, l'utilisateur doit le comprendre immédiatement : visible à l'écran et accompagné d'un rôle approprié.
Ce critère est applicable dans les formulaires ou dans les alertes. Il faudra utiliser les attributs role= alert ou aria-alertdialog.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.3.1(A)
    • 4.1.3(AA)

Navigation

NV.034 - Alternative aux interactions tactiles complexes - Niveau 1

Les manipulations tactiles complexes (secouer, glisser, utilisation de plusieurs doigts, actions aux mouvements) ont une alternative tactile simple (bouton, lien…) et les détections de mouvement peuvent être désactivée.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.5.1(A)
    • 2.5.4(A)

NV.043 - Version linguistique en cours - Niveau 1

Seules les versions linguistiques disponibles (et non la version en cours de consultation) sont cliquables
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.1.1(A)

Présentation

PR.028 - Compatibilité lecteur d'écran - Niveau 1

Le site est compatible avec lecteur d'écran.
Les informations données par le lecteur d'écran font du sens et les fonctionnalités sont utilisables
  • Etape(s):
    • Final
    • Prototype
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 4.1.2(A)

PR.003 - double transmission d'information - Niveau 1

L'information ne doit pas être donnée uniquement par la couleur, la forme, la taille ou la position.
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.3.3(A)
    • 1.4.1(A)

PR.012 - Utilisation de mots-clés - Niveau 1

Les expressions importantes et les mots-clés sont mis en évidence en gras.
Pour l'accessibilité, la mise en évidence se fait à l'aide de balises appropriées (strong)
  • Etape(s):
    • Prototype
    • Final
    • Rédaction
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.3.1(A)

PR.021 - Contraste des liens - Niveau 1

Les liens de type "contenu" sont soulignés ou ont un contraste avec le texte alentour de 3:1 minimum.
https://webaim.org/resources/linkcontrastchecker/
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.4.1(A)

Code

CD.004 - Utilisation des textes cachés - Niveau 1

Les textes cachés visuellement sont utilisés de manière compréhensible et ont un intérêt.
Les textes masqués/affichés en css uniquement doivent être appropriés. Une alerte ou un message d'erreur doit être affiché par un script et non masqués/affichés en css uniquement.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 4.1.2(A)
    • 1.3.2(A)

Contenu

CT.024 - Format des liens de téléchargement - Niveau 1

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
  • Etape(s):
    • Prototype
    • Rédaction
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.4.4(A)

Formulaire

FM.004 - Groupement de champs - Niveau 1

Les champs sont visuellement regroupés (fieldset) et possèdent une légende, si cela facilite la compréhension.
2 champs ne peuvent avoir un même label sauf si un fielfset permet de les distinguer (exemple d'utilisation nécessaire : adresse de livraison / facturation)
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.3.1(A)
    • 3.3.2(A)

FM.013 - Validation de formulaire - Niveau 1

Le formulaire peut être validé à l'aide de la touche entrée.
Le formulaire est validable lorsque l'utilisateur est dans le dernier champs du formulaire.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.1.1(A)

Image et Multimédia

IM.001 - Alternative des images - Niveau 1

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.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 1.1.1(A)

Navigation

NV.038 - Piège à la navigation - Niveau 1

Le site ne contient aucun piège ni au clavier ni à la manipulation tactile.
L'utilisateur ne peut rester coincer dans une partie de la page: carte, iframe,… Des zones de navigation telles que des bordures doivent être aménagées autour de ces contenus.
  • Etape(s):
    • Prototype
    • Rédaction
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.1.2(A)

Présentation

PR.007 - Présentation homogène - Niveau 1

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.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 1.3.1(A)
    • 3.2.4(AA)

PR.010 - Effet de flash - Niveau 1

Les pages n'imposent pas d'effets de flash, des changements de luminosité ou des clignotements.
La fréquence de l'effet doit être inférieur à 3 sur une seconde. Si la fréquence est supérieure l'utilisateur doit pouvoir le stopper
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.3.1(A)
    • 2.2.2(A)

Code

CD.005 - Ordre hiérarchique des titres - Niveau 1

Dans le contenu des pages, les titres suivent l'ordre hiérarchique de titre 2 (h2) à titre 5 (h5) . Chaque bloc d'information possède un titre pertinent.
  • Etape(s):
    • Prototype
    • Rédaction
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 2.4.6(AA)
    • 1.3.1(A)
    • 2.4.10(AAA)

CD.002 - Balise détournée - Niveau 1

Les balises natives sont utilisées. Si une balise est détournée, les rôles associés aux composants sont utilisées de manière cohérente et en conformité des WAI-Aria.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 4.1.2(A)

Recherche

RC.008 - Portée d'une recherche spécifique - Niveau 1

La portée d'une recherche spécifique est indiquée.
Soit dans le label soit avec un titre placé avant. Exemple: pour une recherche parmi les publications
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.2.2(A)

Code

CD.011 - Alternative de contenu ou fonctionnalité - Niveau 1

Si un contenu (notamment, emoticon, art ASCII, captcha...) 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.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 1.1.1(A)
    • 1.3.3(A)

Formulaire

FM.005 - Groupement de réponse - Niveau 1

Les groupes d'options des champs SELECT sont balisés avec des éléments OPTGROUP dotés d'un libellé via l'attribut LABEL.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.3.1(A)

Image et Multimédia

IM.002 - Alternative des images complexes - Niveau 1

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.
Pour une balise img (canvas ou role=img ...) l'utilisation d'un aria-describedby="id", id faisant référence au paragraphe de la description.
<img src="…" alt="voir légende ci-après" aria-describedby=iddesc />
<p id="iddesc"> Détails et explications de l'image affichée.
</p>
ou avec une balise figure: <figure role="group">
<img src="…" alt="description courte" />
<figcaption>
Détails et explications de l'image affichée. (ou lien vers la description)
</figcaption>
</figure>
idem pour un svg avec un aria-label ou une balise <title> ou un paragraphe masqué (sauf au lecteur d'écran)
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 1.1.1(A)

Formulaire

FM.002 - Label des champs - Niveau 1

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 <code><label for="label1"> étiquette du champs</label><input id="lable1"></input></code>
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.2.2(A)

FM.008 - Listes à choix uniques - Niveau 1

Les champs INPUT RADIO sont utilisés pour des listes à choix uniques.
Si les boutons radio sont simulés, ils doivent satisfaire aux mêmes contraintes d'usage que les boutons radio natifs en HTML
  • Etape(s):
    • Final
    • Prototype
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 4.1.2(A)

Navigation

NV.024 - Liens explicites - Niveau 1

Les libellés de lien indiquent clairement leur destination
Il est préférable de fournir un intitulé explicite à lui seul. Si ce n'est pas possible, les textes et titres dont il fait parti, doivent le rendre explicite.
  • Etape(s):
    • Prototype
    • Rédaction
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.4.4(A)
    • 2.4.9(AAA)

Présentation

PR.002 - liens d'évitement - Niveau 1

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.
Lors du parcours au clavier, les liens d'évitement doivent apparaitre dès la première tabulation
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.4.1(A)

Navigation

NV.021 - Compatibilité navigation au clavier - Niveau 1

Toutes les actions peuvent être accomplies à l'aide du clavier.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.1.1(A)
    • 2.1.2(A)

NV.036 - Contrôle des changements et mouvements - Niveau 1

Chaque changement d'affichage (actualisation, vidéo, modale, slider,...) est contrôlable par l'utilisateur (play, pause, volume, affichage de sous-titres, fermeture).
Le contrôle doit être possible à la souris, au clavier ou au toucher.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.4.2(A)

Présentation

PR.023 - Portée d'un système d'onglet - Niveau 1

Lorsqu'un système d'onglets est utilisé, la portée des onglets est mis en évidence par le design et grâce au code.
avec des role=tab et des aria-controls
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 4.1.2(A)

Code

CD.003 - Structure en rôle aria - Niveau 1

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 et contentinfo sont uniques dans la page ;
Le rôle ARIA navigation est réservé aux zones de navigations principales et secondaires.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
    • Référencement
  • WCAG 2.1:
    • 1.3.1(A)

Formulaire

FM.003 - Position du label - Niveau 1

Les labels sont visibles et placés au dessus de leur champs
Pour les formulaires à champs unique, il peut être rendu visible en dupliquant le label au niveau du placeholder.
  • Etape(s):
    • Final
    • Prototype
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.5.3(A)

FM.012 - Libellé des boutons d'action - Niveau 1

Les libellés des boutons indiquent clairement l'action de manière concise.
L'intitulé visible peut éventuellement être complété par un title. Il ne peut être remplacé
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.5.3(A)
    • 2.4.6(AA)

FM.018 - Apparence des messages d'erreurs - Niveau 1

Les messages d'erreurs, les libellés et les champs associés sont mis en valeur, visuellement, au moyen de 2 mécanismes différents, au moins l'un d'eux doit faire apparaitre du rouge (contraste de couleur, graisse, style, pictogramme, etc...).
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 1.3.3(A)

FM.021 - Format attendu - Niveau 1

L'utilisateur est guidé dans les valeurs à saisir:
- format de données attendu (type de caractère ou type de fichier...)
- suggestion de valeur pertinente (proposition à partir de l'historique utilisateur)
Le champs et l'aide à la saisie sont liés<label for="document"> Ajouter un document à votre dossier </label>
<input type="file" id="document" name="document" aria-describedby="formats" />
<p id="formats">Formats acceptés : pdf ou doc.</p>
Pour les champs texte qui permettent de saisir l'identité d'une personne, le champ "nom" a pour valeur de l'attribut autocomplete "family-name", le champ "prénom" la valeur "given-name", etc.
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 3.3.2(A)
    • 1.3.5 (AA)

Navigation

NV.022 - Parcours intuitif au clavier - Niveau 1

Le parcours au clavier est visible et anticipable par l'utilisateur.
L'ordre de parcours est cohérent: de gauche à droite et du haut vers le bas.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.4.3(A)
    • 2.4.7(AA)
    • 3.2.1(A)
    • 3.2.2(A)

NV.031 - Cohérence entre les noms visibles et le code - Niveau 1

Le libellé d'un bouton ou d'un lien dans le code correspond au texte ou au début de l'intitulé qui est visible ou graphiquement évident.
Il peut être complété par un title mais non remplacé. Un pictogramme doit faire appel à un intitulé suffisamment évident.
(un bouton loupe signifie de manière évidente "rechercher")
  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.5.3(A)

NV.037 - Raccourcis clavier - Niveau 1

Aucun raccourci clavier n'est nécessaire pour le site. Si des raccourcis composés d'une seule touche sont proposés, ils doivent être configurables par l'utilisateur.
  • Etape(s):
    • Prototype
    • Final
  • Types d'exigence:
    • Accessibilité
  • WCAG 2.1:
    • 2.1.4(A)

Dernière modification le