Crear un “light-gallery” que se expande sobre un grid puede ser vistoso; pero si descuidamos la accesibilidad, gran parte de la audiencia quedará fuera. A partir del experimento de Silvestar Bistrović en Smashing Magazine, se abrirá en una nueva pestaña veremos cómo montar la galería y, al mismo tiempo, satisfacemos los criterios WCAG más importantes.
Estructura HTML semántica
<ul>
<li>
<button aria-expanded="false">
<img src="..." alt="..." />
</button>
</li>
...
</ul>- Utilizamos un
<ul>para agrupar las imágenes en un orden lógico. - Utilizamos un
<button>para convertir cada imagen en control;aria-expandedinforma del estado a la tecnología asistiva. - Añadimos funcionalidad para minimizar la imagen con la tecla ESC.
CSS Grid responsive y la preferencia reduce-motion
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));hace que las miniaturas se re-acomoden sin necesidad de media queries extras.- Para ampliar la imagen usamos
transform: scale(), pero envolvemos la transición en@media (prefers-reduced-motion: no-preference);en caso la persona prefiera menor movimiento.
Esta técnica cumple con el SC 2.3.3 Animation from Interactions, se abrirá en una nueva pestaña: el efecto puede desactivarse y no provoca mareo ni distracción.
Al integrar semántica HTML, controles ARIA y respeto de las preferencias del usuario, no solo logramos que la galería luzca bien, sino que también la hacemos accesible.
Resumen de criterios WCAG aplicables
| SC | Nombre | Cómo afecta a alertdialog | Nivel |
|---|---|---|---|
| 1.1.1, se abrirá en una nueva pestaña | Non-text Content | Alt descriptivo en cada imagen | A |
| 1.3.1, se abrirá en una nueva pestaña | Info & Relationships | Lista semántica y orden lógico del DOM | A |
| 2.1.1, se abrirá en una nueva pestaña | Keyboard | Click, ESC y flechas funcionan con teclado | A |
| 2.1.2, se abrirá en una nueva pestaña | No Keyboard Trap | ESC libera el foco del elemento expandido | A |
| 2.3.3, se abrirá en una nueva pestaña | Animation from Interactions | Respeto de prefers-reduced-motion | AAA |
| 2.4.3, se abrirá en una nueva pestaña | Focus Order | El foco viaja en el mismo orden visual | A |
| 2.4.7, se abrirá en una nueva pestaña | Focus Visible | Indicador de foco claro en miniaturas | AA |
| 4.1.2, se abrirá en una nueva pestaña | Name, Role, Value | aria-expanded refleja el estado en tiempo real | A |