Appréciation générale
Niveau d’accessibilité global pour les critères testés : bon.
(Échelle : très faible, faible, moyen, bon, très bon)
Avertissement
Il s’agit là d'un audit simplifié et non d’un audit de conformité (ou audit "complet"). Il a vocation à détecter une série de problèmes d’accessibilité mais n’est pas exhaustif. Le fait qu’aucun problème ne soit remonté pour un critère d’accessibilité donné ne signifie pas qu’il n’y a pas de problème d’accessibilité pour ce critère. De même, lorsque nous rapportons une occurrence d’un problème, ce problème peut avoir d’autres occurrences. Il est nécessaire de vérifier de manière exhaustive l’accessibilité de ce site conformément au référentiel RAWeb.
Échantillon de pages et référentiel
Voici les pages qui ont été évaluées lors de cet audit :
- Page 1 : Inclusion scolaire
- Page 2 : Actualités & publications - Inclusion scolaire
- Page 3 : Contact - Inclusion scolaire
Méthode d’évaluation : Méthode de contrôle simplifiée de l’accessibilité pour le Luxembourg – v1.2.1
Référentiel : RAWeb v1
Déclaration sur l’accessibilité
La déclaration sur l’accessibilité est présente et complète.
Annexe technique
Thématique "images"
ImagesRecommandations générales
Donner à chaque image porteuse d’information une alternative textuelle pertinente et une description détaillée si nécessaire. Lier les légendes à leurs images. Remplacer les images textes par du texte stylé lorsque c’est possible. Pour trouver la bonne alternative textuelle pour une image donnée, vous pouvez vous aider de l’arbre de décision proposé par la WAI.
Cas rencontré : images porteuses d’information
Les images porteuses d’information doivent avoir une alternative textuelle qui sera restituée aux personnes utilisant un lecteur d’écran, aveugles et grands malvoyants. Cette alternative textuelle doit fournir l’information véhiculée par l’image, il ne s’agit pas d’une description de l’image. Pour une image matricielle, son attribut alt doit contenir cette alternative textuelle. Pour une image vectorielle SVG, celle-ci doit avoir l’attribut role="img" et son alternative textuelle pourra être fournie via les attributs aria-label ou aria-labelledby.
Exemples de problèmes détectés sur la page 1
En pied de page : il convient de reprendre tout le texte "Le gouvernement du Grand-Duché de Luxembourg. Ministère de l'Education nationale, de l'Enfance et de la Jeunesse. Service national del'éducation inclusive." Nul besoin de préciser "Logo du gouvernement…".
Cas rencontré : images de décoration
Les images de décoration ne doivent pas avoir d’alternative textuelle et doivent être ignorées correctement par les technologies d’assistance. Dans le cas contraire, elles peuvent causer des problèmes de compréhension aux utilisateurs de lecteurs d’écran (aveugles et grands malvoyants). Pour une image matricielle, son attribut alt doit être vide. Pour une image vectorielle SVG, celle-ci doit avoir l’attribut aria-hidden="true".
Exemples de problèmes détectés sur la page 2
Chaque publication est dotée d'une illustration, celle-ci ne doit pas comporter de contenu dans son alternative.
Cas rencontré : titres de cadres
Les titres de cadres sont utiles à la compréhension de la structure de la page et des contenus pour les personnes aveugles. Tout cadre (élément <iframe> ou <frame>) doit avoir un titre fourni via son attribut title. Ce titre doit être pertinent, il doit représenter le contenu du cadre.
Exemples de problèmes détectés sur la page 1
Une iframe n'a pas de titre. Attention, les deux autres ont pour titre "Blank".
Thématique "liens"
LiensCas rencontré : pertinence des intitulés
Chacun doit pouvoir comprendre aisément la fonction et la destination de chaque lien. Les problèmes rencontrés ici le sont pour les aveugles, les malvoyants, les handicapés moteurs qui naviguent à la voix et les handicapés cognitifs.
Exemples de problèmes détectés sur la page 1
Il convient de reprendre tout le texte visible, non uniquement une partie ("Logo du gouvernement du Grand-Duché de Luxembourg - Ministère de l'Éducation nationale").
Thématique "scripts"
ScriptsRecommandations générales
Donner si nécessaire à chaque script une alternative pertinente. Avertir ou permettre le contrôle des scripts qui initient un changement de contexte. Rendre possible le contrôle de chaque code script au moins par le clavier et par tout dispositif de pointage et s’assurer de leur compatibilité avec les technologies d’assistance notamment pour les messages de statut.
Cas rencontré : éléments interactifs inaccessibles au clavier
Les composants riches développés en JavaScript doivent respecter des modèles de conception spécifiques pour pouvoir être considérés comme accessibles (modèles de conception décrits dans le document « WAI-ARIA Authoring practices guide »). Sans cela le composant ne sera pas correctement restitué aux utilisateurs de lecteurs d’écran qui ne sauront pas comment l’utiliser. Ces composants doivent notamment utiliser des interactions au clavier spécifiques, sans lesquelles ils seront inutilisables pour les utilisateurs de la navigation au clavier.
Exemples de problèmes détectés sur la page 1
Les fenêtres modales Accessibilité ou Chatbot doivent répondre au motif de conception Aria Dialog (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/). De ce point de vue, veiller à limiter les tabulations aux éléments de la fenêtre modale quand elle est ouverte. La boîte cookies doit pouvoir se fermer à l'aide de la touche Echap.
Thématique "éléments obligatoires"
Éléments obligatoiresRecommandations générales
Vérifier que dans chaque page Web, le titre est pertinent et la langue par défaut est indiquée. Vérifier que les balises ne sont pas utilisées uniquement à des fins de présentation, que les changements de langues et de direction de sens de lecture sont indiqués.
Cas rencontré : indication de langue
Les lecteurs d’écran utilisent les indications de langue pour vocaliser correctement le contenu. La langue principale de la page est spécifiée via l’attribut lang sur l’élément <html>. Lorsqu’un mot d’origine étrangère est inséré dans du contenu écrit dans la langue principale de la page, il doit posséder si nécessaire une indication de langue. L’indication de langue se fait par l’intermédiaire de l’attribut lang.
Il existe néanmoins des exceptions :
- Lorsqu’il s’agit d’un nom, l’indication de langue doit être faite uniquement quand le nom doit se prononcer dans sa langue d’origine ;
- Lorsqu’il s’agit d’un mot d’origine étrangère, présent dans le dictionnaire de la langue principale de la page, l’indication de langue n’est pas nécessaire ;
- Lorsqu’il s’agit d’un mot d’origine étrangère d’usage courant, mais absent du dictionnaire, l’indication de langue doit être faite uniquement si la prononciation dans la langue principale de la page est problématique.
Plus d’information sur le sujet dans notre article : L’attribut lang, pour rendre la page audible… et compréhensible
Exemples de problèmes détectés sur la page 1
Cette page contient des textes en d’autres langues non marqués par un changement de langue via l’attribut lang (par exemple « Made by »).
Thématique "structuration de l'information"
Structuration de l'informationCas rencontré : titres
Les titres permettent aux utilisateurs de comprendre la structure du document. Ils permettent aussi aux utilisateurs aveugles, malvoyants et handicapés moteurs de naviguer de titre en titre dans la page. Il est donc important d’avoir une bonne hiérarchie de titres dans une page. Cette hiérarchie est similaire à un sommaire de document. La vérification de la hiérarchie de titres peut se faire via l’extension de navigateur HeadingsMap.
Exemples de problèmes détectés sur la page 1
Certains passages de texte sont visuellement des titres mais cette information n’est pas présente dans le code html de la page. Ex: "Je suis parent ou élève" devrait être dans une balise <h3>. Le paragraphe est d'ailleurs inclus dans un <span> pourvu d'une classe "h3-like".
Thématique "présentation de l'information"
Présentation de l'informationRecommandations générales
Utiliser des feuilles de styles pour présenter de l’information. S’assurer que l’information reste compréhensible lorsque les feuilles de styles sont désactivées. Vérifier l’effet de l’agrandissement à 200 % de la taille des caractères et de la redéfinition des propriétés d’espacement sur la lisibilité. S’assurer que les liens sont correctement identifiables, que la prise de focus est signalée et que l’utilisateur a le contrôle des contenus additionnels qui deviennent visibles au survol ou au focus. S’assurer que les contenus cachés sont ignorés par les technologies d’assistance et que l’information n’est pas donnée uniquement par la forme, taille ou position d’un élément.
Cas rencontré : contenus cachés
Tout contenu dans la page peut être ignoré par les technologies d’assistance (notamment en utilisant l’attribut aria-hidden="true"). Si un contenu est visible mais ignoré par les technologies d’assistance, les utilisateurs de ces technologies d’assistance ne pourront pas prendre connaissance du contenu ni interagir avec les éventuels éléments interactifs qu’ils pourraient contenir. La visibilité d’un contenu doit donc être cohérente pour tous les utilisateurs du site, qu’ils utilisent ou non une technologie d’assistance.
Exemples de problèmes détectés sur la page 1
Les codes de langue ne doivent pas recevoir d'attribut aria-hidden dans la mesure où certaines personnes en situation de handicap peuvent demander à un assistant, via du speech to text, d'accéder au lien "EN English", car c'est ce qu'ils voient à l'écran.
Thématique "formulaires"
FormulairesRecommandations générales
Pour chaque formulaire, associer chacun de ses champs à son étiquette, grouper les champs de même nature et leur donner une légende, structurer les listes de choix de manière pertinente, donner à chaque bouton un intitulé explicite. Vérifier la présence de suggestions lors des erreurs de saisie, s’assurer que le contrôle de saisie est accessible, que la finalité des champs peut être déduite et que l’utilisateur peut garder le contrôle sur ses données à caractère financier, juridique ou personnel.
Cas rencontré : identification des champs, des contrôles et des regroupements de formulaires
L’identification de ces éléments fournit aux aveugles et grands malvoyants les informations nécessaires pour pouvoir remplir un formulaire. Les handicapés moteurs utilisant un système de reconnaissance vocale s’appuient aussi sur ces éléments pour se déplacer dans les différents champs et actionner les boutons. Pour associer une étiquette (<label>) à un champ de formulaire on peut utiliser l’attribut for de l’étiquette dont la valeur doit être identique à celle de l’attribut id du champ. Les champs de même nature doivent être regroupés, cela peut être réalisé via l’élément <fieldset> auquel on doit fournir une légende via l’élément <legend>.
Exemples de problèmes détectés sur la page 1
Pour les deux champs de recherche : l’étiquette du champ n’est pas visible. Un placeholder n’est ici pas suffisant, car il ne sera plus visible une fois que l’utilisateur aura commencé à remplir le champ. Une solution peut être de placer un attribut title sur le champ, qui contient le contenu de l’étiquette. Ce contenu sera visible au "hover", même pendant la saisie.
Cas rencontré : contrôle et aide à la saisie
Que ce soit pour les handicapés cognitifs ou pour les aveugles et déficients visuels, il est nécessaire d’expliciter les formats de données attendus dans les consignes et les messages d’erreur, ainsi que le caractère obligatoire de la saisie de certains champs.
Exemples de problèmes détectés sur la page 3
Le type de données attendu dans le champ « e-mail » n’est pas précisé, et cela ni dans l’étiquette, ni dans le message d’erreur. Il est nécessaire de donner un exemple. Par ailleurs, il est nécessaire d'indiquer la signification de l'astérisque avant le premier champ de formulaire.