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)
CT.018 - Utilisation d'onglet -
Niveau 3
Les contenus proposés dans des onglets ne sont pas destinés à être comparés entre eux.
Etape(s):
Prototype
Types d'exigence:
Ergonomie
CT.021 - Lien-email -
Niveau 3
Le texte d'un lien 'mailto' correspond à l'adresse mail pointée (l'adresse mail est visible).
Etape(s):
Prototype
Types d'exigence:
Ergonomie
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)
Contenu
CT.002 - Structuration des rubriques transversales -
Niveau 3
Les rubriques transversales font référence à un type d'objet identique (fiche standardisée avec une structure identique) pouvant renvoyer à une ou plusieurs rubriques thématiques du site.
Etape(s):
Arborescence
Prototype
Final
Types d'exigence:
Ergonomie
CT.008 - Page "Aspects légaux" -
Niveau 3
La rubrique "Aspects légaux" propose des informations adaptées au site concernant les questions de responsabilité, de copyright, de crédit photos, de cookies et de protection des données.
Etape(s):
Prototype
Final
Types d'exigence:
Ergonomie
CT.011 - Arborescence orientée utilisateur -
Niveau 3
L'architecture du contenu est construite sur base des besoins des utilisateurs et non sur l'organigramme de l'institution.
Les cibles ont été définies pour le site ainsi que leur usecase associé.
Etape(s):
Arborescence
Prototype
Types d'exigence:
Ergonomie
Identification
ID.010 - Logo Renow -
Niveau 3
Le logo Renow renvoie vers le site "Renow".
Etape(s):
Prototype
Final
Design graphique
Types d'exigence:
Ergonomie
Référencement
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
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)
Identification
ID.006 - Format de l'adresse de contact -
Niveau 3
L'adresse de contact du produit respecte le formalisme "info@nomdedomaine" ou "support@nomdedomaine" lorsqu'un support "Helpdesk" est proposé à l'utilisateur.
Etape(s):
Prototype
Types d'exigence:
Ergonomie
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.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
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)
Recherche
RC.005 - Titres des pages trouvées -
Niveau 3
Les titres des pages trouvées sont mis en évidence et cliquables.
Les résultats sont structurée avec des titres <Hn>
Etape(s):
Prototype
Final
Types d'exigence:
Ergonomie
Présentation
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.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.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
Contenu
CT.015 - Date de dernière mise à jour -
Niveau 3
Pour chaque page, la date de dernière mise à jour est affichée.
Etape(s):
Prototype
Types d'exigence:
Ergonomie
Référencement
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
Identification
ID.013 - Utilisation de cookies simple -
Niveau 2
Si des cookies sont utilisés sur le site, l'utilisateur en est informé.
Etape(s):
Prototype
Final
Design graphique
Types d'exigence:
RGPD
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.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
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.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)
Contenu
CT.007 - Page "A propos du site" -
Niveau 3
La rubrique "A propos du site" donne des informations sur l'objet, l'éditeur et la qualité du site.
Etape(s):
Prototype
Final
Types d'exigence:
Ergonomie
Recherche
RC.002 - Formulaire à champs unique -
Niveau 3
Pour les formulaires à champs unique, le bouton d'action doit être à la suite (à coté ou en dessous).
Etape(s):
Prototype
Types d'exigence:
Ergonomie
Contenu
CT.016 - Scroll horizontal -
Niveau 2
Le site s'affiche sans scroll horizontal, sauf contenu spécifique et avec argumentation.
Le scroll est utilisé uniquement si une vue linéaire ne peut être utilisée. Les tableaux de données complexes et les graphiques sont des exceptions. Par contre, une image illustrative ne peut provoquer un scroll.
Etape(s):
Prototype
Final
Types d'exigence:
Ergonomie
Référencement
Accessibilité
WCAG 2.1:
1.4.10(AA)
Code
CD.008 - Changement de langue dans le contenu -
Niveau 2
Les changements de langue dans le texte sont indiquées dans l'attribut lang de la balise concernée.
Pour chaque paragraphe, l'attribut lang doit être renseignée; par exemple si un paragraphe est en allemand : lang="de". <code><p lang="de">Ich bevorzuge die Deutsch sprechen.</p></code>
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
WCAG 2.1:
3.1.2(AA)
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
Contenu
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)
Identification
ID.005 - Contenu de la page d'accueil -
Niveau 3
La page d'accueil permet d'identifier la nature des contenus et services proposés.
Etape(s):
Prototype
Rédaction
Final
Design graphique
Types d'exigence:
Ergonomie
ID.014 - Utilisation de cookies avec données personnelles -
Niveau 2
Si des cookies avec enregistrement de données sont utilisés sur le site, un consentement de l'utilisateur est demandé.
S'il refuse, les fonctionnalités utilisant ces cookies doivent être désactivées
Etape(s):
Prototype
Final
Design graphique
Types d'exigence:
RGPD
Contenu
CT.028 - Contenu des versions linguistiques -
Niveau 3
La structure et les informations d'une page disponible en plusieurs langues ne varient pas d'une version à l'autre.
Etape(s):
Prototype
Rédaction
Final
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
Formulaire
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
Navigation
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
Formulaire
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)
Identification
ID.002 - Favicone -
Niveau 3
Le site possède une favicon pertinente.
Etape(s):
Prototype
Final
Design graphique
Types d'exigence:
Ergonomie
Référencement
ID.008 - Cohérence avec les applications tierces -
Niveau 3
Les applications tierces sont cohérentes avec le site (url, interaction et charte graphique).
Etape(s):
Prototype
Types d'exigence:
Ergonomie
Présentation
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)
Identification
ID.011 - Logo SIP -
Niveau 3
La "GOV Bar" utilise le logo officiel du SIP, le logo et le texte renvoie vers gouvernement.lu.
Etape(s):
Arborescence
Prototype
Final
Design graphique
Types d'exigence:
Ergonomie
Référencement
Présentation
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
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
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.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)
Recherche
RC.003 - Critères de recherche -
Niveau 3
Les critères de recherche sont rappelés dans la page de résultats
Mots clé et filtres
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Ergonomie
WCAG 2.1:
3.3.6(AAA)
Navigation
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)
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)
Recherche
RC.006 - Description des pages trouvées -
Niveau 3
Pour chaque page trouvée une description de la page est affichée.
Etape(s):
Prototype
Final
Types d'exigence:
Ergonomie
Référencement
Tableau
TB.005 - Tris pour tableaux complexes -
Niveau 3
Une fonctionnalité de tri est proposée pour les tableaux de données ayant plus de 20 lignes et 3 colonnes et dont le tri fait du sens.
Etape(s):
Prototype
Final
Design graphique
Types d'exigence:
Ergonomie
Contenu
CT.014 - Poids des pages -
Niveau 3
Le poids des pages n'excède pas 600Ko, sauf exception argumentée
Dans le cas de page complexe, un mécanisme évite les sauts de chargement (exemple: chargement progressif avec espace réservé).
Etape(s):
Prototype
Types d'exigence:
Ergonomie
Référencement
Formulaire
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
Identification
ID.012 - Liens de la GOV Bar -
Niveau 3
La GOV Bar propose les liens crossgov.lu, luxembourg.lu, guichet.lu, gouvernement.lu et un lien « Autres sites » qui renvoie vers etat.lu, sauf exception argumentée.
Etape(s):
Prototype
Final
Design graphique
Types d'exigence:
Ergonomie
Référencement
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.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.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
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)
Recherche
RC.001 - Recherche globale -
Niveau 3
Une recherche globale du site est disponible à proximité de la navigation principale.
La recherche s'effectue sur tous les contenus internes proposés par le produit (partie informationnelle et partie applicative).
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Ergonomie
WCAG 2.1:
2.4.5(AA)
Tableau
TB.006 - Manipulation des tris -
Niveau 3
Lorsqu'un tableau triable est présent, le tri de chaque colonne se fait en cliquant sur l'entête de colonne. Lors de l'activation d'un tri, le focus reste sur l'en-tête de la colonne activée et celle-ci est mise en évidence.
La mise en évidence se fait visuellement et avec une alternative textuelle et iconographique.