Checklist Renow beta 4.2


La checklist contient 166 critères réparties en différentes thématiques

Code

11 critères

Numéro
Rôle Description
CD.001 Accessibilité Chaque page comporte la déclaration de type document «!doctype html»
CD.002 Accessibilité Les balises et les rôles ne sont pas détournées de leur fonction (au regard du type de document déclaré)
CD.003 Accessibilité Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?
La zone d'en-tête de la page possède un rôle ARIA banner ;
Le menu de navigation principal possède un rôle ARIA navigation ;
La zone de contenu principal possède un rôle ARIA main ;
La zone de pied de page possède un rôle ARIA contentinfo ;
Le moteur de recherche sur le site possède un rôle ARIA search ;
Les rôles ARIA banner, main, contentinfo et search sont uniques dans la page ;
Le rôle ARIA navigation est réservé aux zones de navigations principales et secondaires.
CD.004 Accessibilité Les textes cachés visuellement sont utilisés de manière compréhensible et ont un intérêt.
CD.005 Rédacteur
Accessibilité
Dans le contenu des pages, les titres suivent l'ordre hiérarchique de titre 2 (h2) à titre 5 (h5) .
CD.006   Les balises h1 et h6 ne sont pas utilisées dans le contenu.
CD.007 Accessibilité La langue par défaut est précisée dans le tag HTML du site.

Au début de chaque page, la propriété lang doit être renseigné au niveau de la balise html, exemple si la page est en français: "html ...lang="fr" "

CD.008 Accessibilité Les changements de langue dans le texte et dans les valeurs de l'attribut HTML sont indiquées

Pour chaque paragraphe, la propriété lang doit être renseignée au niveau de la balise html, exemple si un paragraphe est en allemand: lang="de" < ...lang="fr">

CD.009 Rédacteur
Accessibilité
Les citations doivent utiliser le balisage Q ou BLOCKQUOTE : elles ne doivent pas être simulées à l'aide de guillemets directement saisis dans le texte ou d'italique
CD.010 Rédacteur
Accessibilité
Les listes à puces ou numérotées sont correctement structurées (à l'aide des balises UL et OL)
CD.011 Accessibilité Si un contenu (notamment, emoticon, art ASCII,...) ou une fonctionnalité du site nécessite une alternative pour être accessible, l'information donnée par cette alternative est équivalente à l'information fournie par la version d'origine.

Contenu

29 critères

Numéro
Rôle Description
CT.001 Rédacteur
Accessibilité
Les informations sont placées de manière exclusive dans l'arborescence du site
CT.002 Rédacteur
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.
CT.003   Chaque actualité possède une date de publication.
CT.004 Rédacteur
La rubrique "Publications" centralise toutes les publications (documents dédiés à l'impression tels que des rapports, brochures, etc.) présentes sur le site.
CT.005 Rédacteur
La rubrique "Législation" centralise toutes les normes légales (lois, règlements, arrêtés, etc.).
CT.006 Rédacteur
La rubrique "Formulaires" centralise tous les formulaires (téléchargeables, remplissables en ligne ou autres) présents sur le site et ayant un rapport direct avec l'objet du site en question.
CT.007 Rédacteur
Accessibilité
La rubrique "A propos du site" donne des informations sur l'objet, l'éditeur et la qualité du site ainsi que la déclaration d'accessibilité.
CT.008 Rédacteur
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.
CT.009 Rédacteur
Si une newsletter est présente, une option de désabonnement est proposée au moins via l'e-mail envoyé aux utilisateurs abonnés.
CT.010   Les pages d'erreur contiennent la nature de l'erreur, un moteur de recherche, un lien vers la page d'accueil, vers le plan du site et vers le formulaire de contact.
CT.011 Rédacteur
La structure des pages et des rubriques respecte le principe de la pyramide inversée.
CT.012 Rédacteur
L'architecture du contenu est construite sur base des besoins des utilisateurs et non sur l'organigramme de l'institution.
CT.013 Rédacteur
Accessibilité
La première mention d'une abréviation ou d'un acronyme au sein d'une page donne l'intitulé complet suivi du sigle.
CT.014 Rédacteur
Accessibilité
Les pages sont organisées à l'aide de titres explicites et concis qui identifient l'information apportée par chaque section.
CT.015 Accessibilité Le poids des pages n'excède pas 600Ko, sauf exception argumentée
CT.016   Pour chaque page, la date de dernière mise à jour est affichée.
CT.017 Accessibilité Le site s'affiche sans scroll horizontal (notamment les images quelques soient le support).
CT.018 Rédacteur
Quand un lien textuel est associé à une image (pictogramme ou illustration), le lien est placé sur le texte et l'image.
CT.019   Si des onglets sont utilisés, le contenu de chaque onglet ne nécessite pas de comparaison entre eux.
CT.020 Rédacteur
Accessibilité
Les documents proposés en téléchargement sont accessibles ou ont une alternative accessible (avec les mêmes informations et actions)
CT.021 Rédacteur
La page contact contient le nom, l'adresse postale,  le mail et idéalement  le téléphone de l'éditeur du site .
CT.022 Rédacteur
Le texte d'un lien 'mailto' correspond à l'adresse mail pointée (l'adresse mail est visible).
CT.023 Rédacteur
Le pays est spécifié dans toutes les adresses postales proposées sur le site
CT.024 Rédacteur
L'indicatif téléphonique du pays est précisé devant le(s) numéro(s) de téléphone et de fax proposé(s) sur le site web suivant le formalisme suivant (+352).
CT.025 Rédacteur
Accessibilité
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
CT.026 Rédacteur
Accessibilité
Les documents téléchargeables sont de préférence proposés au format PDF (largement répandus)
CT.027   Les documents téléchargeables sont destinés à être stockés par l'utilisateur.
CT.028 Rédacteur
Chaque document téléchargeable possède un texte de lien unique et identique (ou très similaire) dans toutes les pages dans lesquelles il est proposé
CT.029 Rédacteur
Accessibilité
La structure et les informations d'une page disponible en plusieurs langues ne varient pas d'une version à l'autre.

Formulaire

22 critères

Numéro
Rôle Description
FM.001   Taille du champ de saisie adaptée selon le type d'information.
FM.002 Graphiste
Accessibilité
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

FM.003 Accessibilité Les labels sont placés au dessus de leur champs
FM.004 Accessibilité Les champs sont visuellement regroupés (fieldset) et possèdent une légende, si cela facilite la compréhension.
FM.005 Accessibilité Les groupes d'options des champs SELECT sont balisés avec des éléments OPTGROUP dotés d'un libellé via l'attribut LABEL.
FM.006   Les champs SELECT, RADIO et CHECKBOX présentent des choix explicites (pas d'abréviations).
FM.007   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.
FM.008   Les champs INPUT RADIO sont utilisés pour des listes à choix uniques.
FM.009   Les champs INPUT CHECKBOX sont utilisés pour des listes à choix multiples (0,1 ou plusieurs choix possibles)
FM.010   Les libellés des boutons d'action et les labels de champs sont cohérents à travers toutes les pages du site.
FM.011 Graphiste
Accessibilité
Les actions de formulaires ne sont pas mis en forme comme des liens.
FM.012 Graphiste
Accessibilité
Les libellés des boutons indiquent clairement l'action de manière concise.
FM.013 Accessibilité Le formulaire peut être validé à l'aide de la touche entrée.
FM.014 Graphiste
Les boutons d'actions sont placés en fin de formulaire et sont alignés à gauche ou centrés.
FM.015 Graphiste
Accessibilité
Les champs obligatoires sont différenciés par une astérisque rouge dans leur LABEL, sous la forme "Intitulé * :".

La propriété "required" doit également être présente sur le champs

FM.016 Accessibilité La note "* Champ obligatoire" est spécifié au niveau du formulaire.
FM.017 Accessibilité Les messages d'erreurs indiquent la nature de l'erreur ainsi que les moyens de correction de l'erreur directement après le champ
FM.018   Les messages d'erreurs, les libellés et les champs associés sont mis en valeur 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...).
FM.019 Accessibilité En cas d'erreur, toutes les informations saisies par l'utilisateur (correctes et erronées) sont conservées et modifiables.
FM.020 Accessibilité 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)
FM.021 Accessibilité Lorsqu'un format de données est attendu, l'utilisateur est informé.
FM.022 Accessibilité Lorsqu'une aide contextuelle masquée est proposée, elle apparait dans un encart à proximité du champs tout en permettant la saisie.

Identification

12 critères

Numéro
Rôle Description
ID.001   Le nom de domaine respecte le formalisme www.nom.public.lu.
ID.002   Le site ou le produit est directement consultable via l'URL avec ou sans la saisie des "www".
ID.003   Le site est uniquement consultable en https.
ID.004   Les urls du site sont compréhensibles ne contiennent pas de caractères en majuscule ou de caractères spéciaux, de soulignés ou d'espace. Le tiret est utilisé comme séparateur de mots.
ID.005 Rédacteur
Graphiste
La page d'accueil permet d'identifier la nature des contenus et services proposés.
ID.006   L'adresse de contact du produit respecte le formalisme "info@nomdedomaine" ou "support@nomdedomaine" lorsqu'un support "Helpdesk" est proposé à l'utilisateur.
ID.007   La balise description de chaque page est renseignée en fonction de son contenu.
ID.008   Les applications tierces sont cohérentes avec le site (url, interaction et charte graphique).
ID.009   Lorsqu'un alias de communication (p.ex. www.guichet.lu) est défini il renvoie vers le nom de domaine officiel (p.ex www.guichet.public.lu)
ID.010 Graphiste
Le logo Renow renvoie vers le site "Renow".
ID.011 Rédacteur
Graphiste
La "GOV Bar" utilise le logo officiel du SIP, le logo et le texte renvoie vers www.gouvernement.lu.
ID.012 Graphiste
La GOV Bar propose les liens crossgov.lu, luxembourg.lu, guichet.lu, gouvernement.lu et un lien « Autres sites » qui renvoie vers www.etat.lu.

Image et Multimédia

7 critères

Numéro
Rôle Description
IM.001 Rédacteur
Accessibilité
Les alternatives textuelles d'images de contenu sont concises, limitées à l'information essentielle apportée spécifiquement par l'image. Elles ne font pas doublon avec l'information textuelle déjà présente dans le corps du texte.
IM.002 Rédacteur
Accessibilité
L'information apportée par une image complexe est explicitée dans le corps du texte, et l'image a une alternative textuelle permettant de localiser la description.
IM.003 Rédacteur
Accessibilité
Les éléments graphiques qui n'apportent pas d'information nécessaires à la compréhension du contenu possèdent une alternative textuelle vide.
IM.004 Rédacteur
Accessibilité
L'alternative textuelle d'une image-lien ou d'un bouton graphique indique la cible ou la fonction du lien ou du bouton.
IM.005 Accessibilité Les sons et/ou vidéos sont uniquement déclenchés par l'utilisateur.
IM.006 Accessibilité Chaque changement d'affichage (vidéo, modale, slider,...) est contrôlable par l'utilisateur.
IM.007 Rédacteur
Accessibilité
L'information délivrée dans les documents audio et vidéo est reproduite sous forme de transcriptions textuelles.

Navigation

41 critères

Numéro
Rôle Description
NV.001 Rédacteur
L'arborescence du site est régulière et équilibrée.
NV.002 Rédacteur
La navigation thématique a une profondeur de 5 niveaux maximum
NV.003 Rédacteur
Accessibilité
Les menus de navigation sont composés uniquement de liens vers des pages HTML internes du produit.
NV.004 Rédacteur
Si une page propose des sous-rubriques, elles sont au moins au nombre de 2.
NV.005 Rédacteur
Le site (ou l'application) ne propose pas de page vide.
NV.006 Rédacteur
Accessibilité
Les titres de pages de même niveau sont définis de manière homogène
NV.007 Accessibilité Les titres affichés dans la barre de titre du navigateur respectent le formalisme suivant: "Titre de la page en cours - Nom du site"
NV.008 Rédacteur
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".
NV.009 Rédacteur
Les rubriques thématiques proposent toujours des sous-rubriques.
NV.010 Rédacteur
Accessibilité
Chaque titre de page (H1) est unique.
NV.011 Rédacteur
Accessibilité
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).
NV.012   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.
NV.013 Accessibilité 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.
NV.014   Les contenus datés sont archivés par mois et/ou année et accessibles via un système de navigation dédié.
NV.015 Rédacteur
Si un contenu d'ordre législatif est proposé, il est appuyé par un lien vers le texte officiel.
NV.016 Rédacteur
Les liens vers des documents de lois pointent sur le site www.legilux.public.lu au niveau de la dernière version du document téléchargeable en question.
NV.017 Rédacteur
Accessibilité
Les rubriques de support suivantes sont obligatoires : Plan du site, Contact, A propos, Aspects légaux.
NV.018 Accessibilité Le plan du site / application reprend, dans le même ordre que l'arborescence, les titres exacts de toutes les pages des 3 premiers niveaux des navigations primaire et secondaire et des rubriques de support.
NV.019 Accessibilité Aucune fenêtre pop-up n'est autorisée (ouverture inopinée et non renseignée, non anticipable par l'utilisateur de nouvelles fenêtres, encore appelées fenêtres surgissantes ou intruses).
NV.020 Accessibilité Les changements d'affichage (lancement de vidéo, affichage d'une modale, nouvelle fenêtre ...) sont uniquement issus d'une action de l'utilisateur. Sauf alerte importante et slider.
NV.021 Accessibilité Toutes les actions peuvent être accomplies à l'aide du clavier
NV.022 Accessibilité Le parcours au clavier est visible et anticipable par l'utilisateur
NV.023 Graphiste
Accessibilité
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.
NV.024 Rédacteur
Accessibilité
Les libellés de liens sont significatifs et univoques.
NV.025 Rédacteur
Graphiste
Accessibilité
Le contenu ne contient pas de lien ayant un texte identique pour des cibles différentes.
NV.026 Graphiste
L'aspect graphique des "actions utilisateurs" (p.ex. lancer une recherche) est différent des liens de navigation.
NV.027 Rédacteur
Accessibilité
Chaque lien interne (pointant vers une page du produit) s'ouvre dans la fenêtre courante.
NV.028 Rédacteur
Accessibilité
La longueur des textes de lien proposés dans le corps de texte est comprise entre 5 et 80 caractères.
NV.029 Rédacteur
Graphiste
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.
NV.030   Les pages proposent une fonction d'impression.
NV.031   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.
NV.032 Graphiste
Les pages proposent une fonction de partage.
NV.033 Graphiste
Les pages contiennent une fonction « Haut de page ».
NV.034   Si une application tierce est utilisée, elle s'ouvre dans la même fenêtre que le reste du site.
NV.035 Rédacteur
Lorsque le système d'onglets est utilisé, au minimum 2 onglets sont présents.
NV.036 Rédacteur
Hors nom de domaine les URLs du site sont significatives et rédigées dans la même langue que la page
NV.037 Accessibilité Le changement de version linguistique est proposé sous forme de lien rédigé dans les langues cibles
NV.038 Rédacteur
Accessibilité
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
NV.039 Rédacteur
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.
NV.040 Rédacteur
Dans le cas de traduction ponctuelle, la page traduite est disponible en contenu associé et pointe vers une sous-page dans l'arborescence
NV.041   Seules les versions linguistiques disponibles (et non la version en cours de consultation) sont proposées.

Présentation

27 critères

Numéro
Rôle Description
PR.001 Rédacteur
Les éléments de navigation thématiques, transversales et de support ne sont pas mélangés.
PR.002 Accessibilité Les liens d'évitement "aller au contenu", "aller à la navigation", "aller à la recherche" sont présents, au même endroit sur chaque site, s'ils ont un intérêt. Ils sont visibles au focus.
PR.003 Graphiste
Accessibilité
L'information ne doit pas être donnée uniquement par la couleur, la forme, la taille ou la position.
PR.004 Accessibilité L'information est compréhensible (contenu + ordre par type de contenu) lorsque l'on désactive les feuilles de styles
PR.005 Accessibilité Les textes restent lisibles et ne se chevauchent pas en zoom 200%.
PR.006 Rédacteur
Graphiste
Les contenus des pages sont alignés à gauche sans justification
PR.007 Accessibilité Les informations de même niveau (titres principaux, titres secondaires, texte standard, légendes, box ...) se présentent partout de la même manière.
PR.008 Graphiste
L'apparence graphique des titres est cohérente avec leur niveau hiérarchique.
PR.009 Rédacteur
Graphiste
Accessibilité
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?).
PR.010 Graphiste
Accessibilité
Les pages n'imposent pas d'effets de flash, des changements de luminosité ou des clignotements.
PR.011 Rédacteur
Graphiste
Le soulignement est réservé aux liens.
PR.012 Rédacteur
Les expressions importantes et les mots-clés sont mis en évidence en gras.
PR.013 Rédacteur
Les citations, extraits d'articles et de textes de lois sont identifiés et présentés de manière particulière.
PR.014 Accessibilité Si des tableaux sont utilisés pour gérer des aspects de présentation, le contenu est compréhensible lorsqu'il est linéarisé.
PR.015 Rédacteur
Accessibilité
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).
PR.016 Accessibilité
Le site est compatible sur les principaux navigateurs web (Firefox, Chrome, IE, Edge, Safari)
PR.017 Rédacteur
Graphiste
Accessibilité
La taille minimale du texte doit être lisible quelle que soit sa fonction (une taille inférieure à 12px est souvent illisible).
PR.018 Graphiste
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).
PR.019   Aucun roll-over ne change/décale la mise en page du texte.
PR.020 Graphiste
Toutes les zones cliquables présentent un effet de roll-over.
PR.021 Graphiste
Accessibilité
Les liens de type "contenu" sont soulignés ou ont un contraste avec le texte alentour de 3.1 minimum.
PR.022 Accessibilité L'effet de roll-over des liens de contenu non-soulignés font apparaître un soulignement.
PR.023 Graphiste
Lorsqu'un système d'onglets est utilisé, le design met en évidence la portée de l'onglet.
PR.024 Accessibilité L'onglet actif est relié visuellement à la portée de son contenu.
PR.025 Graphiste
Accessibilité
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.
PR.026 Graphiste
Accessibilité
Le texte principal de la zone de contenu doit avoir un ratio de contraste minimum de 5,5:1.
PR.027 Graphiste
Accessibilité
Dans les contenus, les liens visités ont une couleur différente des liens non-visités.

Recherche

9 critères

Numéro
Rôle Description
RC.001   Un moteur de recherche simple est proposé à proximité de la navigation principale.
RC.002 Accessibilité La recherche simple s'effectue sur tous les contenus internes proposés par le produit (partie informationnelle et partie applicative).
RC.003 Graphiste
Pour les formulaires à champs unique, le bouton d'action doit être à la suite (à coté ou en dessous).
RC.004   Les critères de recherche sont rappelés dans la page de résultats
RC.005   Les mots-clés recherchés sont mis en surbrillance dans les résultats affichés.
RC.006   Les titres des pages trouvées sont mis en évidence et cliquables
RC.007   Pour chaque page trouvée une description de la page est affichée
RC.008   Une page "Aucun résultat" est prévue et rappelle les critères de recherche
RC.009 Graphiste
La portée d'une recherche spécifique est indiquée.

Tableau

8 critères

Numéro
Rôle Description
TB.001 Rédacteur
Accessibilité
Les tableaux sont uniquement utilisés pour présenter des données nécéssitant une structure en ligne/colonne
TB.002 Rédacteur
Accessibilité
Chaque tableau possède des en-têtes TH appropriés.
TB.003 Rédacteur
Accessibilité
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.
TB.004 Rédacteur
Accessibilité
Les tableaux de données ont un titre CAPTION
TB.005   Une fonctionnalité de tri est proposée pour les tableaux de données dont la longueur est supérieure à un écran et dont les données peuvent être classées par plusieurs colonnes.
TB.006   Lorsqu'un tableau triable est présent, le tri de chaque colonne se fait en cliquant sur l'entête de colonne.
TB.007   Lorsqu'un tableau triable est présent, la colonne sur laquelle le tri est appliqué est mise en évidence.
TB.008 Accessibilité Lorsqu'un tableau triable est présent, lors de l'activation d'un tri, le focus reste sur l'en-tête de la colonne activée.
 
Dernière mise à jour