Checklist Renow 4.3

47 résultat(s) trouvé(s)

Formulaire

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

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)

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

  • PR.022 - Survol des liens - Niveau 3

    L'effet de roll-over des liens de contenu non-soulignés font apparaître un soulignement.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Ergonomie
      • Accessibilité
    • WCAG 2.1:
      • 2.4.7 (AA)

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

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)

Présentation

  • 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.009 - Texte en images - Niveau 2

    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…).
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.4.5(AA)

  • 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.018 - Stabilité de la structure des sites - Niveau 2

    Toutes les pages doivent contenir et toujours à la même place (sauf exception argumentée):
    - une zone d'identité
    - une zone de navigation primaire
    - une zone de recherche
    - un chemin de localisation (sauf en page d'accueil)
    - une zone de contenu
    - un footer (donnant accès à tous les contenus du site)
    - une zone de signature Renow (contenant le logo Renow)
    - la GovBar (si son utilisation a été confirmée par le SIP).
    Pour l'accessibilité, la stabilité des éléments de l'interface sont essentiels (le menu particulièrement)
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Ergonomie
      • Référencement
      • Accessibilité
    • WCAG 2.1:
      • 3.2.3(A)
      • 2.4.5(AA)

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

  • PR.027 - Repérage des liens visités - Niveau 3

    Dans les contenus, les liens visités se distinguent visuellement des liens non-visités.
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Ergonomie

  • PR.030 - Mise en page pour l'impression - Niveau 3

    Une mise en page pour l'impression est créée à l'aide de CSS. Le nom du site, le titre de la page, le corps de la page sont présents.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Ergonomie

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)

Présentation

  • PR.006 - Mise en forme du contenu - Niveau 3

    Les contenus des pages sont alignés à gauche sans justification
    • Etape(s):
      • Prototype
      • Rédaction
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.4.8(AAA)

  • PR.015 - Utilisation des liens externes - Niveau 1

    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).
    L'information s'affiche au survole du lien. Pour l'accessibilité, l'ouverture dans une nouvelle fenêtre est essentielle.
    • Etape(s):
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 2.4.4(A)

  • PR.024 - Onglet actif - Niveau 1

    L'onglet actif est relié à la portée de son contenu.
    Grâce à 2 mécanismes (visuellement et avec l'attribut aria-selected)
    • Etape(s):
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 1.4.1(A)
      • 4.1.2(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)

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

Présentation

  • PR.001 - Catégorisation du menu - Niveau 3

    Les éléments de navigation thématiques, transversales et de support ne sont pas mélangés.
    • Etape(s):
      • Arborescence
      • Prototype
      • Final
    • Types d'exigence:
      • Ergonomie

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

  • PR.016 - Compatibilité navigateur - Niveau 2

    Le site est compatible sur les principaux navigateurs web (Firefox, Chrome, IE, Edge, Safari)
    Nous préconisons un affichage optimal pour les navigateurs cités jusqu'à 2 versions précédentes. Pour les versions antérieures, une dégradation dite “gracieuse” est mise en place et permettra un affichage non optimisé des pages du site.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Ergonomie
      • Référencement

  • PR.025 - Contraste minimum - Niveau 2

    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.
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.4.3(AA)
      • 1.4.11(AA)

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)

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

  • FM.020 - Formulaire avec informations personnelles - Niveau 2

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

Présentation

  • PR.005 - Zoom 200% - Niveau 2

    Les textes restent lisibles et ne se chevauchent pas en zoom 200%.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.4.4(AA)

  • PR.014 - Espacement des textes - Niveau 2

    L'utilisateur a la possibilité de modifier les espacements de texte: hauteur de ligne, espace entre les lettres, les mots, et les paragraphes. Cela ne doit pas provoquer de perte de contenus ou de fonctionnalités.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 1.4.12(AA)

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

  • PR.029 - Compatibilité taille d'écran - Niveau 1

    Le site est compatible sur ordinateur, smartphone et tablette (en portrait et paysage)
    La navigation mobile est utilisable, pas de chevauchement de contenu, l'ordre des contenus reste logique sur ces différents écrans
    • Etape(s):
      • Final
    • Types d'exigence:
      • Accessibilité
      • Référencement
    • WCAG 2.1:
      • 4.1.10(A)
      • 1.3.4(AA)

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)

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)

  • PR.008 - Cohérence hiérarchique des titres - Niveau 3

    L'apparence graphique des titres est cohérente avec leur niveau hiérarchique.
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Ergonomie
    • WCAG 2.1:
      • 1.3.1(A)

  • PR.011 - Soulignement - Niveau 3

    Le soulignement est réservé aux liens.
    • Etape(s):
      • Prototype
      • Rédaction
      • Final
      • Design graphique
    • Types d'exigence:
      • Ergonomie

  • PR.017 - Taille de police minimum - Niveau 3

    La taille minimale du texte doit être lisible quelle que soit sa fonction (une taille inférieure à 12px est souvent illisible).
    • Etape(s):
      • Prototype
      • Rédaction
      • Final
      • Design graphique
    • Types d'exigence:
      • Ergonomie

  • PR.020 - Survol des zones cliquables - Niveau 3

    Toutes les zones cliquables présentent un effet de roll-over. Cet effet ne provoque pas de décalage dans l'affichage des textes
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Ergonomie

  • PR.026 - Contraste de lecture - Niveau 3

    Le texte principal de la zone de contenu doit avoir un ratio de contraste minimum de 5,5:1.
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
Dernière modification le