Pencere: La Galería Lightbox Accesible que Necesitas
¿Qué es pencere y por qué la accesibilidad es crítica
Pencere es una galería lightbox TypeScript con cumplimiento WCAG 2.2 AA, morph visual vía View Transitions API y adaptadores para React, Vue, Svelte y Solid. Se publicó hace poco (abril 2026) y resuelve un problema real que arrastramos años: la mayoría de las galerías lightbox del mercado son inaccesibles para usuarios con discapacidades.
Cuando decimos WCAG 2.2 AA hablamos de navegación por teclado, lectura correcta en screen readers, target sizes mínimo de 44×44 píxeles, focus visible y manejo inteligente del contexto. Si nunca tuviste que navegar un sitio sin mouse o confías en un lector de pantalla para saber dónde estás, es fácil pasar por alto esto. Pero el estándar existe porque para mucha gente no es una “feature”, es la única forma de ver contenido visual.
Ojo: lightboxes como la que viene de fábrica en Webflow o muchos jQuery plugins viejos te dejan sin forma de cerrar la galería con teclado, o el tab focus desaparece dentro del modal, o el texto alternativo de la imagen nunca llega a los screen readers. Pencere nace justamente para que eso no pase más.
En 30 segundos
- Pencere es una galería lightbox moderna con certificación WCAG 2.2 AA que funciona en React, Vue, Svelte y Solid.
- Incluye 14 idiomas nativos, detección automática RTL para árabe/hebreo, soporte para imágenes, videos, iframes y contenido custom.
- Usa View Transitions API para el efecto morph (la miniatura se expande a pantalla completa de forma suave).
- Compatible con navegación por teclado completa, zoom con pinch, swipe-to-dismiss, drag-to-pan, y deep linking con URL hash.
- Cumple CSP estricto sin inline styles (adoptedStyleSheets) y deja bien visible el focus para navegación por teclado.
Características principales de pencere
La galería maneja cuatro tipos de contenido: imagen estándar, video embebido, iframe y componentes custom. En la práctica eso significa que no solo sacás una foto en grande. Podés armar una galería que mezcle screenshots, clips de YouTube o Vimeo, prototipos embebidos, y lo que se te ocurra.
El carrusel de miniaturas carga las imágenes en los tamaños justos — no descarga la versión full-res de 5MB para mostrar un thumbnail. La navegación responsiva ajusta los controles según ancho de pantalla, así en celular no ocupan la mitad de la galería.
Pinch zoom, swipe-to-dismiss, drag-to-pan: son gestos móviles que esperás en una galería moderna. Pencere los tiene todos. Swipe a la derecha cierra la galería, pinch zoom dentro funciona como esperaría cualquiera. Si estás en desktop, tus dedos no hacen nada (lógico) pero el teclado sigue siendo primera opción para navegar.
El deep linking con URL hash es la gloria. Compartís un link a tu portfolio con la tercera foto abierta? Cualquiera que copie ese link ve directamente esa foto. El botón “atrás” del navegador funciona como debería: un click cierra la galería. Nada de ese “click atrás 5 veces para volver a la página anterior” que pasa en muchas galerías custom.
RTL auto-detection: si el idioma está en árabe o hebreo, los controles se invierten automáticamente. El layout respeta la dirección de lectura del usuario sin que vos hagas nada. Ya lo cubrimos antes en pruebas automatizadas de accesibilidad.
Incluye 14 traducciones lisas para usar. Si necesitás agregar más idiomas, hay forma de hacerlo sin recompilación.
Cumplimiento WCAG 2.2 AA: qué significa realmente
WCAG 2.2 AA no es un badge bonito que pusieron para marketing. Implica cosas concretas:
- Focus visible: el borde de focus tiene que ser visible. Pencere usa un ring de 3px que contrasta con el fondo. Probá navegando solo con Tab y verás dónde estás en todo momento.
- Target size: cualquier botón o control que toques (con dedo o click) debe medir mínimo 44×44 píxeles. En muchas galerías, el X para cerrar mide 24×24 y estás condenado si tenés movilidad reducida o usás un stylus grueso.
- Keyboard complete: no hay feature que no puedas hacer con teclado. Navegar fotos, ir a anterior/siguiente, cerrar, acercarte: todo con Tab + Enter + flechas del teclado.
- Screen reader: cada imagen tiene un atributo alt que el lector de pantalla enuncia. Las transiciones y dinámicas no “sorprenden” al usuario porque el árbol de accesibilidad se mantiene coherente.
Contrasta con lo que ves en Webflow Lightbox (que está optimizado para design, no a/11y) o FSLightbox older versions donde el focus desaparece dentro del modal y no hay forma de saber dónde estás.
View Transitions API: el efecto morph de miniatura a pantalla completa
Mirá: cuando hacés click en una miniatura, pencere no “abre” la imagen. La miniatura se transforma de forma suave hasta convertirse en la versión full-screen. Es sutil pero transforma toda la experiencia. Viene de Chrome 126, Edge 126 y Safari 18.2 en adelante.
El efecto se llama “morph transition”. La librería marca el elemento como start, hace render de la nueva página o estado, marca ese elemento como end, y el navegador anima automáticamente el cambio de posición, tamaño, y contenido. No hay JavaScript haciendo tweens, no hay animaciones custom. El navegador maneja todo nativamente.
¿Qué pasa en navegadores viejos que no soportan View Transitions? Pencere no rompe. Simplemente abre la imagen sin la animación. El contenido sigue siendo completamente accesible.
El timing es rápido: 300ms por defecto, suficiente para sentir la transición sin hacerte esperar. El easing es cubic-bezier custom que imita el movimiento natural de los ojos.
Adaptadores framework: React, Vue, Svelte, Solid
Pencere viene en cuatro sabores según tu stack:
React: Componente que usa hooks. Pasás un array de items (imagen, video, etc) y pencere renderiza el thumbnail grid + lightbox. El estado lives en el componente padre, así integrás con el routing de tu app sin drama. Si usás Next.js, funciona sin cambios. Más contexto en automatizar validación de componentes.
Vue: Composable con opciones reactivas. Seteas las imágenes, pencere maneja el modal state. Compatible con Vue 3 + Vite. Si usás Nuxt, hay forma de hacer server-side compatible el thumbnail grid.
Svelte: Stores + slots. La API es declarativa, Svelte se encarga de los detalles de binding.
Solid: Primitivos reactivos nativos, sin proxy magic. Si necesitás renderizar 5000 fotos sin que se congestione, Solid + Pencere es solid (perdón).
En todos los casos la config es: objeto con items, callbacks opcionales para eventos (on:open, on:close), y overrides de estilo si necesitás customización.
Casos de uso reales: portafolio, e-commerce, blogs
Fotógrafo con sitio en Astro: cuatro galerías temáticas (boda, retrato, corporativo, paisaje). Cada galería es un array de rutas de imagen. Pencere renderiza en static build, cada foto es indexable por Google, deep linking funciona directo: compartís https://miportafolio.com/#portfolio-bodas&photo=7 y se abre foto 7 de bodas.
E-commerce con variantes: vidriera con 500 productos. Cada producto tiene 4-6 fotos. Sin Pencere renderizás 500 X 6 imágenes. Con Pencere, renderizás thumbnail + un lightbox compartido. La galería cambia contenido según producto seleccionado. Bundle size: menor, performance: mejor. Y si tenés mercado MENA (Medio Oriente, árabe), el RTL auto sale sin que digas nada.
Blog técnico con capturas: escribís un post sobre “cómo configurar Git”. Trescientas screenshots. En vez de mostrar cada screenshot inline y hacer el post kilométrico, las agrupás en una galería embebida. El lector hace click, abre lightbox, navega con flechas. Cierra. Vuelve al post.
El deep linking en blog es especialmente útil: alguien en un comentario o Twitter dice “mira la screenshot 3 donde se ve el error”, compartís el link directo. Ese usuario ve esa screenshot sin tener que navegar. Complementá con seguridad en componentes frontend.
Comparativa: pencere vs alternativas
| Característica | Pencere | lightGallery | PhotoSwipe | FSLightbox |
|---|---|---|---|---|
| WCAG 2.2 AA | Sí | No (a/11y básico) | Parcial (sin RTL auto) | No (focus issues) |
| View Transitions morph | Sí (nativo) | Animate.css | CSS custom | CSS custom |
| React/Vue/Svelte/Solid | Sí (adapters) | jQuery-first | Vanilla JS | Vanilla + wrappers |
| Idiomas nativos | 14 incluidos | ~20 con plugins | 4 built-in | 2 built-in |
| RTL auto-detect | Sí | Manual | No | No |
| Deep linking URL hash | Sí | No | Sí (con config) | Sí (básico) |
| CSP strict compatible | Sí (adoptedStyleSheets) | No (inline styles) | No | No |
| Documentación | Excelente | Buena | Excelente | Buena |
| Bundle size (gzip) | ~15KB | ~22KB | ~13KB | ~18KB |
| Community | Pequeño pero activo | Muy activo | Muy activo | Activo |
¿Cuándo elegir pencere? Si necesitás accesibilidad WCAG 2.2 AA como requisito real, si usás React/Vue/Svelte y necesitás adapters nativos, o si el efecto morph con View Transitions es parte de tu propuesta visual.
Si ya invertiste en lightGallery y funciona, no migres por migrar. Si estás empezando un proyecto nuevo donde la a/11y es requisito (cliente corporativo, sitio público de gobierno, app fintech), pencere es la opción sin discusión.
Errores comunes al implementar galerías lightbox
Ignorar el focus trap: abris el modal, haces Tab, y de repente el focus está en un link de footer que quedó atrás del modal semitransparente. El usuario piensa que está navegando la galería pero en realidad va por el sitio de atrás. Pencere mantiene el focus adentro automático.
Alt text genérico o vacío: si cada imagen tiene alt=”Foto”, un screen reader lee lo mismo para las 20 fotos. Pencere no soluciona eso (vos escribís el alt) pero al menos sí expone el atributo correctamente, así sabés que el trabajo es tuyo.
Perder el estado de scroll: abrís la galería en mitad de la página, cierras, y la página hizo scroll arriba. Es un detalle que molesta. Pencere captura el scroll position antes de abrir el modal, y lo restaura al cerrar.
Bundle size ignorado: algunos jQuery plugins de 2015 pesan 120KB gzippeados porque incluyen dependencias viejas. Pencere pesa 15KB gzippeado. La diferencia la notás en First Contentful Paint de un sitio móvil.
Performance en Many items: si renderizás 300 thumbnails todos a la vez, el navegador se congestiona. Pencere lazy-carga los thumbnails fuera del viewport. Si tenés 300 fotos, el DOM inicial tiene los thumbnails visibles + los de buffer cercano. El resto carga cuando scrolleás.
Preguntas Frecuentes
¿Qué es una galería lightbox accesible?
Una galería donde podés navegar usando solo teclado, donde los screen readers leen correctamente qué imagen estás viendo, donde los botones son lo suficientemente grandes para tocar, y donde el navegador sigue siendo quién controla el focus (no está perdido dentro de un modal). Pencere es eso. Cubrimos ese tema en detalle en validadores que corren localmente.
¿Cómo implementar pencere en React?
Instalás pencere del npm, importás el componente React, pasás un array de imágenes, y pencere renderiza todo. La config típica es: <Pencere items={fotos} onClose={handleClose} />. Documentación oficial de pencere tiene ejemplos full en GitHub.
¿Cuál es la mejor librería de lightbox con WCAG 2.2?
Pencere es de las pocas que hace WCAG 2.2 AA como objetivo principal, no como feature secundario. PhotoSwipe y lightGallery cumplen parcialmente. Si necesitás certificación estricta, pencere es tu opción más directa. Si necesitás features específicas (watermark, proteción de imagen, social sharing), quizás necesitás combinar pencere con plugins custom.
¿Qué es el efecto morph en galerías con View Transitions API?
Es cuando la miniatura que clickeaste se transforma suavemente en la imagen full-screen sin un fade o corte abrupto. El navegador anima automáticamente la posición y tamaño del elemento desde el estado inicial al final. Pencere usa eso para dar sensación de profundidad. En navegadores viejos, simplemente abre sin animación.
¿Cómo hacer una galería accesible para usuarios con discapacidades?
Tres pilares: navegación por teclado completa (Tab, Enter, flechas), alt text descriptivo en cada imagen, y focus visible en todo momento. Pencere maneja los dos primeros automático. El alt text lo escribís vos. Si todos los ítems de tu galería tienen alt descriptivo, Pencere + tu contenido = accesible WCAG 2.2 AA.
Conclusión
Pencere no es una revolución si ya usás lightGallery o PhotoSwipe. Es una alternativa moderna que pone la accesibilidad primero, que funciona nativamente en los frameworks que importan ahora (React, Vue, Svelte, Solid), y que trae features modernas como View Transitions API sin extra trabajo tuyo.
Si estás construyendo un sitio donde la a/11y es requisito real (sitio de gobierno, banco, empresa que cumple normativa), Pencere te ahorra debates después sobre por qué la galería no pasa auditoría de accesibilidad. Si estás armando un portfolio fotográfico y necesitás que se vea premium con transiciones fluidas, el morph effect es un detalle que sorprende (en buen sentido).
Para empresas latinoamericanas que publican contenido multiidioma, el soporte de 14 idiomas nativos + RTL auto-detect es un win real. No tenés que buscar plugins extra o escribir workarounds para sitios en árabe o hebreo.
El costo: pencere está en desarrollo activo pero es de las librerías más nuevas en el espacio. La comunidad es más pequeña que lightGallery. Si necesitás features muy específicas (proteción de imagen, generación de thumbnails automática), probablemente no las tiene built-in. Pero para galerías accesibles de uso general, es sólida.
Fuentes
- Pencere: Accessible Gallery Lightbox for the Web — DEV Community (publicado abril 2026)
- CSS Script — Pencere Gallery Lightbox (resumen de características y demo)
- lightGallery.js — documentación oficial (comparativa de frameworks)
- PhotoSwipe — documentación oficial (referencia de alternativa)
- MDN — View Transitions API (especificación del efecto morph)
