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
Panel flotante de accesibilidad
Un botón flotante abre ajustes de tamaño de letra, contraste, subrayado, espaciado y guía de lectura que cambian la página al instante.
Ajustes
16px
1x
Código
<div class="uvq13-a11y"><article class="art"><p class="kk">Huerto urbano</p><h4>Tomates en un balcón</h4><p class="tx">Un balcón de dos metros basta para cultivar tomates, albahaca y fresas si recibe seis horas de sol al día.</p><a href="#">Leer la guía completa</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="Opciones de accesibilidad"><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">Accesibilidad</b><button type="button" class="x" aria-label="Cerrar"><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>Tamaño del texto</span><span class="stp"><button type="button" class="dn" aria-label="Reducir texto">A−</button><output>100 %</output><button type="button" class="up" aria-label="Aumentar texto">A+</button></span></div><button type="button" class="row sw" role="switch" aria-checked="false" data-k="hc"><span>Alto contraste</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="ul"><span>Subrayar enlaces</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="sp"><span>Espaciado amplio</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="gd"><span>Guía de lectura</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="pa"><span>Pausar animaciones</span><i></i></button><button type="button" class="rs">Restablecer</button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Overlays
Ver todos: OverlaysDónde usarlo
Algunas webs necesitan ayudas de lectura en la propia página, y este widget las deja a un toque. El botón redondo abre un panel con el tamaño del texto y interruptores para alto contraste, enlaces subrayados, más espaciado, una guía de lectura que sigue al cursor y animaciones en pausa. Cada cambio se aplica en directo al artículo de detrás. Encaja en servicios públicos, colegios, medios y lecturas largas.
El color principal es el del botón y los interruptores activos, el secundario la franja de la guía de lectura. Cada interruptor pone una clase en la raíz, así que puedes colgar de ella tus propios estilos, y el botón de restablecer lo devuelve todo a su sitio.