Comment améliorer l’accessibilité de son site WordPress

Rendre son site accessible au plus grand nombre est un moyen d’en accroître son trafic. C’est également obligatoire pour les sites institutionnels en France dans certains pays d’Europe, aux États-Unis et au Canada.

Une des premières choses qui peut être rapidement faite est de faciliter la consultation du texte aux personnes qui ont des difficultés de lecture.

Bien sûr ils peuvent utiliser la fonction zoom de leur navigateur avec notamment les touches CTRL et +, mais cela a pour effet d’agrandir tous les éléments de la page.

Alors que des boutons de redimensionnement fournissent  un moyen plus confortable d’ajuster la taille de police sans casser la mise en page d’un site Web.

Afin d’ajouter une telle barre de boutons installez et activez le plugin WordPress Accessibility Widget sur votre site.
Dans la barre latérale déroulez le menu Apparence et cliquez sur Widget. Faites  glisser Accessibility Widget dans une des zones latérales.

Installer le plugin WordPress Accessibility Widget par glissé déplacé dans une barre latérale.

Vous pouvez entrer un titre pour le widget. Ensuite, vous devez sélectionner les éléments HTML ou classes CSS sera affecté par le widget en les séparant par une virgule. Les options par défaut sont Body, paragraphe, les éléments de liste et les cellules de tableaux.
Ces options devraient fonctionner  avec la plupart des thèmes.

Paramétrage du plugin WordPress Accessibility WidgetLe widget permet jusqu’à quatre options de redimensionnement. Les options par défaut sont de 90%, 100%, 110% et 120%. Vous pouvez augmenter ou diminuer la taille de police.

Le dernier réglage widget est le texte du bouton. Généralement on utilise la lettre A pour symboliser l’option d’affichage.

Une fois que vous avez terminé, cliquez sur le bouton Enregistrer pour sauvegarder les paramètres du widget.

Vous pouvez maintenant visiter votre site pour voir le widget en action. Voilà comment il devrait apparaître sur votre site maintenant:

bouton de redimensionnement du texteSi vous pensez que les boutons ne se  remarquent pas suffisamment, vous pouvez changer cela en utilisant les styles CSS . Ajoutez par exemple ce code dans la feuille de style de votre thème, ou de votre thème enfant :

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;}

Ce style va ajouter une bordure autour du texte du bouton, mettre en gras, et augmenter un peu les espaces.

Vous pouvez consulter la vidéo en anglais sur cette page, dont cet article est une traduction libre.

Share Button

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *