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.

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

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
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://accessibilite.numerique.gouv.fr/)

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

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

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")};
News

Articles par catégorie

Contactez-nous, tout simplement.

:)

Vous pouvez m'appeler
au 06 60 14 57 10,
ou encore me laisser un mail sur
contact [at] one-day.fr.

À la recherche d'un développeur Shopify ? vous êtes à la bonne adresse !

06 60 14 57 10
select linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram