Principio 2/2.4 Navegable/2.4.1-A

2.4.1-A. Saltar bloques repetidos

2_Operable 2.4_Navegable

• Nivel: A
• Versión: 2.0
• Principio: 2_Operable
• Pauta: 2.4_Navegable
• Grupo: Navegación
• Subgrupo: Estructura_y_saltos

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Motriz – Barrera grave
• Cognitiva – Barrera leve
• Baja visión – Barrera leve
• Visual total – Barrera grave
• Sordoceguera – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Se debe permitir saltar los bloques de contenido repetido en múltiples páginas web, bien agrupando el contenido repetido de forma que los productos de apoyo lo puedan saltar (p. ej. usando encabezados al comienzo de cada sección de contenido) o bien mediante la creación de enlaces de salto

Comprensión del criterio

Descripción resumida

Los usuarios deben poder saltar el contenido repetido (como menús o cabeceras) y acceder directamente al contenido principal mediante enlaces de salto o estructura semántica adecuada.

Objetivo

Facilitar que los usuarios que navegan secuencialmente con teclado o lector de pantalla puedan ir directamente al contenido principal sin recorrer elementos repetidos.

Importancia de cumplir el criterio

Sin enlaces de salto o estructura adecuada, los usuarios deben recorrer repetidamente navegación y bloques fijos, lo que ralentiza la interacción y genera fatiga cognitiva y motriz.

Referencias WCAG

• H69: Providing heading elements at the beginning of each section of content
• H70: Using frame elements to group blocks of repeated material
• H64: Using the title attribute of the frame and iframe elements
• SCR28: Using an expandable and collapsible menu to bypass a block of content
• G1: Adding a link at the top of each page that goes directly to the main content
• G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
• G124: Adding links at the top of the page to each area of the content

Recursos de apoyo

• WebAIM — Skip Navigation

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Localizar en la página los bloques de contenido repetido.
2. Paso 2. Verificar que existe algún medio para que los productos de apoyo puedan ignorarlos (enlaces de salto a contenido o landmarks).

Resultado esperado

Existe un mecanismo visible y foco para saltar bloques repetidos y funciona correctamente.

Ejemplo ilustrativo

Este ejemplo añade un enlace al inicio de la página que permite saltar directamente al contenido principal, evitando tener que pasar por el menú y otros elementos repetidos cuando se navega con teclado o lector de pantalla.
HTML:

<a href="#main" class="skip-link">Saltar al contenido principal</a>
<header>
  <h1>Mi sitio Web</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Cursos</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

<main id="main" tabindex="-1">
  <h2>Contenido principal</h2>
  <p>Bienvenido a nuestro sitio web accesible.</p>
</main>

CSS:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background: #000;
  color: #fff;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Otras herramientas de evaluación

• Bookmarklet
  
  Copia este código y pegalo en un bookmarket. En chrome: Marcadores> Administrador de marcadores. Acceder a una carpeta de marcadores y crear un nuevo marcador. Pegar el código que se muestra a continuación.
  Este codigo comprueba si existe salto a contenido en un sitio web

  javascript:void function() {document.querySelectorAll("#wai-styles,#wai-info-box,.skiplink-span%22).forEach(a%20=%3E%20{a.remove()});%20%20%20%20%20document.querySelector(%22body%22).insertAdjacentHTML(%22afterbegin%22,%22%3Cstyle%20id='wai-styles'%3E#wai-info-box{z-index:1000;color:black;font-family:Noto%20Sans,Trebuchet%20MS,Helvetica%20Neue,Arial,sans-serif;border:solid%201px%20#ddd;background-color:#fff;box-shadow:0%204px%208px%200%20rgba(0,0,0,0.2),0%206px%2020px%200%20rgba(0,0,0,0.19);}#wai-info-box%20header{font-weight:700;background-color:#f2f2f2;color:#005a6a;padding:8px%2016px;}#wai-info-box%20header%20a{float:right;text-decoration:none}#wai-info-box%20div{padding:8px%2016px;}.wai-more-info{position:fixed;bottom:5em;right:5em;}.wai-error{position:fixed;width:40%;top:40%;left:50%;transform:translate(-50%,-50%);}.skiplink-span{color:black;font-weight:bold;font-size:small;font-family:Noto%20Sans,Trebuchet%20MS,Helvetica%20Neue,Arial,sans-serif;background-color:#eed009;margin:0%202px;padding:2px;speak:literal-punctuation}.wai-highlight{outline:#eed009%202px%20dashed}%3C/style%3E%22);%20%20%20%20%20let%20a%20=%20%22%22;%20%20%20%20%20const%20b%20=%20document.querySelector(%22a[href^='#']%22);%20%20%20%20%20if%20(b)%20{%20%20%20%20%20%20%20%20%20if%20(b.offsetWidth%20||%20b.offsetHeight%20||%20b.getClientRects().length%20||%20%22hidden%22%20==%20window.getComputedStyle(b).visibility%20||%20%22absolute%22%20==%20window.getComputedStyle(b).position)%20{%20%20%20%20%20%20%20%20%20%20%20%20%20b.setAttribute(%22data-style%22,%20b.getAttribute(%22style%22));%20%20%20%20%20%20%20%20%20%20%20%20%20let%20a%20=%20%22%22;%20%20%20%20%20%20%20%20%20%20%20%20%20b.style.transition%20=%20%22none%22;%20%20%20%20%20%20%20%20%20%20%20%20%20b.focus();%20%20%20%20%20%20%20%20%20%20%20%20%20let%20d%20=%20getComputedStyle(b);%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(var%20c%20=%200;%20c%20%3C%20d.length;%20c++)%20a%20+=%20d[c]%20+%20%22:%22%20+%20d.getPropertyValue(d[c])%20+%20%22;%22;%20%20%20%20%20%20%20%20%20%20%20%20%20b.setAttribute(%22style%22,%20a);%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20const%20d%20=%20b.getAttribute(%22href%22).substring(1),%20%20%20%20%20%20%20%20%20%20%20%20%20e%20=%20document.querySelector(%22#%22%20+%20d);%20%20%20%20%20%20%20%20%20e%20||%20(a%20=%20%22No%20hay%20destino%20para%20el%20enlace%20de%20salto%22);%20%20%20%20%20%20%20%20%20b.classList.add(%22wai-highlight%22);%20%20%20%20%20%20%20%20%20e.classList.add(%22wai-highlight%22);%20%20%20%20%20%20%20%20%20b.insertAdjacentHTML(%22beforebegin%22,%20%22%3Cspan%20class='skiplink-span'%3EEl%20enlace%20de%20salto%20conecta%20con%20el%20id='%22%20+%20d%20+%20%22'%3C/span%3E%22);%20%20%20%20%20%20%20%20%20e.insertAdjacentHTML(%22afterbegin%22,%20%22%3Cspan%20class='skiplink-span'%3EEl%20enlace%20de%20salto%20conecta%20aqu%C3%AD%3C/span%3E%22);%20%20%20%20%20}%20else%20a%20=%20%22No%20se%20han%20encontrado%20enlaces%20de%20salto%20en%20la%20p%C3%A1gina%22;%20%20%20%20%20a%20&&%20document.querySelector(%22body%22).insertAdjacentHTML(%22afterbegin%22,%20%22%3Caside%20id='wai-info-box'%20tabindex='-1'%20class='wai-error'%3E%3Cheader%3E%C2%BFFalta%20el%20enlace%20de%20salto?%3Ca%20href=javascript:document.querySelector('#wai-info-box').remove();%20aria-label='cerrar'%3EX%3C/a%3E%3C/header%3E%3Cdiv%3E%22%20+%20a%20+%20%22%3C/div%3E%3C/aside%3E%22);%20%20%20%20%20document.querySelector(%22body%22).insertAdjacentHTML(%22beforeend%22,%20%22%3Caside%20id='wai-info-box'%20class='wai-more-info'%3E%3Cheader%3EM%C3%A1s%20informaci%C3%B3n%3Ca%20href=javascript:document.querySelectorAll('#wai-styles,#wai-info-box,.skiplink-span').forEach(function(el){el.remove()});document.querySelectorAll('[data-style]').forEach(function(el){el.setAttribute('style',el.getAttribute('data-style'))});aria-label='cerrar'%3EX%3C/a%3E%3C/header%3E%3Cdiv%3E%3Ca%20href='https://w3.org/wai/test-evaluate/easy-checks/skip-link/'%3EComprobaci%C3%B3n%20de%20enlaces%20de%20salto%3C/a%3E%3C/div%3E%3C/aside%3E%22);%20}();
  

• Landmark Navigation: Plugin que permite visualizar las zonas de interés de la página web Landmark navigation
• Prueba con teclado: pulsar Tab al principio de la página y comprobar que aparece un enlace de salto visible (p. ej. “Saltar al contenido principal”) o que se puede saltar la navegación repetida de otra forma.
• Inspección del navegador: verificar la existencia de enlaces de salto y una estructura clara del documento con encabezados (<h1>, <h2>…) que permitan a los productos de apoyo saltar bloques repetidos.
• Lectores de pantalla: (NVDA, JAWS, VoiceOver) navegar usando atajos de regiones/encabezados para confirmar que se puede llegar rápidamente al contenido principal sin pasar por menús repetidos.
• Validadores y herramientas: usar DevTools o extensiones de accesibilidad para comprobar que elementos como <header>, <nav> y <main> están correctamente definidos para soportar saltos semánticos.

Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html>

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

Selecciona 1 2 3 4+ Opciones Simple Doble Suite Reservar

⚠️ Problemas de este formulario:

• No hay etiquetas <label> para ningún campo
• Algunos placeholders son ambiguos ("Código" - ¿qué código?)
• No se indica qué campos son obligatorios
• No hay instrucciones sobre el formato esperado
• El select dice "Selecciona" pero ¿seleccionar qué?
• Un campo no tiene ni placeholder ni etiqueta (campo de email)
• No hay indicación de formato de fecha específico
• No se explica para qué sirve cada campo

<!DOCTYPE html>

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Nombre *

Ingrese su nombre tal como aparece en su documento de identidad

Apellido *

Correo Electrónico *

Enviaremos la confirmación de reserva a este correo

Teléfono de Contacto *

Incluya el código de país (Ej: +34 para España)

Número de Huéspedes *

¿Cuántas personas se alojarán?

Seleccione una opción 1 persona 2 personas 3 personas 4 o más personas

Fecha de Entrada *

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Fecha de Salida *

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Tipo de Habitación *

Seleccione el tipo de habitación que prefiere

Seleccione una opción Habitación Simple (1 cama individual) Habitación Doble (1 cama doble o 2 individuales) Suite (habitación con sala de estar)

Código de Descuento (Opcional)

Si tiene un código promocional, ingréselo aquí

Solicitudes Especiales (Opcional)

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

Confirmar Reserva

✅ Implementación correcta:

• Cada campo tiene una etiqueta <label> clara asociada
• Los campos obligatorios están claramente marcados con *
• Hay instrucciones específicas sobre formato y contenido esperado
• Los selectores tienen opciones descriptivas, no ambiguas
• Se explica el propósito de cada campo cuando no es obvio
• Se proporcionan ejemplos en los placeholders
• Hay una nota inicial explicando la convención de campos obligatorios
• Se usan atributos ARIA apropiados (aria-required, aria-describedby)

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.1-A. Saltar bloques repetidos

Loading comments...