Checklist Renow 4.3

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)

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

• 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

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