TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Todo portal debe contar con un enlace oculto de "Saltar al contenido" como su primer elemento enfocable. Sin embargo, si el atributo href="#main-content" apunta a un elemento que no existe o que no puede recibir el foco programático mediante tabindex="-1", el salto fracasará.
La promesa incumplida del bypass
El Criterio WCAG 2.4.1 (Evitar Bloques) existe para evitar que las personas usuarias con movilidad reducida (quienes navegan presionando la tecla Tab) tengan que recorrer 40 enlaces del menú superior en cada página que visitan. Implementar el botón de salto y no probar si redirige correctamente el foco del sistema operativo es un descuido arquitectónico mayor.
El patrón erróneo: Código Accesible Deficiente
El enlace existe, pero su destino (el ancla) ha desaparecido debido a refactorizaciones, o el destino no acepta foco algorítmico.
<!-- MAL: Destino inexistente en el DOM -->
<a href="#main" class="skip-link">Saltar al contenido</a>
<!-- (Falta definir el id="main" en la etiqueta <main>) -->La Solución Accesible: Código Recomendado
Verificar meticulosamente que el ID de destino exista y aplicar tabindex="-1" para forzar al motor del navegador a depositar el cursor físico exactamente en ese contenedor.
<!-- BIEN: Salto de bloque conectado y enfocado correctamente -->
<a href="#contenido-principal" class="skip-link">Saltar al contenido</a>
<header>... (Muchos enlaces) ...</header>
<!-- Destino focalizable garantizado -->
<main id="contenido-principal" tabindex="-1">
<h1>Bienvenido</h1>
</main>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Desactivar el ratón y navegar la página exclusivamente con Tab, Shift+Tab, Enter y las teclas de flecha. Verificar que todos los elementos interactivos sean alcanzables, que el indicador de foco sea visible, y que no existan trampas de foco donde el cursor quede atrapado.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.4.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: la regla bypass verifica la existencia de un mecanismo de salto. Para validar que el destino del skip link sea enfocable, verificar manualmente que el foco se mueva correctamente al activar el enlace.
