Checklist Renow 4.3

CT.003 - Actualitées datées - Niveau 3

Chaque actualité possède une date de publication.

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

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)

CT.012 - Utilisation d'abréviation - Niveau 3

La première mention d'une abréviation ou d'un acronyme au sein d'une page donne l'intitulé complet suivi du sigle.

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

CT.018 - Utilisation d'onglet - Niveau 3

Les contenus proposés dans des onglets ne sont pas destinés à être comparés entre eux.

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

CT.021 - Lien-email - Niveau 3

Le texte d'un lien 'mailto' correspond à l'adresse mail pointée (l'adresse mail est visible).

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

CT.027 - Homogénéité des liens vers les documents - Niveau 2

Chaque document téléchargeable possède un texte de lien unique et identique (ou très similaire) dans toutes les pages dans lesquelles il est proposé

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

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)

CT.002 - Structuration des rubriques transversales - Niveau 3

Les rubriques transversales font référence à un type d'objet identique (fiche standardisée avec une structure identique) pouvant renvoyer à une ou plusieurs rubriques thématiques du site.

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

CT.008 - Page "Aspects légaux" - Niveau 3

La rubrique "Aspects légaux" propose des informations adaptées au site concernant les questions de responsabilité, de copyright, de crédit photos, de cookies et de protection des données.

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

CT.011 - Arborescence orientée utilisateur - Niveau 3

L'architecture du contenu est construite sur base des besoins des utilisateurs et non sur l'organigramme de l'institution.

Les cibles ont été définies pour le site ainsi que leur usecase associé.

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

CT.017 - Pictogramme et lien illustré - Niveau 1

Quand un lien textuel est associé à une image (pictogramme ou illustration), le lien est placé sur le texte et l'image.

Si l'image est décorative, le lien peut porter sur l'image grâce au css uniquement.

Etape(s):
- Prototype
- Final
Types d'exigence:
- Ergonomie
WCAG 2.1:
- 1.1.1(A)
- 2.4.4(A)

CT.020 - Page contact - Niveau 3

La page contact contient le nom, l'adresse postale, le mail et idéalement le téléphone de l'éditeur du site .

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

NV.002 - Profondeur maximum de l'arborescence - Niveau 3

La navigation thématique a une profondeur de 5 niveaux maximum

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

CT.026 - Légitimité du document - Niveau 3

Les documents téléchargeables sont destinés à être stockés par l'utilisateur.

Il est préférable de fournir les informations dans les pages du site et limiter les contenus fournis sous forme de document téléchargeable.

Etape(s):
- Final
Types d'exigence:
- Ergonomie
- Référencement

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

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)

NV.011 - Aucune page cachée - Niveau 2

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

Etape(s):
- Rédaction
- Final
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 2.4.5(AA)

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)

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)

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.001 - Equilibre de l'arborescence - Niveau 3

L'arborescence du site est régulière et équilibrée.

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

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.007 - Titre de page dans le navigateur - Niveau 3

Les titres affichés dans la barre de titre du navigateur respectent le formalisme suivant: "Titre de la page en cours - Nom du site"

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

NV.044 - Français et allemand - Niveau 3

Le site est disponible en français et en allemand, selon le sujet du site.

L'allemand étant la langue apprise jusqu'au 2nd cycle (formation classique). Et le français la langue statistiquement la plus parlée au Luxembourg.

Etape(s):
- Arborescence
- Final
Types d'exigence:
- Ergonomie
- Référencement
- Accessibilité
WCAG 2.1:
- 3.1.5(AAA)

NV.016 - Rubriques de support obligatoires - Niveau 2

Les rubriques de support suivantes sont obligatoires : Plan du site, Contact, A propos, Aspects légaux, Accessibilité.

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

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

CT.006 - Centralisation des formulaires - Niveau 3

La rubrique "Formulaires" centralise tous les formulaires (téléchargeables, remplissables en ligne ou autres) présents sur le site et ayant un rapport direct avec l'objet du site en question.

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

CT.015 - Date de dernière mise à jour - Niveau 3

Pour chaque page, la date de dernière mise à jour est affichée.

Etape(s):
- Prototype
Types d'exigence:
- Ergonomie
- Référencement

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)

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.019 - Conservation des informations saisies - Niveau 3

En cas d'erreur, toutes les informations saisies par l'utilisateur (correctes et erronées) sont conservées et modifiables.

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

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

NV.005 - Aucune page vide - Niveau 3

Le site (ou l'application) ne propose pas de page vide.

Etape(s):
- Final
Types d'exigence:
- Ergonomie
- Référencement

NV.014 - Contenus datés - Niveau 3

Les contenus datés sont archivés par mois et/ou année et accessibles via un système de navigation dédié.

Les filtrages sont proposés uniquement si la volumétrie est telle que ces contenus ne sont pas affichables sur 1 seul page.

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

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

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)

NV.041 - Traduction partielle du site - Niveau 3

Pour des versions différentes en terme de contenu, l'utilisateur a uniquement la possibilité d'opter pour un changement de langue sur la page d'accueil.

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

CT.001 - Structure d'information exclusive - Niveau 3

Les informations sont placées de manière exclusive dans l'arborescence du site

Etape(s):
- Arborescence
- Rédaction
Types d'exigence:
- Ergonomie
- Référencement
- Accessibilité

CT.007 - Page "A propos du site" - Niveau 3

La rubrique "A propos du site" donne des informations sur l'objet, l'éditeur et la qualité du site.

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

CT.010 - Structure en pyramide inversée - Niveau 3

La structure des pages et des rubriques respecte le principe de la pyramide inversée.

Ce principe consiste à donner un résumé de la page dans le premier paragraphe puis approfondir le sujet

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

CT.016 - Scroll horizontal - Niveau 2

Le site s'affiche sans scroll horizontal, sauf contenu spécifique et avec argumentation.

Le scroll est utilisé uniquement si une vue linéaire ne peut être utilisée. Les tableaux de données complexes et les graphiques sont des exceptions. Par contre, une image illustrative ne peut provoquer un scroll.

Etape(s):
- Prototype
- Final
Types d'exigence:
- Ergonomie
- Référencement
- Accessibilité
WCAG 2.1:
- 1.4.10(AA)

CT.025 - Format des documents téléchargeables - Niveau 3

Les documents téléchargeables sont de préférence proposés au format PDF (largement répandus)

Etape(s):
- Rédaction
- Final
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)

CT.004 - Centralisation des publications - Niveau 3

La rubrique "Publications" centralise toutes les publications (documents dédiés à l'impression tels que des rapports, brochures, etc.) présentes sur le site.

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

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

CT.013 - Utilisation de titres explicites - Niveau 3

Les pages sont organisées à l'aide de titres explicites et concis qui identifient l'information apportée par chaque section.

L'arborescence ne contient pas d'acronyme ou d'abréviation.

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

CT.022 - Indication du pays - Niveau 3

Le pays est spécifié dans toutes les adresses postales proposées sur le site

EX: 2 beim Schlass L-8058 Bertrange
ou 2 beim Schlass 8058 Bertrange (Luxembourg)

Etape(s):
- Rédaction
Types d'exigence:
- Ergonomie

CT.028 - Contenu des versions linguistiques - Niveau 3

La structure et les informations d'une page disponible en plusieurs langues ne varient pas d'une version à l'autre.

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

NV.006 - Titres homogènes - Niveau 3

Les titres de pages de même niveau sont définis de manière homogène

Utilisation d'une catégorisation cohérente et homogénéité dans les termes employés

Etape(s):
- Arborescence
- Prototype
- Rédaction
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)

NV.015 - Contenu législatif - Niveau 3

Si un contenu d'ordre législatif est proposé, il est appuyé par un lien vers le texte officiel sur le site legilux.public.lu au niveau de la dernière version du document téléchargeable en question.

Etape(s):
- Rédaction
Types d'exigence:
- Ergonomie

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)

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)

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

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

FM.017 - Messages d'erreur explicites - Niveau 1

Les messages d'erreurs indiquent la nature de l'erreur ainsi que les moyens de correction de l'erreur directement après le champ et reliés.

<label for="document"> Ajouter un document à votre dossier </label>
<input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats erreur" />
<p id="erreur">Format de fichier incorrect.</p> <p id="formats">Formats acceptés : pdf ou doc.</p>

Etape(s):
- Final
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 3.1.1(A)
- 3.3.3(AA)

NV.039 - Liens vers les versions linguistiques - Niveau 3

Le changement de version linguistique est proposé sous forme de lien rédigé dans les langues cibles

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

NV.042 - Traductions ponctuelles - Niveau 3

Dans le cas de traduction ponctuelle, la page traduite est disponible en contenu associé et pointe vers une sous-page dans l'arborescence

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

NV.003 - Liens du menu de navigation - Niveau 1

Les menus de navigation sont composés uniquement de liens vers des pages HTML internes du produit.

Etape(s):
- Final
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 2.4.4(A)
- 3.2.3(AA)

NV.009 - Profondeur minimum de l'arborescence - Niveau 3

Les rubriques thématiques proposent toujours des sous-rubriques.

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

NV.012 - Compréhension des niveaux de navigation - Niveau 3

Le système de navigation proposé donne la possibilité à l'utilisateur d'identifier clairement les différents niveaux de navigation qui lui sont proposés.

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

NV.027 - Comportement liens internes - Niveau 3

Chaque lien interne (pointant vers une page du produit) s'ouvre dans la fenêtre courante.

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

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)

CT.005 - Centralisation des législations - Niveau 3

La rubrique "Législation" centralise toutes les normes légales (lois, règlements, arrêtés, etc.).

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

CT.014 - Poids des pages - Niveau 3

Le poids des pages n'excède pas 600Ko, sauf exception argumentée

Dans le cas de page complexe, un mécanisme évite les sauts de chargement (exemple: chargement progressif avec espace réservé).

Etape(s):
- Prototype
Types d'exigence:
- Ergonomie
- Référencement

CT.023 - Format des numéros de téléphone - Niveau 3

L'indicatif téléphonique du pays est précisé devant le(s) numéro(s) de téléphone et de fax proposé(s) sur le site web suivant le formalisme suivant (+352).

Etape(s):
- Rédaction
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)

NV.004 - Au moins 2 sous-rubriques - Niveau 3

Si une page propose des sous-rubriques, elles sont au moins au nombre de 2.

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

NV.013 - Chemin de localisation - Niveau 3

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.

Chemin de localisation est aussi appelé fils d'ariane ou breadcrumb

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

NV.019 - Utilisation de modale - Niveau 3

Les fenetres modales (et non des pop up) sont utilisées de manière appropriées:
- apparence et intérêt
- titre
-navigation clavier
-role aria.

Apparence: une modale est une boite affichée en superposition de la page consultée en conservant le contexte. (par opposition aux pop up qui s'ouvrent dans une nouvelle fenetre ou onglet)
Si le processus utilisateur doit être interrompu, le background est inaccessible.
interet: La modale est nécessaire à la réalisation d'une tâche demandée par l'utilisateur dans son contexte (affichage d'une définition ou d'une aide, saisie de données spécifiques).
Le titre est visible et lié à un aria-label ou un aria-labelledby.
navigation clavier: Elle recoit le focus lors de son apparition et est manipulable au clavier.
Le role dialog est utilisé.
<code><div role="dialog" aria-labelledby="modal-title">
<h1 id="modal-title">[Titre de la fenetre modale]</h1>
[Contenu texte de la modale]
<button>Fermer</button>
</div> </code> https://www.w3.org/TR/wai-aria-practices/#dialog_modal, https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Etape(s):
- Prototype
- Final
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 2.1.1(A)
- 4.1.2(A)

NV.028 - Longueur des liens - Niveau 3

La longueur des textes de lien proposés dans le corps de texte est comprise entre 5 et 80 caractères.

Moins de 5 caractères révèle un manque de signification du lien et une zone de clic difficile à atteindre. Plus de 80 caractères révèle un lien trop long en particulier pour les plages brailles et lecteurs d'écran

Etape(s):
- Prototype
- Rédaction
- Final
Types d'exigence:
- Accessibilité
- Ergonomie
WCAG 2.1:
- 1.4.8(AAA)

NV.040 - Sites multilingues - Niveau 3

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

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

Filtrer

Contenu

CT.003 - Actualitées datées - Niveau 3

CT.009 - Pages d'erreur - Niveau 1

CT.012 - Utilisation d'abréviation - Niveau 3

CT.018 - Utilisation d'onglet - Niveau 3

CT.021 - Lien-email - Niveau 3

CT.027 - Homogénéité des liens vers les documents - Niveau 2

Formulaire

FM.001 - Taille du champs - Niveau 3

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

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

Contenu

CT.002 - Structuration des rubriques transversales - Niveau 3

CT.008 - Page "Aspects légaux" - Niveau 3

CT.011 - Arborescence orientée utilisateur - Niveau 3

CT.017 - Pictogramme et lien illustré - Niveau 1

CT.020 - Page contact - Niveau 3

Navigation

NV.002 - Profondeur maximum de l'arborescence - Niveau 3

Contenu

CT.026 - Légitimité du document - Niveau 3

Navigation

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

Formulaire

FM.006 - Choix explicites - Niveau 3

Navigation

NV.011 - Aucune page cachée - Niveau 2

Formulaire

FM.015 - Distinction des champs obligatoires - Niveau 1

Navigation

NV.020 - Contrôle explicite - Niveau 1

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

NV.001 - Equilibre de l'arborescence - Niveau 3

NV.035 - Annulation des clics - Niveau 1

NV.007 - Titre de page dans le navigateur - Niveau 3

NV.044 - Français et allemand - Niveau 3

NV.016 - Rubriques de support obligatoires - Niveau 2

NV.025 - Intitulé unique - Niveau 1

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

NV.043 - Version linguistique en cours - Niveau 1

Contenu

CT.006 - Centralisation des formulaires - Niveau 3

CT.015 - Date de dernière mise à jour - Niveau 3

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

Formulaire

FM.004 - Groupement de champs - Niveau 1

FM.013 - Validation de formulaire - Niveau 1

FM.019 - Conservation des informations saisies - Niveau 3

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

Navigation

NV.005 - Aucune page vide - Niveau 3

NV.014 - Contenus datés - Niveau 3

NV.023 - Surface des zones d'interaction - Niveau 3

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

NV.032 - Fonction de partage - Niveau 3

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

NV.041 - Traduction partielle du site - Niveau 3

Contenu

CT.001 - Structure d'information exclusive - Niveau 3

CT.007 - Page "A propos du site" - Niveau 3

CT.010 - Structure en pyramide inversée - Niveau 3

CT.016 - Scroll horizontal - Niveau 2

CT.025 - Format des documents téléchargeables - Niveau 3

Formulaire

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

Contenu

CT.004 - Centralisation des publications - Niveau 3

Formulaire

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

Contenu

CT.013 - Utilisation de titres explicites - Niveau 3

CT.022 - Indication du pays - Niveau 3

CT.028 - Contenu des versions linguistiques - Niveau 3

Navigation

NV.006 - Titres homogènes - Niveau 3

Formulaire

FM.002 - Label des champs - Niveau 1

Navigation

NV.015 - Contenu législatif - Niveau 3