Huerto urbano
Tomates en un balcón
Un balcón de dos metros basta para cultivar tomates, albahaca y fresas si recibe seis horas de sol al día.
Leer la guía completaTamaño del texto
HTML + CSSOverlays
Panneau flottant d'accessibilité
Un bouton flottant ouvre la taille du texte, le contraste, le soulignement, l'espacement et un guide de lecture qui modifient la page aussitôt.
Réglages
16px
1x
Code
<div class="uvq13-a11y"><article class="art"><p class="kk">Potager urbain</p><h4>Des tomates sur un balcon</h4><p class="tx">Un balcon de deux mètres suffit pour cultiver tomates, basilic et fraises s'il reçoit six heures de soleil par jour.</p><a href="#">Lire le guide complet</a><i class="im" aria-hidden="true"></i></article><i class="rg" aria-hidden="true"></i><button type="button" class="fire" aria-haspopup="dialog" aria-label="Options d'accessibilité"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="4.5" r="1.8"/><path d="M5 8.5l7 1.5 7-1.5M12 10v4.5M12 14.5l-3 6M12 14.5l3 6"/></svg></button><div class="pn" role="dialog" aria-modal="true" aria-labelledby="uvq13-a11y-t"><header><b id="uvq13-a11y-t">Accessibilité</b><button type="button" class="x" aria-label="Fermer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><div class="row"><span>Taille du texte</span><span class="stp"><button type="button" class="dn" aria-label="Réduire le texte">A−</button><output>100 %</output><button type="button" class="up" aria-label="Agrandir le texte">A+</button></span></div><button type="button" class="row sw" role="switch" aria-checked="false" data-k="hc"><span>Contraste élevé</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="ul"><span>Souligner les liens</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="sp"><span>Espacement large</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="gd"><span>Guide de lecture</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="pa"><span>Mettre les animations en pause</span><i></i></button><button type="button" class="rs">Réinitialiser</button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Certains sites ont besoin d'aides à la lecture sur la page même, et ce widget les garde à portée de doigt. Le bouton rond ouvre un panneau avec la taille du texte et des interrupteurs pour le contraste élevé, les liens soulignés, un espacement plus large, un guide de lecture qui suit le pointeur et la pause des animations. Pour un service public, une école ou un média.
La couleur principale est le bouton et les interrupteurs actifs, la seconde la bande du guide de lecture. Chaque interrupteur pose une classe sur la racine pour y accrocher tes styles, et le bouton de réinitialisation remet tout en place.