Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.1-A»
De WCAG Wiki
< Principio 2 | 2.4 Navegable
Sin resumen de edición |
Sin resumen de edición |
||
| (No se muestran 2 ediciones intermedias del mismo usuario) | |||
| Línea 7: | Línea 7: | ||
|wcag_principio=2_Operable | |wcag_principio=2_Operable | ||
|wcag_principio_url=Principio_2 | |wcag_principio_url=Principio_2 | ||
|wcag_pauta=2. | |wcag_pauta=2.4_Navegable | ||
|wcag_pauta_url=Principio_2/2. | |wcag_pauta_url=Principio_2/2.4_Navegable | ||
|wcag_grupo=Navegación | |wcag_grupo=Navegación | ||
|wcag_subgrupo=Estructura_y_saltos | |wcag_subgrupo=Estructura_y_saltos | ||
| Línea 87: | Línea 87: | ||
<li><span class="paso-badge">Paso 2.</span> | <li><span class="paso-badge">Paso 2.</span> | ||
Verificar que existe algún medio para que los productos de apoyo puedan ignorarlos. | Verificar que existe algún medio para que los productos de apoyo puedan ignorarlos (enlaces de salto a contenido o landmarks). | ||
</li> | </li> | ||
</ol> | </ol> | ||
| Línea 150: | Línea 150: | ||
Clica o arrastra este botón a tu barra de marcadores y podrás ver si la página tiene enlace de salto al contenido. <br> | Clica o arrastra este botón a tu barra de marcadores y podrás ver si la página tiene enlace de salto al contenido. <br> | ||
<a class="bookmarklet-button" | <a class="bookmarklet-button" href="javascript:(function(){document.querySelectorAll('#wai-styles,#wai-info-box,.skiplink-span').forEach(a=>{a.remove()});document.body.insertAdjacentHTML('afterbegin','<style id="wai-styles">#wai-info-box{z-index:1000;color:black;font-family:Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;border:solid 1px #ddd;background-color:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}#wai-info-box header{font-weight:700;background-color:#f2f2f2;color:#005a6a;padding:8px 16px;}#wai-info-box header a{float:right;text-decoration:none}#wai-info-box div{padding:8px 16px;}.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;background-color:#eed009;margin:0 2px;padding:2px;}.wai-highlight{outline:#eed009 2px dashed}</style>');let msg='';const b=document.querySelector('a[href^="#"]');if(b){if(b.offsetWidth||b.offsetHeight||b.getClientRects().length||getComputedStyle(b).visibility!='hidden'){b.setAttribute('data-style',b.getAttribute('style'));let st='';b.style.transition='none';b.focus();let cs=getComputedStyle(b);for(let i=0;i<cs.length;i++){st+=cs[i]+':'+cs.getPropertyValue(cs[i])+';'}b.setAttribute('style',st);}const id=b.getAttribute('href').substring(1),target=document.querySelector('#'+id);if(!target){msg='No hay destino para el enlace de salto';}b.classList.add('wai-highlight');if(target)target.classList.add('wai-highlight');b.insertAdjacentHTML('beforebegin','<span class="skiplink-span">El enlace de salto conecta con id="'+id+'"</span>');if(target)target.insertAdjacentHTML('afterbegin','<span class="skiplink-span">El enlace de salto conecta aquí</span>')}else{msg='No se han encontrado enlaces de salto en la página'}if(msg){document.body.insertAdjacentHTML('afterbegin','<aside id="wai-info-box" tabindex="-1" class="wai-error"><header>¿Falta el enlace de salto?<a href=javascript:document.querySelector('#wai-info-box').remove(); aria-label="cerrar">X</a></header><div>'+msg+'</div></aside>')}document.body.insertAdjacentHTML('beforeend','<aside id="wai-info-box" class="wai-more-info"><header>Más información<a href=javascript:document.querySelectorAll('#wai-styles,#wai-info-box,.skiplink-span').forEach(el=>el.remove());document.querySelectorAll('[data-style]').forEach(el=>el.setAttribute('style',el.getAttribute('data-style'))); aria-label="cerrar">X</a></header><div><a href="https://w3.org/wai/test-evaluate/easy-checks/skip-link/" target="_blank">Comprobación de enlaces de salto</a></div></aside>');})();"> | ||
href=" | |||
javascript: | |||
Comprobar si hay salto de contenido | Comprobar si hay salto de contenido | ||
</a> | </a> | ||
</div> | </div> | ||
</html> | </html> | ||
</li> | </li> | ||
<li>'''Prueba con teclado''': pulsar <kbd>Tab</kbd> 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.</li> | <li>'''Prueba con teclado''': pulsar <kbd>Tab</kbd> 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.</li> | ||
<li>'''Inspección del navegador''': verificar la existencia de enlaces de salto y una estructura clara del documento con encabezados (<code><h1></code>, <code><h2></code>…) que permitan a los productos de apoyo saltar bloques repetidos.</li> | <li>'''Inspección del navegador''': verificar la existencia de enlaces de salto y una estructura clara del documento con encabezados (<code><h1></code>, <code><h2></code>…) que permitan a los productos de apoyo saltar bloques repetidos.</li> | ||
Revisión actual - 12:43 6 nov 2025
2.4.1-A. Saltar bloques repetidos
- 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
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Localizar en la página los bloques de contenido repetido.
- 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
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
Clica o arrastra este botón a tu barra de marcadores y podrás ver si la página tiene enlace de salto al contenido.
Comprobar si hay salto de contenido - 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
Comentarios
A continuación se muestran comentarios sobre el criterio 2.4.1-A. Saltar bloques repetidos
Loading comments...
