Checklist Renow 4.3

37 résultat(s) trouvé(s)

Tableau

  • TB.004 - Résumé pour tableaux complexes - Niveau 1

    Les tableaux de données complexe ont un résumé présent dans la balise CAPTION
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.3.1(A)

Navigation

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

Contenu

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

Code

  • CD.010 - Contenu en liste - Niveau 1

    Les listes à puces ou numérotées sont correctement structurées (à l'aide des balises UL et OL)
    • Etape(s):
      • Prototype
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.3.1(A)

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)

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

Image et Multimédia

  • IM.006 - Transcriptions textuelles des sons ou vidéos - Niveau 1

    L'information délivrée dans les documents audio et vidéo est reproduite sous forme de transcriptions textuelles. Une audiodescription doit être fournie si le document le nécessite.
    Selon le cas:
    - Les vidéos et/ ou sons pré-enregistrées ont des sous-titres et /ou audiodescription synchronisés.
    - Si un média est une alternative au texte, il est légendé et clairement lié au texte.
    - Pour un live, une légende doit préciser le contexte et l'interet de la vidéo: "(En direct) Conférence de ....".
    La liaison peut se faire avec l'un des moyens suivants: <code>- <video src="..."> Détails et explications de la vidéo affichée.</video>
    - <div src="vidéo" describedby=iddesc >... </div>
    <p id="iddesc"> Détails et explications de la vidéo affichée.
    </p>
    - ou avec une balise figure:
    <figure role="group" >
    <video src="…" describedby=iddesc > </video>
    <figcaption id=iddesc> Détails et explications de la vidéo affichée.
    </figcaption>
    </figure></code>
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
      • Référencement
    • WCAG 2.1:
      • 1.2.1 (A)
      • 1.2.2(A)
      • 1.2.3(A)
      • 1.2.4 (AA)
      • 1.2.5(AA)

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)

Tableau

  • TB.003 - Portée des en-têtes de tableau - Niveau 1

    La portée de chaque cellule d'en-tête (TH) de ligne ou de colonne (SCOPE) est indiquée dans le code source des tableaux de données.
    <th scope=row> pour les entête de ligne; <th scope=col>pour les entête de colonne.
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.3.1(A)

Présentation

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

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

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

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)

Contenu

  • CT.019 - Accessibilité des documents - Niveau 2

    Les documents proposés en téléchargement sont accessibles ou ont une alternative accessible (avec les mêmes informations et actions)
    Documents publiés après le 22/09/2018 ou nécessaire à une démarche.
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité

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

Tableau

  • TB.001 - Utilisation de tableaux - Niveau 1

    Les tableaux sont uniquement utilisés pour présenter des données nécéssitant une structure en ligne/colonne
    Si un tableau est utilisé pour positionner des éléments, le role "presentation" est utilisé. <code> <table role=présentation </table></code>
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.3.2(A)
      • 4.1.2(A)

Recherche

  • RC.008 - Portée d'une recherche spécifique - Niveau 1

    La portée d'une recherche spécifique est indiquée.
    Soit dans le label soit avec un titre placé avant. Exemple: pour une recherche parmi les publications
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 3.2.2(A)

Présentation

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

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

Navigation

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

Contenu

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

Tableau

  • TB.002 - En-tête de tableaux - Niveau 1

    Chaque tableau possède des en-têtes TH appropriés.
    Un tableau de présentation ne contient pas de balise <th>, contrairement au tableau de donnée
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.3.1(A)

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

Navigation

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

Contenu

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

Code

  • CD.005 - Ordre hiérarchique des titres - Niveau 1

    Dans le contenu des pages, les titres suivent l'ordre hiérarchique de titre 2 (h2) à titre 5 (h5) . Chaque bloc d'information possède un titre pertinent.
    • Etape(s):
      • Prototype
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
      • Référencement
    • WCAG 2.1:
      • 2.4.6(AA)
      • 1.3.1(A)
      • 2.4.10(AAA)

Dernière modification le