Audit Accessibilité pour Agence Parisienne du Climat

Navigation et balisage

Il reste plusieurs erreurs liées à la navigation principale. Il faut en priorité discocier l’élement header de la navigation et sortir le lien d’évitement de la navigation principale.

Les utilisateurs de lecteur d’écran (utilisateurs aveugles ou grand malvoyants) peuvent rencontrer de grandes difficultés pour se représenter la structure du document.

Pour le lien d’évitement, les personnes navigant au clavier seul peuvent perdre le focus dans la navigation et être bloqués dans la page.

Je vous recommande de traiter tous les points associés à la navigation ou au cartouche de recherche/contact/langue car ils ont un impact important sur les utilisateurs et se trouvent sur toutes les pages. Ces points sont regroupés dans les Éléments transverses .

Ordre des balises

Lorsque le contenu est présenté en “card”, mais également dans des sections de focus en colonnes, l’ordre des balises n’est pas correct. Le titre doit être le premier élément et le contenu doit être strutcturé dans le code de manière à ce qu’il se rapporte à ce titre.

Actuellement, les utilisateurs de lecteur d’écran rencontreront certainement de très grandes difficultés à comprendre la structure de l’information. Positionner le titre de l’article ou de la section en première position dans le code permet de s’assurer que les informations qui quivent s’y rapportent bien.

Par ailleurs, lorsque les liens ont des intitulés génériques (ex. “Se rendre sur la page”), les utilisateurs de lecteur d’écran trouvent le contexte du lien en se référent au titre ou au paragraphe qui précède. Le cas échéant, il est fortement recommandé que les encarts qui comportent des liens génériques aient un titre ou a minima que le paragraphe qui précède directement ne soit pas vide.

Titres

De nombreux utilisateurs de technologies d’assistance ont des stratégies de navigation qui utilisent l’arborescence des titres de la page. Il est primordial que l’information contenue dans la page soit correctement structurée et que les titres représentent la structure de l’information. Ainsi, en consultant le plan des titres, un utilisateur pourra comprendre l’architecture de l’information présentée dans la page.

De manière très simpliste, on peut considérer que tout ce qui ressemble visuellement à un titre doit être un titre.

Il est essentiel que la hiérarchie de l’information soit cohérente. Si un titre de niveau 3 est présent sous un titre de niveau 2, il faut que cela reflête la réalité de l’architecture de l’information visible.

Pour qu’un texte soit interprété comme un titre par les navigateurs et les technologies d’assistance, il est possible d’utiliser les balises hn (h1, h2, h3….) mais vous pouvez également utiliser l’attribut role="heading" assorti de l’attribut aria-level="n" (aria-level="1", aria-level="2"…).

Il n’est pas obligatoire que les niveaux de titre se suivent (ex. h1 > h2 > h4) tant que la hierarchie est cohérente.

Utilisation des listes

Dans le glossaire du RGAA , les listes sont définies ainsi.

Suite d’éléments pouvant être regroupés sous la forme d’une liste structurée ordonnée, non ordonnée ou de définition.

La note 3 de cette notice permet de mieux comprendre :

Note 3 : la notion de « regroupés visuellement sous forme de liste » se caractérise par :

• La présence d’un marqueur visuel permettant de faire comprendre qu’il s’agit d’une liste non ordonnée par exemple -, •, *, etc. ;
• La présence d’un marqueur visuel permettant de faire comprendre qu’il s’agit d’une liste ordonnée par exemple un chiffre, une lettre grecque, etc. ;
• La présence d’une série d’éléments se suivant visuellement les uns les autres, avec une forme visuelle, une nature et un fonctionnement identique, mais sans avoir directement de marqueur visuel de liste (non ordonnée ou ordonnée), par exemple un menu de navigation.

Pour les utilisateurs de lecteur d’écran, utiliser la bonne sémantique permet de faciliter la compréhension dans bien des cas. Mais cela ajoute également des informations qui ne sont parfois pas nécessaires.
Aussi, bien que n’étant pas une non-conformité, le fait de mettre des articles d’une même catégorie (ex. les actualités ou les événements sur la page d’accueil), peut allourdir inutilement la navigation. Je vous recommande donc d’éviter d’utiliser les listes pour regrouper des articles remontés sous forme de “card”.

Images

Que mettre dans l’attribut alt d’une image ?

La très grande majorité des images que nous utilisons sur nos sites sont des images de décorations. Il faut donc laisser vide l’attribut alt alt="".

Cet attribut est à renseigner lorsque l’image apporte une information essentielle à la compréhension du contenu. Par exemple, si le texte à côté de l’image contient déjà ce qui est indiqué sur l’image, il faut laisser son alternative vide.

Parfois, un élément de l’image n’apparaît pas dans le texte. Exemple avec l’actualité “Retour sur les Rencontres AdaptaVille 2023” en page d’accueil. L’image indique que ces rencontres sont annuelles, ce qui n’apparaît pas dans le titre. L’information doit alors apparaître dans l’alternative. Les utilisateurs d’écran pourront ainsi avoir accès à l’ensemble des informations.

A contrario, si les images de décoration ont une alternative, la navigation des utilisateurs de lecteur d’écran est alourdie inutilement.

Vidéos

Beaucoup d’utilisateurs rencontrent des difficultés avec les vidéos. Un utilisateur aveugle aura besoin d’une transcription complète de la vidéo et de son contenu.
Un utilisateur daltonien ou mal-voyant pourra avoir besoin d’une description d’éléments graphiques non perceptibles.
Une utilisatrice malentendante aura besoin de sous-titres précis, voire d’une audiodescription qui décrira plus précisément le contenu de la vidéo. Des utilisateurs atteints de troubles de l’attention ou de la mémoire peuvent également avoir besoin d’une transcription ou de sous-titres.

C’est pourquoi, lorsque vous publiez une vidéo, il est nécessaire de publier également une transcription complète et des sous-titres, voire une audidescription.

PDF

Les documents proposés en téléchargement sur le site doivent être accessibles ou avoir une alternative accessible. Rendre un document PDF accessible dépend de l’outil que vous utilisez. Voici quelques explications pour Adobe Acrobat par exemple.

Le Grand-Duché du Luxembourd a publié un Référentiel d’évaluation de l’accessibilité des documents au format PDF qui retranscrit la norme internationale et européenne, simplifiant ainsi la compréhension des attendus.

Une alternative au document PDF en html peut être proposée. L’ensemble des informations doit alors apparaître dans cette alternative.

Formulaires

L’accessibilité des formulaires nécessite une attention toute particulière. Notamment pour des aides et des contrôles de saisie. Lorsqu’un format spécifique est attendu dans un champ ou que ce champ est obligatoire, les indications doivent être clairement fournies avant soumission du formulaire.
Ces idications doivent également être rappelées dans les messages d’erreur.

Par ailleurs, les messages d’erreur doivent être correctement reliés aux champs qui présentent une erreur. Soit en nommant les champs, soit par l’attribut aria-describedby.

Enfin, la saisie est grandement simplifiée par l’utilisation correcte de l’attribut autocomplete.

Exemple de champ de formulaire :

<p>* Champs obligatoires</p>

<label for="email">E-mail* (nom@domaine.fr)</label>
<input aria-describedby="erreur-email" type="email" id="email" autocomplete="email" aria-invalid="true" required>

<p id="erreur-email" aria-live="alert">L'adress e-mail ne respecte pas le format attendu. Ex. : michel@apc-paris.com</p>

Quick wins

Pour améliorer rapidement le score de conformité, quelques critères sont a priori très simples à corriger car ne nécessitant pas une intervention technique compliquée ou étant présent sur peu de pages.

Critère 1.9 - les légendes d’image

Pour être pleinement comprises par les différentes technologies d’assistance, les images légendées doivent suivre une structure un peu particulière qui peu sembler contre-intuitive et redondante.
Ainsi, lorsque vous rencontrez une image légendée :

• ajoutez un role="group" à l’élément <figure>
• mettez la légende dans un élément <figcaption>
• reprenez le contenu du alt dans la légende auquel vous ajoutez les éléments de légende (copyright ou autre)
• reprenez le contenu du figcaption dans un attribut aria-label sur l’élément <figure>

<figure role="group" aria-label="[contenu du figcaption]">
  <img src="…" alt="label-image" />
  <figcaption>
	[label-image] Légende de l’image
  </figcaption>
</figure>

Cette non-conformité a été relevée sur les pages Contact, Notre organisation et Actualité : 100^e newsletter de l’Agence Parisienne du Climat.

Critère 2.1 - les titres des cadres

Indiquer un titre pertinent sur les cadres permet aux utilisateurs de lecteur d’écran d’adapter leur stratégie de navigation. Il n’est pas nécessaire de décrire le contenu, mais de permettre de comprendre la nature de l’information (ex. title="vidéo" ou title="graphique interactif").

Cette non-conformité a été relevée sur les pages Actualité : 100^e newsletter de l’Agence Parisienne du Climat, Accompagner les copropriétés à chaque étape de leur projet avec CoachCopro et Comprendre le climat parisien avec Météo-France.

Critère 5.4 - les tableaux

Dans la fenêtre modale de Préférences en matière de cookies, des tableaux sont utilisés pour présenter les différents cookies. Ces tableaux n’ont pas de titres identifiés. Il suffit d’ajouter un élément <caption> qui reprend le titre affiché au-dessus. Cet élément peut être positionné hors écran (.sr-only). Il est également possible d’utiliser un aria-label ou un aria-labelledby.

Cette non-conformité a été relevée dans la page Éléments transverses.

Critère 8.6 - les titres de page

Les titres de pages sont une aide précieuses pour beaucoup d’utilisateurs pour pouvoir retrouver des pages dans l’historique par exemple. Lorsqu’un filtre est activé dans les pages actu ou agenda, ce filtre doit être indiqué dans le titre de la page.

Cette non-conformité a été relevée dans la page Agenda.

Critère 8.7 - les changements de langue

Les lecteurs d’écran utilisent des synthèses vocales. Lorsque ces synthèses vocales rencontrent des termes d’une autre langue, la compréhension peut être très complexe pour un utilisateur de lecteur d’écran. Si un changement de langue est indiqué, la synthèse vocale pourra adapter sa pronociation.
Sur le site, le terme “newsletter” est utilisé sur quasiment chaque écran. Ce terme doit être entouré par une balise associée d’un attribut lang="en".

Note : ce terme apparaît également dans un titre de page, la mise en place d’un mécanisme permettant d’insérer du html dans un titre vient sans doute complexifier outre mesure le fonctionnement standard du CMS. Aussi, l’absence de cet attribut dans le titre ne sera pas considéré comme une non-conformité.

Critères 9.2 et 12.6 - structure de la page et zones de regroupement de contenus

Certaines technologies d’assistance se basent sur les attributs role des zones de regroupement de contenus pour simplifier la navigation. Il est essentiel de bien structurer la page et d’ajouter ces roles.

Il reste quelques ajustement à réaliser dans la page pour que ces deux critères soient conformes :

• discocier le header et la navigation principale pour avoir un élément <header role="banner"> et un élément <nav role="navigation" aria-label="navigation principale">
• ajouter le role="contentinfo à l’élément footer
• supprimer la balise <nav> autour du cartouche de recherche|contact|langue car il ne s’agit pas d’une navigation tel que décrit dans le glossaire du RGAA .

Ces non-conformités ont été relevées dans la page Éléments transverses.

Critère 10.1 - attributs interdits

La mise en page doit être contrôlée uniquement par des feuilles de styles. Cela permet aux utilisateurs d’adapter l’affichage en fonction de leurs préférences. Aussi, certains attributs html sont interdits d’utilisation pour que le code soit compatible avec l’accessibilité.
Les iframe des graphiques interactifs, ont des attributs width et height codés en dur. Utilisez un attribut style ou indiquez les tailles dans la css chargée.

Cette non-conformité a été relevée dans la page Comprendre le climat parisien avec Météo-France.

Critère 10.8 - contenus cachés

Le picto d’horloge précédent le temps de lecture apporte une information et n’a pas d’alternative textuelle. Supprimer l’attribut aria-hidden="true" et ajouter les attributs role="img" aria-label="temps de lecture" permettra aux utilisateurs de lecteur d’écran de comprendre qu’il s’agit d’un temps de lecture.

Critère 11.1 - étiquettes des champs de formulaire

Les labels des formulaires “Candidature spontanée” et “Autre demande” ne sont pas correctement reliés aux champs associés à cause d’une duplication des id des champs.

Cette non-conformité a été relevée dans la page Contact.