Galería de proyectos accesible: teclado y lectores de pantalla

Crear un portfolio implica mostrar los proyectos con claridad, pero una galería que solo funciona con ratón no está terminada. En esta entrada explico cómo hice que la galería de proyectos de este sitio funcione para personas que usan solo el teclado y lectores de pantalla, y los errores que tuve que corregir por el camino.

Lo que necesitaba la galería

• Permitir llegar a cada tarjeta y filtro en un orden de tabulación lógico.
• Mostrar siempre un indicador de foco claro.
• Avisar a los usuarios de lectores de pantalla cuando un filtro cambia la lista.

Estilos de foco que funcionan en cualquier configuración

Mi primera versión usaba focus:outline-none con un anillo. Es una trampa: elimina el contorno del que depende el modo de colores forzados de Windows, así que el indicador de foco puede desaparecer por completo. Esto es lo que uso ahora:

<button
  class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-transparent
         focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2
         focus-visible:ring-offset-slate-950"
  aria-pressed="true">
  Todos los proyectos
</button>

El contorno transparente es invisible normalmente, pero se hace visible en el modo de colores forzados. También elegí los colores del anillo y del desplazamiento para mi fondo oscuro y los comprobé con el requisito de contraste de 3:1 de WCAG 2.2 para los indicadores de foco. [Añade el ratio de contraste que mediste.]

Botones de filtro y estado

Cada filtro es un botón de alternancia que usa aria-pressed. «Todos los proyectos» empieza en true, y mi script cambia los valores cuando eliges otra categoría. [Pega aquí tu función de alternancia.]

Las tarjetas ocultas deben salir del orden de tabulación

Cuando un filtro oculta una tarjeta, hay que quitarla de la navegación por teclado, no solo atenuarla. [Explica qué haces: hidden, display: none o inert.] Si no, quien usa el teclado tabula hacia tarjetas invisibles, uno de los fallos más comunes en las galerías con filtros.

Anunciar los cambios con una región en vivo

Quien ve la pantalla ve cómo la cuadrícula se actualiza al instante. Quien usa un lector de pantalla no oye nada si no se lo comunicas. Añadí una región de estado vacía:

<div id="gallery-status" class="sr-only" role="status" aria-live="polite"></div>

Empieza vacía a propósito, para que no se anuncie nada al cargar la página. Después la actualizo desde JavaScript:

function updateLiveRegion(count, category) {
  const el = document.getElementById('gallery-status');
  el.textContent = '';
  setTimeout(() => {
    el.textContent = `Mostrando ${count} ${count === 1 ? 'proyecto' : 'proyectos'} en ${category}.`;
  }, 100);
}

Dos detalles importan. Borrar el texto primero y escribirlo de nuevo tras un breve retraso hace que los lectores de pantalla lo anuncien otra vez, aunque el mensaje sea idéntico al anterior. Y polite deja que el lector termine lo que está diciendo en lugar de interrumpirse.

Conclusiones

Un foco visible, atributos de estado correctos y una región en vivo discreta requirieron muy poco código, pero cambiaron cómo funciona la galería para quienes no usan ratón. Si quieres una visión más amplia, lee por qué la accesibilidad web importa para todos.

¿Necesitas un sitio accesible? Empieza un proyecto.