RGAA dans WordPress avec Javascript

(Le but de l’article est d’intégrer des fonctions RGAA dans WordPress avec Javascript)
Pour pouvoir utiliser du Javascript dans WordPress, il faut tenir compte de plusieurs paramètres. Votre thème, ses contraintes, l’utilisation des outils de votre thème ou à défaut d’un plugin, pour pouvoir intégrer votre code Javascript, soit de manière globale, soit de manière ponctuelle.

Créer votre script dans votre éditeur habituel

Sublim Text, Visual Studio Code, ou tout éditeur de code qui vous convient, tant que vous en avez l’habitude, et que vous pouvez tester le bon fonctionnement du script dans un environnement simple et habituel.

Importer le script

Directement dans le builder, dans un fichier à la racine de wp-uploads, dans un éditeur de Snippets comme /WP Code voilà des exemples d’intégration de votre script.

Changer le texte ci-dessous en cliquant ici

Ici, un texte est censé changé avec du Javascript

Changer la couleur de fond en gris en cliquant ici Remettre la couleur de fond par défaut en cliquant ici

Quels sont les usages et utilisations ?

Tout est envisageable, en règle générale on va utiliser du Javascript pour intervenir sur le DOM (Document Object Model), sur de la présentation (CSS de certains éléments, cacher ou montrer des sections, présentation avancée si le CSS ne suffit pas), ajouter du contenu avec ou sans interaction avec le visiteur, faire appel à une API, ou encore coder des fonctionnalités spécifiques.

En cherchant dans les bibliothèques sur Github ou ailleurs, vous pouvez trouver des scripts pour de nombreuses fonctionnalités. Générateur de mot de passe, application météo, gestion du temps ou des couleurs, etc.

RGAA dans WordPress avec Javascript

Exemple (RGAA dans WordPress avec Javascript)

Vous pouvez également faire vos propres applications selon votre niveau, quelles soient simples ou avancées. Dans les usages avec WordPress, vous pouvez par exemple développer votre gestionnaire de feuille CSS pour mettre en place un bouton d’accessibilité et travaillant la taille des polices, leur forme, les contrastes pour répondre aux critères RGAA (https://acce ssibilite.numerique.gouv.fr/)

Glossaire https://accessibilite.numerique.gouv.fr/methode/glossaire/

Environnement de test https://accessibilite.numerique.gouv.fr/methode/environnement-de-test/

Vous trouverez une liste exhaustive ici : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/

Quand on voit la complexité de la norme RGAA, il peut alors être assez utile de travailler sur une version mêlant Javascript, CSS, réglages personnels proposés avec interaction (donc Javascript).

Démo d’accessibilité simple en cliquant ici Remettre la couleur de fond par défaut en cliquant ici

[wpcode id=“1131”]

Le code Javascript & HTML pour cette page :

Exemple de RGAA simplifié dans WordPress avec Javascript

LE HTML

Ici, un texte est censé changé avec du Javascript

LE JAVASCRIPT

const copyBtn = document.querySelector(“.copy-btn”); copyBtn.addEventListener(“click”, addTextToSpan); const test = document.querySelector(“.test”);

function addTextToSpan(){ test.textContent=` Ajouter du texte avec Javascript dans WordPress `; console.log(“ça marche”)};

const changeBackground = document.querySelector(“.change-bckgrd”); const sectionSix = document.querySelector(“#section-6-42”); changeBackground.addEventListener(“click”, changeBack);

function changeBack(){ sectionSix.style.backgroundColor = “Grey”; sectionSix.style.paddingBottom = “20px”; console.log(“ça marche 2”)};

const resetBackground = document.querySelector(“.reset-bckgrd”); resetBackground.addEventListener(“click”, resetBack);

function resetBack(){ sectionSix.style.backgroundColor = “Black”; sectionSix.style.paddingBottom = “20px”; console.log(“ça marche 3”)};

const rgaaButton = document.querySelector(“.becomaccessible”); const accessibleText = document.querySelector(“#text_block-7-42”); const titreDeux = document.querySelectorAll(“h2”); const liensA = document.querySelectorAll(“#text_block-7-42 a”); rgaaButton.addEventListener(“click”, becomeAccessible);

const resetBackground2 = document.querySelector(“.reset-bckgrd2”); resetBackground2.addEventListener(“click”, resetBack2);