Mode accessibilité par supersoniks
npm install sonica11yMode accessibilité par supersoniks
``html`
`html`
Cacher un élément graphique perturbant
`html`
Cacher un élément graphique perturbant
`html`
Un bloc avec un gris léger
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`
Mon texte sera grand, en desktop, quand le mode accessible est activé
`html`
Inline block quand le mode accessible est activé
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")
}