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.

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.

Exemple (RGAA dans WordPress avec Javascript)

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).

Le code Javascript & HTML pour cette page :

Exemple de RGAA simplifié dans WordPress avec Javascript

LE HTML

<div class="buttons-container">
            <button class="copy-btn" type="button">
                <span>Changer le texte ci-dessous en cliquant ici</span>
            </button>
<p class="test">Ici, un texte est censé changé avec du Javascript</p>
<button class="change-bckgrd" type="button">
<span>Changer la couleur de fond en gris en cliquant ici</span>
</button>
<button class="reset-bckgrd" type="button">
<span>Remettre la couleur de fond par défaut en cliquant ici</span>
</button>
</div>

<div class="buttons-container">

<button class="becomaccessible" type="button">
<span>Démo d'accessibilité simple en cliquant ici</span>
</button>

<button class="reset-bckgrd2" type="button">
<span>Remettre la couleur de fond par défaut en cliquant ici</span>
</button>
</div>

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);

function becomeAccessible(){
	sectionSix.style.backgroundColor = "White";
	sectionSix.style.paddingBottom = "20px";
	accessibleText.style.fontSize = "22px";
	accessibleText.style.color = "Black";
	for (let i = 0; i < titreDeux.length; i++) {
  	titreDeux[i].style.color = "Black";
	titreDeux[i].style.fontSize = "32px";
	}
	for (let i = 0; i < liensA.length; i++) {
  	liensA[i].style.color = "Black";
	liensA[i].style.fontSize = "22px";
	}
	console.log("ça marche 4")};

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

function resetBack2(){
	sectionSix.style.backgroundColor = "Black";
	sectionSix.style.paddingBottom = "20px";
	accessibleText.style.fontSize = "16px";
	accessibleText.style.color = "#5B5B66";
	for (let i = 0; i < titreDeux.length; i++) {
  	titreDeux[i].style.color = "#d2cb95";
	titreDeux[i].style.fontSize = "24px";
	}
	for (let i = 0; i < liensA.length; i++) {
  	liensA[i].style.color = "#d2cb95";
	liensA[i].style.fontSize = "16px";
	}
	console.log("ça marche 5")};