sonic-a11y

Mode accessibilité par supersoniks

Init

Ajouter le script d'initialisation depuis un cdn

``html

`

Implémenter le webcomponent

`html



`




Css conditionnels

Cacher un élément graphique perturbant

`html



`

Cacher un élément graphique perturbant

`html



`

Le composant ajoute l'attribut [data-sonic-a11y] à quand le mode accessible est actif

`css
[data-sonic-a11y] .my-selector {
font-weight:bold;
}
[data-sonic-a11y] .site-header {
background-image: none !important;
}

[data-sonic-a11y] .encadre {
--sonicA11y-bg : var(--sonicA11y-100);
}
`

Avec tailwind

`html



`

`html



`

Js

Evènement déclenché sur window

`javascript
window.addEventListener("sonicA11y", (e) => {
const isA11yActive = e.detail.a11y;
});
`

Test depuis le local storage

`javascript
if(localStorage.getItem("sonic-a11y") === "true"){
console.log("A11y mode is active")
}
``