Checklist Renow 4.3

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.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)

• 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)

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.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.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.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.023 - Surface des zones d'interaction - Niveau 3

  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.

  • Etape(s):
    • Prototype
    • Final
    • Design graphique
  • Types d'exigence:
    • Accessibilité
    • Ergonomie
  • WCAG 2.1:
    • 2.5.5(AAA)

• NV.029 - Section "A la une" - Niveau 3

  Aucun lien externe n'est présent dans la section "A la une" (ou la section similaire) de la page d'accueil. Ils renvoient tous vers une page de l'arborescence du site.

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

• NV.032 - Fonction de partage - Niveau 3

  Les pages de contenu proposent une fonction de partage.

  Les pages passerelles et la page d'accueil n'ont pas besoin de cette fonction.

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

Formulaire

• 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

Navigation

• NV.033 - Fonction haut de page - Niveau 3

  Les pages contiennent une fonction « Haut de page ».

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