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.
Page 404 et autres erreurs
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Ergonomie
WCAG 2.1:
3.1.1(A)
3.3.3(AA)
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)
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
CT.027 - Homogénéité des liens vers les documents -
Niveau 2
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é
Etape(s):
Final
Types d'exigence:
Accessibilité
Ergonomie
WCAG 2.1:
3.2.4(AA)
Image et Multimédia
IM.004 - Alternative des images-liens -
Niveau 1
L'alternative textuelle d'une image-lien ou d'un bouton graphique indique la cible ou la fonction du lien ou du bouton.
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Ergonomie
WCAG 2.1:
1.1.1(A)
4.1.2(A)
Présentation
PR.004 - Compréhension sans design -
Niveau 1
L'information est compréhensible (contenu + ordre par type de contenu) lorsque l'on désactive les feuilles de styles
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Référencement
WCAG 2.1:
1.3.2(A)
PR.013 - Utilisation de citation -
Niveau 1
Les citations, extraits d'articles et de textes de lois sont identifiés et présentés de manière particulière.
La mise en évidence se fait à l'aide de balises appropriées : - q pour les citations courtes, -blockquote pour les citations longues. -Pour les lois, em ou q peuvent être utilisées
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
WCAG 2.1:
1.3.1(A)
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.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.028 - Compatibilité lecteur d'écran -
Niveau 1
Le site est compatible avec lecteur d'écran.
Les informations données par le lecteur d'écran font du sens et les fonctionnalités sont utilisables
Etape(s):
Final
Prototype
Types d'exigence:
Accessibilité
Référencement
WCAG 2.1:
4.1.2(A)
Contenu
CT.004 - Centralisation des publications -
Niveau 3
La rubrique "Publications" centralise toutes les publications (documents dédiés à l'impression tels que des rapports, brochures, etc.) présentes sur le site.
Etape(s):
Arborescence
Types d'exigence:
Ergonomie
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)
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.022 - Indication du pays -
Niveau 3
Le pays est spécifié dans toutes les adresses postales proposées sur le site
EX: 2 beim Schlass L-8058 Bertrange ou 2 beim Schlass 8058 Bertrange (Luxembourg)
Etape(s):
Rédaction
Types d'exigence:
Ergonomie
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
Image et Multimédia
IM.005 - Déclenchement explicite des sons et vidéos -
Niveau 1
Les sons et/ou vidéos sont uniquement déclenchés par l'utilisateur.
Etape(s):
Final
Types d'exigence:
Accessibilité
Ergonomie
WCAG 2.1:
3.2.2(A)
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)
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.029 - Compatibilité taille d'écran -
Niveau 1
Le site est compatible sur ordinateur, smartphone et tablette (en portrait et paysage)
La navigation mobile est utilisable, pas de chevauchement de contenu, l'ordre des contenus reste logique sur ces différents écrans
Etape(s):
Final
Types d'exigence:
Accessibilité
Référencement
WCAG 2.1:
4.1.10(A)
1.3.4(AA)
Contenu
CT.005 - Centralisation des législations -
Niveau 3
La rubrique "Législation" centralise toutes les normes légales (lois, règlements, arrêtés, etc.).
Etape(s):
Arborescence
Types d'exigence:
Ergonomie
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
CT.023 - Format des numéros de téléphone -
Niveau 3
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).
Etape(s):
Rédaction
Types d'exigence:
Ergonomie
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)
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)
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.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)
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é
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
CT.010 - Structure en pyramide inversée -
Niveau 3
La structure des pages et des rubriques respecte le principe de la pyramide inversée.
Ce principe consiste à donner un résumé de la page dans le premier paragraphe puis approfondir le sujet
Etape(s):
Arborescence
Types d'exigence:
Ergonomie
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)
CT.025 - Format des documents téléchargeables -
Niveau 3
Les documents téléchargeables sont de préférence proposés au format PDF (largement répandus)
Etape(s):
Rédaction
Final
Types d'exigence:
Ergonomie
Image et Multimédia
IM.002 - Alternative des images complexes -
Niveau 1
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.
Pour une balise img (canvas ou role=img ...) l'utilisation d'un aria-describedby="id", id faisant référence au paragraphe de la description. <img src="…" alt="voir légende ci-après" aria-describedby=iddesc /> <p id="iddesc"> Détails et explications de l'image affichée. </p> ou avec une balise figure: <figure role="group"> <img src="…" alt="description courte" /> <figcaption> Détails et explications de l'image affichée. (ou lien vers la description) </figcaption> </figure> idem pour un svg avec un aria-label ou une balise <title> ou un paragraphe masqué (sauf au lecteur d'écran)
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Référencement
WCAG 2.1:
1.1.1(A)
Présentation
PR.002 - liens d'évitement -
Niveau 1
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.
Lors du parcours au clavier, les liens d'évitement doivent apparaitre dès la première tabulation
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
WCAG 2.1:
2.4.1(A)
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)
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
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
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
CT.017 - Pictogramme et lien illustré -
Niveau 1
Quand un lien textuel est associé à une image (pictogramme ou illustration), le lien est placé sur le texte et l'image.
Si l'image est décorative, le lien peut porter sur l'image grâce au css uniquement.
Etape(s):
Prototype
Final
Types d'exigence:
Ergonomie
WCAG 2.1:
1.1.1(A)
2.4.4(A)
CT.020 - Page contact -
Niveau 3
La page contact contient le nom, l'adresse postale, le mail et idéalement le téléphone de l'éditeur du site .
Etape(s):
Final
Types d'exigence:
Ergonomie
CT.026 - Légitimité du document -
Niveau 3
Les documents téléchargeables sont destinés à être stockés par l'utilisateur.
Il est préférable de fournir les informations dans les pages du site et limiter les contenus fournis sous forme de document téléchargeable.
Etape(s):
Final
Types d'exigence:
Ergonomie
Référencement
Image et Multimédia
IM.003 - Alternatives des images décoratives -
Niveau 1
Les éléments graphiques qui n'apportent pas d'information nécessaires à la compréhension du contenu possèdent une alternative textuelle vide.
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
WCAG 2.1:
1.1.1(A)
Présentation
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.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.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.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.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.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.006 - Centralisation des formulaires -
Niveau 3
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.
Etape(s):
Arborescence
Types d'exigence:
Ergonomie
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
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)
Image et Multimédia
IM.001 - Alternative des images -
Niveau 1
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.
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
Référencement
WCAG 2.1:
1.1.1(A)
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.007 - Présentation homogène -
Niveau 1
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.
Etape(s):
Prototype
Final
Types d'exigence:
Accessibilité
WCAG 2.1:
1.3.1(A)
3.2.4(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)
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.