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
Floating accessibility panel
A floating button opens text size, contrast, underline, spacing and reading guide settings that change the page instantly.
Settings
16px
1x
Code
<div class="uvq13-a11y"><article class="art"><p class="kk">Urban garden</p><h4>Tomatoes on a balcony</h4><p class="tx">A two-metre balcony is enough to grow tomatoes, basil and strawberries if it gets six hours of sun a day.</p><a href="#">Read the full guide</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="Accessibility options"><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">Accessibility</b><button type="button" class="x" aria-label="Close"><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>Text size</span><span class="stp"><button type="button" class="dn" aria-label="Decrease text">A−</button><output>100 %</output><button type="button" class="up" aria-label="Increase text">A+</button></span></div><button type="button" class="row sw" role="switch" aria-checked="false" data-k="hc"><span>High contrast</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="ul"><span>Underline links</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="sp"><span>Wider spacing</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="gd"><span>Reading guide</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="pa"><span>Pause animations</span><i></i></button><button type="button" class="rs">Reset</button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Some sites need reading aids on the page itself, and this widget keeps them one tap away. The round button opens a panel with a text size stepper and switches for high contrast, underlined links, wider spacing, a reading guide that follows the pointer and paused animations. Every change applies live to the article behind it. It fits public services, schools, news sites and long reads.
The main color is the button and the active switches, the second one the reading guide band. Each switch toggles a class on the root, so you can hook your own styles to it, and the reset button puts everything back.