Checklist Renow 4.3

FM.001 - Taille du champs - Niveau 3

Taille du champ de saisie est adaptée selon le type d'information.

Etape(s):
- Prototype
- Final
Types d'exigence:
- Ergonomie

FM.007 - Types de liste à choix - Niveau 3

Lorsque l'utilisateur doit voir l'ensemble des choix possibles les champs INPUT RADIO ou CHECKBOX sont utilisés plutôt que les listes SELECT.

Etape(s):
- Prototype
Types d'exigence:
- Ergonomie

FM.010 - Cohérence des formulaires - Niveau 2

Les libellés des boutons d'action et les labels de champs sont cohérents à travers toutes les pages du site.

Etape(s):
- Prototype
- Final
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 3.2.4(AA)

FM.006 - Choix explicites - Niveau 3

Les champs SELECT, RADIO et CHECKBOX présentent des choix explicites (pas d'abréviations).

Etape(s):
- Prototype
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 3.1.4(AAA)

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)

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)

FM.022 - Aide contextuelle masquée - Niveau 3

Lorsqu'une aide contextuelle masquée est proposée, elle apparait dans un encart à proximité du champs tout en permettant la saisie.

L'encart d'aide s'ouvre au clic.

Etape(s):
- Prototype
Types d'exigence:
- Ergonomie

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)

FM.014 - Position des boutons d'action - Niveau 3

Les boutons d'actions sont placés en fin de formulaire et sont alignés à gauche ou centrés.

Etape(s):
- Design graphique
- Prototype
Types d'exigence:
- Ergonomie

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)

FM.011 - Apparence des boutons d'action - Niveau 3

Les actions de formulaires ne sont pas mis en forme comme des liens.

Etape(s):
- Prototype
- Final
- Design graphique
Types d'exigence:
- Ergonomie

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.009 - Listes à choix multiples - Niveau 3

Les champs INPUT CHECKBOX sont utilisés pour des listes à choix multiples (0,1 ou plusieurs choix possibles)

Etape(s):
- Prototype
Types d'exigence:
- Ergonomie

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)