0.0.15 • Published 9 months ago
sonica11y v0.0.15
sonic-a11y
Mode accessibilité par supersoniks
Init
Ajouter le script d'initialisation depuis un cdn
<script src="https://unpkg.com/sonica11y/dist/sonica11y.js"></script>Implémenter le webcomponent
<sonic-a11y aria-label="Toggle accessibility mode" title="Toggle accessibility mode" >
<sonic-a11y-icon></sonic-a11y-icon>
</sonic-a11y>Css conditionnels
Cacher un élément graphique perturbant
<div data-sonic-a11y-hidden aria-hidden="true">
Mon élément est caché en mode accessible
</div>Cacher un élément graphique perturbant
<div data-sonic-a11y-bg-100 >
Un bloc avec un gris léger
</div>Le composant ajoute l'attribut data-sonic-a11y à <html> quand le mode accessible est actif
[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
<div class="[[data-sonic-a11y]_&]:lg:text-5xl">
Mon texte sera grand, en desktop, quand le mode accessible est activé
</div><div class="[[data-sonic-a11y]_&]:inline-block">
Inline block quand le mode accessible est activé
</div>Js
Evènement déclenché sur window
window.addEventListener("sonicA11y", (e) => {
const isA11yActive = e.detail.a11y;
});Test depuis le local storage
if(localStorage.getItem("sonic-a11y") === "true"){
console.log("A11y mode is active")
}