Implementa componentes interactivos que funcionen con teclado, lector de pantalla y gestión correcta del foco.
Interactividad sin accesibilidad es deuda técnica y deuda de producto.
JavaScript debe respetar orden de foco, feedback semántico y control por teclado.
Si cambias estado visual, también debes actualizar estado accesible.
Los patrones correctos evitan frustración y mejoran calidad global de la UI.
Todo componente interactivo debe poder usarse sin ratón.
Si un botón abre un panel, el foco debe moverse a un lugar útil. Si el panel se cierra, el foco debe volver al trigger.
Evita `div` clicables para acciones principales; usa elementos nativos (`button`, `a`) siempre que puedas.
Si cambia la UI, cambia también lo que 'lee' tecnología asistiva.
Son comunes y evitables con una checklist corta.
Implementa componentes interactivos que funcionen con teclado, lector de pantalla y gestión correcta del foco.
Código del tema: focus management | aria-* | keyboard events
Todo componente interactivo debe poder usarse sin ratón.
Si un botón abre un panel, el foco debe moverse a un lugar útil. Si el panel se cierra, el foco debe volver al trigger.
Evita `div` clicables para acciones principales; usa elementos nativos (`button`, `a`) siempre que puedas.
Si cambia la UI, cambia también lo que 'lee' tecnología asistiva.
const btn = document.querySelector('#toggle-menu');
const panel = document.querySelector('#menu');
btn.addEventListener('click', () => {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!expanded));
panel.hidden = expanded;
});Son comunes y evitables con una checklist corta.
const abrir = document.querySelector('#abrir');
const cerrar = document.querySelector('#cerrar');
const modal = document.querySelector('#modal');
abrir.addEventListener('click', () => {
modal.hidden = false;
cerrar.focus();
});
cerrar.addEventListener('click', () => {
modal.hidden = true;
abrir.focus();
});