Checklist Renow 4.3

54 résultat(s) trouvé(s)

Formulaire

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

Navigation

  • 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.010 - Titre de page unique - Niveau 1

    Chaque titre dans l'onglet du navigateur (title) est unique et correspond au titre de la page (h1).
    • Etape(s):
      • Arborescence
      • Prototype
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 2.4.2(A)

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

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

Navigation

  • 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

  • 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

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

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

Navigation

  • 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

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

Navigation

  • 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.021 - Compatibilité navigation au clavier - Niveau 1

    Toutes les actions peuvent être accomplies à l'aide du clavier.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 2.1.1(A)
      • 2.1.2(A)

  • 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.030 - Texte apparaissant au survol - Niveau 2

    Tout texte apparaissant au hover ou au focus doit pouvoir être masqué à l'aide de la touche echap ou d'un bouton de fermeture.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.4.13(AA)

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

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

Navigation

  • 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.022 - Parcours intuitif au clavier - Niveau 1

    Le parcours au clavier est visible et anticipable par l'utilisateur.
    L'ordre de parcours est cohérent: de gauche à droite et du haut vers le bas.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 2.4.3(A)
      • 2.4.7(AA)
      • 3.2.1(A)
      • 3.2.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.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.037 - Raccourcis clavier - Niveau 1

    Aucun raccourci clavier n'est nécessaire pour le site. Si des raccourcis composés d'une seule touche sont proposés, ils doivent être configurables par l'utilisateur.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 2.1.4(A)

  • 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

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)

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

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

  • 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

  • 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
Dernière modification le