Checklist Renow 4.3

39 résultat(s) trouvé(s)

Présentation

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

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

Formulaire

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

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)

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

Formulaire

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

Présentation

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

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

Formulaire

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

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

Présentation

  • 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

  • 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.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.011 - Soulignement - Niveau 3

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

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

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

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

Dernière modification le