Regla de accesibilidad: La página debe tener medios para omitir bloques repetidos

Acerca de esta regla de accesibilidad

Los sitios web típicamente repiten enlaces de navegación, marca y otros elementos de interfaz en cada página. Mientras que los usuarios videntes con ratón pueden escanear visualmente estos bloques y hacer clic donde quieran, los usuarios de solo teclado y los usuarios de lectores de pantalla deben navegar secuencialmente a través de cada elemento interactivo. Sin un mecanismo de omisión, un usuario de teclado podría necesitar presionar Tab docenas de veces solo para llegar al contenido principal en cada nueva página que visite. Para usuarios con discapacidades motoras severas, esto puede tomar varios minutos por página y causar fatiga o dolor físico. Incluso usuarios con limitaciones menos severas experimentarán retrasos frustrantes comparado con usuarios de ratón, que pueden llegar a cualquier enlace en uno o dos segundos.

Los usuarios de lectores de pantalla también se benefician significativamente de los mecanismos de omisión. Los landmarks como <main>, <nav>, y <header> permiten a los lectores de pantalla presentar un esquema estructural de la página, habilitando a los usuarios a saltar directamente a la sección que necesitan. Los encabezados sirven un propósito similar — los usuarios de lectores de pantalla pueden navegar por nivel de encabezado para localizar rápidamente el área de contenido principal.

Esta regla mapea a WCAG 2.4.1 Bypass Blocks (Nivel A), que requiere que un mecanismo esté disponible para omitir bloques de contenido repetidos en múltiples páginas. También es requerido por Section 508 (específicamente §1194.22(o)), las guías de Trusted Tester, y EN 301 549. Porque es un requisito de Nivel A, representa la línea base mínima para el cumplimiento de accesibilidad.

Cómo funciona la regla

La regla de omisión de axe verifica que una página incluya al menos uno de los siguientes:

Una región landmark (como <main>, <nav>, <header>, o <footer>)
Un encabezado (un elemento <h1> hasta <h6>)
Un enlace de salto interno (un enlace de ancla que apunta a una ubicación más abajo en la página)

Si ninguno de estos está presente, la regla marca la página como un fallo.

Cómo solucionarlo

El mejor enfoque es usar elementos landmark de HTML5 para estructurar tu página. Como mínimo, incluye un elemento <main> que envuelva el contenido principal de la página. También deberías usar <header>, <nav>, y <footer> para identificar otras secciones comunes. Una página debe tener solo un landmark <main>.

Adicionalmente, considera agregar un enlace de salto de navegación como el primer elemento enfocable en la página. Esto proporciona un atajo inmediato para usuarios de teclado que no usan lectores de pantalla y pueden no ser capaces de navegar por landmarks.

Prefiere elementos nativos de HTML5 sobre sus equivalentes ARIA. Por ejemplo, usa <main> en lugar de <div role="main">. Los elementos nativos están mejor soportados y requieren menos código.

Ejemplos

Incorrecto: Sin landmarks, encabezados o enlaces de salto

Esta página no tiene landmarks estructurales, no tiene encabezados, y no tiene enlace de salto. Los usuarios de teclado deben navegar con tab a través de cada elemento para llegar al contenido.

<div class="header">
  <div class="logo">My Site</div>
  <div class="nav">
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</div>
<div class="content">
  <p>This is the main content of the page.</p>
</div>
<div class="footer">
  <p>Footer information</p>
</div>

Correcto: Usando elementos landmark de HTML5

Reemplazar los contenedores genéricos <div> con elementos semánticos de HTML5 le da a la página una estructura apropiada que las tecnologías asistivas pueden usar para navegación.

<header>
  <div class="logo">My Site</div>
  <nav>
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
  <p>This is the main content of the page.</p>
  <section>
    <h2>Latest News</h2>
    <p>Section content here.</p>
  </section>
</main>
<footer>
  <p>Footer information</p>
</footer>

Correcto: Agregando un enlace de salto de navegación

Un enlace de salto da a los usuarios de teclado una forma inmediata de omitir contenido repetido. Típicamente está visualmente oculto hasta que recibe foco.

<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <header>
    <nav>
      <a href="/home">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main id="main-content">
    <h1>Page Title</h1>
    <p>This is the main content of the page.</p>
  </main>
  <footer>
    <p>Footer information</p>
  </footer>
</body>

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

Cuando el enlace de salto recibe foco del teclado, se vuelve visible, y presionar Enter mueve el foco directamente al elemento <main>. Combinado con elementos landmark apropiados, esto da a todos los usuarios acceso rápido y confiable al contenido principal de la página.

Learn more: