Vous souhaitez rendre votre Joomla plus accessible? Et ainsi rendre vos contenus accessible aux personnes souffrants de handicap? Dans ce tutoriel vous trouverez des solutions pour vous aider.
Sommaire de l'article
L'accessibilité web est un service utilisable par : les personnes en situation de handicap que se soit temporaire ou permanent, les personnes âgées, et tous les internautes !
Testez l'accessibilité de votre Joomla
Commencez par tester l'accessibilité de votre site web en ligne, ou de votre Joomla en cours de création. Il existe pour réaliser ces tests d'accessibilité des outils en ligne.
Vous pouvez consulter notre article : Accessibilité de Joomla 4
Les outils en ligne
Wave
WAVE ® est une suite d'outils d'évaluation qui aide les auteurs à rendre leur contenu Web plus accessible aux personnes handicapées. WAVE peut identifier de nombreuses erreurs d'accessibilité et d'erreurs WCAG (Web Content Accessibility Guideline), mais facilite également l'évaluation humaine du contenu Web.
Source : wave.webaim.org
Achecker
https://achecker.achecks.ca/checker/index.php
Cet outil vérifie les pages Web et les fichiers HTML par rapport à plusieurs directives.
Lighthous
https://developers.google.com/web/tools/lighthous
Lighthouse est un outil open source et automatisé permettant d'améliorer la qualité des pages Web. Vous pouvez l'exécuter sur n'importe quelle page Web, publique ou nécessitant une authentification. Il a des audits pour les performances, l'accessibilité, les applications Web progressives, le référencement et plus encore.
Source : https://developers.google.com/web/tools/lighthous
Plug-ins Joomla
Quelques plugins sont à télécharger et à installer sur votre site Joomla pour améliorer son accessibilité :
- Simple Accesskeys - https://extensions.joomla.org/extension/style-a-design/accessibility/simple-accesskeys/
- D'autres plugins : https://extensions.joomla.org/category/style-a-design/accessibility/
Rendre votre Joomla accessible
La navigation générale
Rendre les intitulés des liens compréhensibles
Il est important de rendre les intitulés des liens et des boutons compréhensibles, éviter les "en savoir plus", "cliquer ici". L'intitulé d'un lien valide : "Commander votre panier" au lieu de : pour commander votre panier : "Cliquer ici" - S’il n’est pas possible de rendre un lien ou un bouton plus explicite par l'intitulé, faute de place, mais que l’intitulé actuel est suffisant dans son contexte, on doit utiliser un attribut title pour faire apparaître une info-bulle reprenant l'information et affiché au survol de la souris.
En exemple : <a href="/mapage.html" title="Valider le paiement" aria-label="Valider le paiement">valider</span></a>
Fournir des liens d'évitement
Les liens d'évitement sont des liens d'accés directes permettant d'accéder au contenu, à la navigation ou au pied de page. L'objectif étant de faciliter la navigation pour des utilisateurs naviguant au clavier, des utilisateurs malvoyants, des utilisateurs de loupe logicielle ou de téléphone mobile. Exemple de liens d'évitement : « Aller à la navigation », « Aller au contenu ».
Prévenir l'utilisateur de l'ouverture d'une nouvelle fenêtre
Prévenir l’utilisateur de l’ouverture de toute nouvelle fenêtre en l’indiquant dans l’intitulé du lien. Pour l'exemple renseigner la balise alt="consulter le liste de nos produits (nouvelle fenêtre)".
Fournir des accès multiples
Plusieurs accès doivent être proposé : menu principal, menu secondaire, fil d'ariane, outil de recherche, plan du site.
Les boutons
Les boutons doivent également être renseignés car un utilisateur qui ne peut pas le voir, doit savoir à quoi il sert. Le code :
<label for="recherche" class="sr-only">Recherche</label>
<input type="text" name="recherche" placeholder="Recherche" id="recherche"/>
Une étiquette a d'abord été ajoutée, puis elle est masquée visuellement car le contexte indique clairement de quoi il s'agit.
Liens
Lorsqu'un lien n'a pas de contenu textuel, la fonction du lien n'est pas présentée à l'utilisateur. Cela peut créer de la confusion. Un lien renseigné:
<a href="/page.html" class="link">
<img src="/img/icone.jpg" alt="Consulter la liste de controle"/>
</a>
Maintenant un lecteur d'écran lira "Consulter la liste de contrôle" lorsque le focus est défini sur le lien. Il est important de s'assurer également que les liens sont apparents visuellement.
Les titres et les sous titres
Chaque page a un titre unique
La sémantique doit être appropriée. Chaque page doit voir un titre précis, pertinent qui reflète le contenu et la fonction de la page. Puis utiliser les balises H1, H2 ... H6 pour créer des sous titres et structurer votre contenu.
<h1>Titre de la page</h1>
<h2>Sous titre 1</h2>
<h2>Sous titre 2</h2>
<h3>Sous sous titre</h3>
Utiliser la sémantique HTML
Pour les listes par exemple :
<ol>: les listes ordonnées,<ul>: les listes non ordonnées,<li>: les éléments de liste.<dl>,<dt>et<dd>: listes de définitions
Les boutons
<button>, ou<input type="button">)
Étiquette de formulaire
Les étiquettes de formulaire doivent également être renseignées, pour aider les utilisateurs utilisant une technologie d'assistance à remplir un formulaire. Le code
<label for="nom">Votre nom</label>
<input name="name" type="text" id="nom"/>
Une étiquette est associée à chaque entrée par un attribut for qui est identique à l'id.
Une étiquette décrit la fonction d'un contrôle de formulaire (c'est-à-dire une zone de texte, une case à cocher, un bouton radio, un menu, etc.) et apparaît généralement à côté de celui-ci. Les utilisateurs voyants établissent la connexion visuellement, mais les autres ne le peuvent pas. L'élément <label> associe une étiquette de texte à un contrôle de formulaire, créant une connexion dans le code qui ne repose pas sur la vision. Les libellés ARIA ( aria-labelledby et aria-label) peuvent être utilisés lorsqu'il n'est pas possible d'utiliser <label>. Cela amène un lecteur d'écran à annoncer l'étiquette de texte lorsque l'utilisateur accède au contrôle de formulaire.
Les images
Images fonctionnelles
Les images peuvent fournir des informations, des fonctions importantes, comme la navigation. L'absence d'une alternative texte à une image peut être très impactant pour les utilisateurs de lecteurs d'écran. Sans texte alternatif à une image, le lecteur d'écran ne peut restituer une description de l'image. Il n'existe pas de contenu qui puisse être lu par un lecteur d'écran à un utilisateur malvoyant. La solution est de renseigner la balise alt.
<img src="/images/ville-pau.jpg" alt="ville de Pau"/>
Outil de test
Wave : https://wave.webaim.org/
L'ajout d'un texte alternatif à l'image supprime l'erreur signalée. Une fois la balise alt renseignée, l'image est accessible à un utilisateur de lecteur d'écran.
Images décoratives
Une image dite décorative ne présente pas de contenu important, elle est utilisée pour la mise en page ou à des fins non informatives. Les images décoratives doivent avoir alt="".
Le contraste et les couleurs
Tout le monde ne voit pas les couleurs de la même manière. Il est important d'augmenter le contraste des couleurs et ne pas compter uniquement sur la couleur pour transmettre une information. Plus précisément, WCAG AA nécessite un rapport de contraste de 4,5: 1 pour un texte de taille normale.
Outils de test
Contrast finder : https://app.contrast-finder.org/?lang=fr
Contrast ratio : https://contrast-ratio.com/
Wave : https://wave.webaim.org/
Le contraste et l'utilisation des couleurs sont essentiels à l'accessibilité. Les utilisateurs, y compris les utilisateurs ayant une déficience visuelle, doivent être en mesure de percevoir le contenu de la page. Il y a beaucoup de petits caractères et de complexité dans les Directives pour l'accessibilité des contenus Web (WCAG) 2 qui peuvent facilement confondre les créateurs de contenu Web et les évaluateurs de l'accessibilité Web. Cet article rassemble les termes et principes nécessaires pour comprendre les exigences WCAG 2 en matière de contraste et de couleur.
Ressources mentionnées