Joomla4 : site internet accessible aux déficients visuels

En un mot, l'accessibilité signifie rendre le site utilisable par tous les utilisateurs, indépendamment de leurs capacités ou handicap.

Rendre le site accessible est :

• un devoir moral (démontrer l'inclusion au centre de vos préoccupations),
• une chance de gains en trafic et conversion,
• une meilleure appréciation du site par Google (en tant que site accessible),
• un gage de qualité pour Google (car le vérificateur d'accessibilité de Joomla est un vrai outil SEO),
• une obligation pour tous les sites d'organismes publics.

Voici les nouveautés apportées par Joomla4 en termes d'accessibilité. A noter que les fonctionnalités d'accessibilité ne résolvent pas toutes les difficultés visuelles et que la condition de base de "conception propre" du site en termes de HTML et de css doit être remplie.

Affichage des icones d'accessibilité

Les icônes d'accessibilité s'activent via le plugin "Système - Fonctionnalités d'Accessibilité supplémentaires", qui présente 2 paramètres.

1- On peut activer la barre d'accessibilité dans l'administration, sur le site ou les deux
2- On peut choisir le design des icônes soit en Emojis, soit en Google Material Font.

Lorsque le plugin est activé, l'icône apparaît en bas à gauche de l'écran en fixe (position modifiable en css). Pour faire apparaître le menu des icônes d'accessibilité on peut :
<> cliquer sur cette icône avec la souris
<> utiliser le raccourci CTRL + ALT + A sur PC, ou CTRL + OPTION + A sur Mac.

Je vous invite à expérimenter sur ce site les effets visuels de chacune de ces icônes.

Certains effets visuels sont accessibles par des raccourcis clavier visibles dans des infos-bulles, comme celui-ci:

Activation de certains paramètres d'accessibilité par défaut par utilisateur

Une autre nouveauté de Joomla4 offre la possibilité de paramétrer par défaut, donc une fois pour toutes, des effets visuels par utilisateur.

Il suffit d'aller en Utilisateurs/Gestion, de sélectionner l'utilisateur, puis d'aller dans l'onglet "Paramètres d'accessibilité".

Ces paramètres sont aussi accessibles directement via le "Menu Utilisateur" en haut à droite de l'administration.

Vérifier l'accessibilité des contenus

Comment savoir si les contenus sont bien présentés dans une optique d'accessibilité et comment les améliorer ?
Joomla dispose d'un plugin, le Joomla Accessibility Checker. Ce vérificateur met visuellement en évidence les problèmes généraux d'accessibilité et de convivialité. Le plugin vérifie la présence d'erreurs ou d'avertissements en une cinquantaine de points et guide l'administrateur du site Web pour les corriger.
Ce système automatique présente des pistes d'amélioration obligatoires (en rouge) et non obligatoires en jaune (parfois très pointues). Il faut garder à l'esprit que le bon sens doit toujours prévaloir et le fait de ne pas appliquer certaines améliorations proposées (complexité, manque de temps), ne va pas mettre en danger le site.

Attention : Cette vérification est à réaliser lors de la mise en place du site pour valider la structure des contenus, elle doit être désactivée en production car elle dégrade les performances de rapidité d'affichage des pages.

Il faut activer le plugin "Système - Vérificateur d'accessibilité de Joomla", et appliquer les paramètres ci-dessous), l'affichage de l'aide en ligne permettra de mieux comprendre comment alimenter les champs):

• activer "Toujours afficher"
• champs "Accessibilité du contenu" et "Lisibilité du contenu" : la différence entre ces 2 champs n'est pas très claire, mais il est fondamental de définir ici l'identifiant du conteneur sur lequel on souhaite effectuer la vérification, le plus simple est de remplacer "main" par "body" (cela peut être "g-main-container" sur un template Gantry, si on souhaite circonscrire l'analyse au corps du site, hors entête et pied de page).

A la suite de cette activation, le bouton "Vérification d'accessibilité" apparaît en haut de la page de l'article. On peut vérifier l'affichage de l'accessibilité via ce bouton, ou en se connectant en front-end sur le site en tant qu'administrateur.

En cliquant sur l'icône  en bas à droite de l'écran, on accède à l'analyse de l'affichage d'un article. Les erreurs/avertissements interprétées par le vérificateur (au nombre de 37 dans l'exemple), sont affichées au survol des erreurs (rouges) ou avertissements (? en jaune), dans des info-bulles (entourées en vert par nos soins).

Les erreurs/avertissements dans l'exemple ci-dessous sont de plusieurs types :

Erreur : le premier titre sur la page doit être de type 1 (ou 2), l'utilisateur doit pouvoir identifier facilement une hiérarchie entre les titres. Indirectement, on bénéficie ici d'une analyse SEO très précieuse.
Erreur : l'image du lien est décorative, il n'y a pas de balise Alt, l'utilisateur doit pouvoir bénéficier d'une description de l'image, c'est un marqueur très ancien d'accessibilité. C'est là aussi, indirectement, une information très utile pour améliorer la qualité su site et son SEO.
Erreur : contraste insuffisant sur plusieurs éléments textuels
Avertissement : le contenu de la balise Alt étant "Joomla4 images lazyload", il est indiqué que le mot "images" est inutile puisque l'utilisateur (et le code HTML) savent déjà qu'il s'agit d'un sujet relatif aux images.

Les points de contrôle du plugin de vérification, se déclinent en plusieurs thématiques décrites ci-après:

1. lisibilité du texte
2. titres et rubriques
3. textes
4. contrastes
5. images
6. liens
7. contenus intégrés
8. formulaires
9. tableaux

1- Lisibilité du texte

Le score de lisibilité est basé sur le nombre total de mots dans le texte, le nombre moyen de mots par phrase. Et le pourcentage avec des mots complexes. Un bon score de lisibilité indique que votre texte est compréhensible et facile à traiter.

Le score de lisibilité est exprimé en bon, assez difficile, difficile, très difficile. Ce score est basé sur un calcul reconnu et scientifique.

Il faut cliquer sur le bouton "Afficher/Cacher le plan" pour faire apparaître le panneau ci-dessous.

Conseils pour améliorer la lisibilité du texte :

• Rédiger les phrases autour de 15 mots en moyenne,
• Éviter les phrases de plus de 25 mots,
• Ne pas hésiter à utiliser des listes,
• Éviter les mots complexes ou les mots comportant de nombreuses syllabes.

2- Titres et rubriques

Pour que la page soit compréhensible humainement, il est important de bien structurer les titres et leur placement sur vos pages. Par ailleurs, les robots des navigateurs Web  peuvent les utiliser pour fournir une navigation dans la page.

Balise Titre vide

Il peut arriver d'insérer accidentellement une balise titre vide dans un article, par exemple <h2></h2>. Il faut simplement transformer en Paragraphe pour résoudre cette anomalie.

Intitulé manquant 1

Les normes de Google, mais aussi la logique d'un article quel que soit son support, impliquent que chaque page commence par un titre h1. Le h1 doit être le début du corps principal du contenu et décrire l'objectif général de la page.

Utilisation de balise titre non séquentielles

Les titres doivent respecter une hiérarchie rigoureuse et ne jamais passer un niveau.
Hiérarchie OK : h1, h2, h3, h3, h2
Hiérarchie pas OK : h1, h3, h2
Le plugin affiche leur niveau pour tous les titres trouvés  , c'est très pratique.
L'info-bulle d'alerte mentionne même un lien vers le site externe officiel W3C relatif à cette norme.

Le titre est trop long

Les titres doivent être utilisés pour organiser le contenu et transmettre la structure. Ils doivent être courts (moins de 160 caractères) et informatifs.

3- Textes

Paragraphe complet en texte gras et italique
Les balises en gras et en italique ont une signification sémantique et ne doivent pas être utilisées pour marquer des paragraphes entiers. Les caractères gras doivent être utilisés pour mettre en évidence les mots et les phrases.
L'italique doit être utilisé pour mettre en évidence les noms propres (c'est-à-dire les titres de livres et d'articles), les mots étrangers et les citations.
Les citations longues doivent être formatées en guillemets.

Une ligne de texte en gras est utilisée comme titre
Une ligne de texte en gras peut ressembler à un titre, mais une personne utilisant un lecteur d'écran ne peut pas déterminer si ce texte est important ou s'il s'agit d'un titre un peu long. Un paragraphe entier en gras est donc à éviter..

Veillez à utiliser des listes sémantiques avec des puces ou des chiffres
Lorsqu'elles utilisent une liste sémantique, les technologies d'assistance peuvent transmettre des informations telles que le nombre total d'éléments et la position relative de chaque élément dans la liste

4- Contrastes

Ce plugin analyse les problèmes de contraste des couleurs d'une page selon les directives WCAG 2.1. Le contraste des couleurs fait référence à la façon dont les couleurs claires ou foncées contrastent entre elles sur les écrans, plus particulièrement en ce qui concerne la luminosité relative, en échelle de gris, telle que perçue par l'œil humain.
Le contraste entre le texte et son arrière-plan est une préoccupation pour les daltoniens et autres malvoyants.

Pour afficher les anomalies de contraste, il faut cliquer sur le bouton "Afficher/masquer les paramètres" pour afficher le panneau ci-dessous:

Ce texte ne présente pas un contraste suffisant avec l'arrière-plan

Le rapport de contraste doit être d'au moins 4,5:1 pour un texte normal et 3:1 pour un texte de grande taille.

Egalement, le plugin vérifie le contraste des overlays (background d'un texte), pour signaler en avertissement : "Le contraste de ce texte est inconnu et doit être revu manuellement. Assurez-vous que le texte et l'arrière-plan ont des couleurs fortement contrastées."

5- Images

Les images doivent avoir des textes Alt qui décrivent l'information ou la fonction que l'image représente. Cela garantit que les images peuvent être utilisées par des personnes souffrant de différents handicaps. C'est un critère de qualité d'un site pour Google.

Texte Alternatif manquant

Si l'image transmet une histoire, une ambiance ou une information importante, veillez à la décrire.

L'image est utilisée comme lien mais il manque le texte Alt

Assurez-vous que le texte Alt décrit l'endroit où le lien vous mènera.
Si vous ne souhaitez pas fournir de texte alt, vous pouvez également marquer l'image comme une image décorative. L'image sera ignorée par les technologies d'assistance.

La description du texte Alt d'une image liée est trop longue

Comme pour les titres h1, h2 h3..., il n'est pas judicieux d'utiliser des textes trop longs. Pensez à utiliser le titre de la page vers laquelle le lien renvoie comme texte alternatif.

6- Liens

Le texte du lien n'est pas assez descriptif

Le texte du lien doit toujours être clair, unique et significatif. Évitez les mots courants comme "cliquez ici" ou "plus d'informations". C'est également une recommandation très classique de Google.

Liens vides (absence de lien url)

Si vous avez (par erreur) placé un lien sans texte, cela sera également remarqué.

Liens vers les fichiers PDF

Les PDF sont considérés comme du contenu web et doivent également être rendus accessibles. Les PDF présentent souvent des problèmes pour les personnes utilisant des lecteurs d'écran (balises structurelles ou étiquettes de champ manquantes) et pour les personnes souffrant de déficience visuelle (le texte ne rétrécit pas lorsqu'il est agrandi). 
Dans la mesure du possible, il serait très utile de transformer le PDF en en page web.

Lien vers un fichier sans avertissement

Liens vers un fichier PDF ou un fichier téléchargeable (par exemple, MP3, Zip, Word Doc) sans avertissement. Indiquez le type de fichier dans le texte du lien. Si le fichier est volumineux, pensez à inclure la taille du fichier.

Le lien s'ouvre dans une nouvelle fenêtre/un nouvel onglet sans avertissement

Cela peut être déstabilisant, en particulier pour les personnes qui ont des difficultés à percevoir le contenu visuel. En outre, il n'est pas toujours bon de contrôler l'expérience d'une personne ou de prendre des décisions à sa place. Autant que possible, indiquer que le lien s'ouvre dans une nouvelle fenêtre dans le texte du lien (cf site externe officiel W3C).

Le lien a un texte identique à celui d'un autre lien, mais il pointe vers une page différente

Des liens multiples avec le même texte peuvent être source de confusion pour les personnes utilisant des lecteurs d'écran. Il faut rendre chaque texte d'ancre distinctif du texte des autres liens.

Avertissement courant : L'utilisation du souligné peut créer une confusion avec les liens, eux-mêmes soulignés.

7- Contenus intégrés

Le contenu incorporé nécessite un nom accessible qui décrit le contenu

Comme pour les images et les liens, fournissez un titre unique ou un attribut aria-label à l'élément iframe qui décrit l'objet.

Veillez à ce que toutes les vidéos soient sous-titrées et fournissez une transcription pour les podcasts

Sujet complexe, il faudrait idéalement des sous-titres pour tous les contenus audio et vidéo. Les sous-titres aident les personnes sourdes ou malentendantes.

8- Formulaires

Aucun label n'est associée à cette entrée

Ajouter un id à cette entrée, et ajouter un attribut "for" correspondant au label.

Ne jamais utiliser un bouton de réinitialisation

Le plus gros problème avec un bouton de réinitialisation dans un formulaire est qu'il est cliqué accidentellement et que le visiteur perd alors toutes les informations qu'il a saisies et doit tout recommencer.
La présence de deux boutons au bas d'un formulaire encombre l'interface et empêche les utilisateurs de voir clairement leur prochaine étape. On perd un peu de temps à chercher le bouton inutile et à décider lequel des deux boutons est le bon.

9- Tableaux

L'utilisation de tableaux est déconseillée car peu adaptée aux mobiles, mais parfois on ne peut pas pas éviter de les utiliser. Veillez à utiliser correctement les éléments <th>, afin de faire apparaître clairement les informations contenues dans le tableau.

En-tête de tableau vide trouvé

Les en-têtes de tableau ne doivent jamais être vides. Il est important d'indiquer les titres des lignes et/ou des colonnes afin de faire ressortir leur relation. Ces informations fournissent un contexte pour les personnes utilisant des technologies d'assistance.

Les titres tels que h2 ou h3 ne peuvent pas être utilisés dans les tableaux HTML

Indiquez plutôt les titres des tableaux en utilisant l'élément th.

Conclusion

Finalement on peut appréhender les outils d'accessibilité de Joomla comme des moyens de contrôle d'un site bien conçu, non seulement pour des personnes souffrant d'un handicap, mais aussi aux yeux des moteurs de recherche.

Ressources

Les paragraphes très détaillés, sur les thématiques du vérificateur, sont inspirés de :

• l'article "Vérifier l'accessibilité avec le plugin Jooa11y" de Yann Gomiero,
• cet article lui-même traduit de l'article "jooa11y - De Joomla Toegankelijkheidscontroleur plugin" de Jeroen Moolenschot,
  MERCI A EUX !

Ressource complémentaire : naviguer vers l'accessibilité décrite en anglais au sein du projet Joomla