El Desafío
Construir una interfaz donde la accesibilidad no sea una capa extra sino la propia arquitectura: teclado, lector de pantalla, contraste y movimiento reducido.
Stack Tecnológico
React01
Tailwind02
A11y03
Semantic HTML04
Focus Architecture & ARIA
Gestión rigurosa del DOM para crear una navegación predecible, silenciosa y completamente controlable por teclado.
Diseño Inclusivo
Contrastes auditados, estados visibles y respeto total por prefers-reduced-motion para una experiencia que no excluye a nadie.
useFocusTrap.ts — Accessibility Core
// useFocusTrap.ts — Accessibility/A11y Focus Hook
export const useFocusTrap = (ref: RefObject<HTMLElement>, isActive: boolean) => {
useEffect(() => {
if (!isActive || !ref.current) return;
const focusable = ref.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const first = focusable[0] as HTMLElement;
const last = focusable[focusable.length - 1] as HTMLElement;
const handleTab = (e: KeyboardEvent) => {
if (e.key !== 'Tab') return;
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
};
document.addEventListener('keydown', handleTab);
return () => document.removeEventListener('keydown', handleTab);
}, [isActive, ref]);
};Conclusión del Proyecto
A11Y sin Compromisos
Una base semántica preparada para crecer con componentes accesibles y una puntuación Lighthouse consistente.