Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.1-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
202526UdL22 (discusión | contribs.)
alumnos
3 ediciones
He añadido mas ejemplos
 
(No se muestran 27 ediciones intermedias de otro usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=2.4.1-A. Saltar bloques repetidos
|wcag_titulo_criterio=2.4.1-A. Saltar bloques repetidos
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegacion_clara
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegacion_clara
|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 22: Línea 22:
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –  
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –  
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Auditiva.png|20px|class=icon-discapacidad|alt=Discapacidad auditiva]]
   [[Archivo:sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad auditiva|Auditiva]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
  –
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
Línea 45: Línea 47:
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad auditiva]]
[[Categoría:Discapacidad sordoceguera]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
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 (por ejemplo, usando encabezados al comienzo de cada sección de contenido) o bien mediante la creación de enlaces de salto.
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
 


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 61: Línea 64:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html Understanding Success Criterion 2.4.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H69 H69: Providing heading elements at the beginning of each section of content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#bypass-blocks WCAG Quick Reference – 2.4.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H70 H70: Using frame elements to group blocks of repeated material]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H64 H64: Using the title attribute of the frame and iframe elements]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR28 SCR28: Using an expandable and collapsible menu to bypass a block of content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G1 G1: Adding a link at the top of each page that goes directly to the main content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G123 G123: Adding a link at the beginning of a block of repeated content to go to the end of the block]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G124 G124: Adding links at the top of the page to each area of the content]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=  
<ul>
<ul>
<li>[https://webaim.org/techniques/skipnav/ WebAIM — Skip Navigation]</li>
<li>[https://webaim.org/techniques/skipnav/ WebAIM — Skip Navigation]</li>
<li>[https://dequeuniversity.com/rules/axe/skip-link axe-core — Skip Link]</li>
</ul>
</ul>


|wcag_tipo_evaluacion=Semiautomática
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar bloques repetidos (menú, header, sidebar).</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Comprobar si existe un enlace para saltar al contenido.</li>
Localizar en la página los bloques de contenido repetido.
<li>Verificar que el enlace aparece al recibir foco (Tab).</li>
</li>
<li>Confirmar que lleva al área principal (id="main" / &lt;main&gt;).</li>
 
<li>Comprobar que funciona con teclado y lector de pantalla.</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que existe algún medio para que los productos de apoyo puedan ignorarlos (enlaces de salto a contenido o landmarks).
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Existe un mecanismo visible al foco para saltar bloques repetidos y funciona correctamente.
Existe un mecanismo visible y foco para saltar bloques repetidos y funciona correctamente.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible</strong>
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.
<br/>
HTML:
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<a href="#main" class="skip-link">Saltar al contenido principal</a>
<a href="#main" class="skip-link">Saltar al contenido principal</a>
<nav> … </nav>
<header>
<main id="main">Contenido principal…</main>
  <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>
</pre>
</pre>
</div>


<div class="accessibility-card">
CSS:
<strong>❌ No accesible</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<nav> … menú … </nav>
.skip-link {
<main>Contenido</main>
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background: #000;
  color: #fff;
  text-decoration: none;
  z-index: 100;
}
 
.skip-link:focus {
  top: 0;
}
</pre>
</pre>
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>AXE, WAVE, Accessibility Insights</li>
<li>
<li>Pruebas con NVDA, JAWS, VoiceOver</li>
<strong>Bookmarklet</strong><br>
<li>Tab para comprobar aparición y funcionamiento del enlace</li>
<html>
<li>Verificar uso de &lt;main&gt; y encabezados estructurales</li>
<div class="highlight-box">
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.
<br/>
Este codigo comprueba si existe salto a contenido en un sitio web
 
<pre>
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}();
</pre>
 
</div>
</html>
</li>
<li>
'''Landmark Navigation''': Plugin que permite visualizar las zonas de interés de la página web [https://chromewebstore.google.com/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp Landmark navigation]</span></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>'''Inspección del navegador''': verificar la existencia de enlaces de salto y una estructura clara del documento con encabezados (<code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>…) que permitan a los productos de apoyo saltar bloques repetidos.</li>
<li>'''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.</li>
<li>'''Validadores y herramientas''': usar DevTools o extensiones de accesibilidad para comprobar que elementos como <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> y <code>&lt;main&gt;</code> están correctamente definidos para soportar saltos semánticos.</li>
</ul>
</ul>
}}
}}
== Ejemplo de Violeta Gómez ==
== 3. SUB-CRITERIO 2.4.1-A: Evitar bloques ==
'''ID del Criterio:''' 2.4.1 Evitar bloques (Nivel A)
'''Enlace a la Wiki:''' <nowiki>https://www.wikiwcag.udl.cat/index.php/2526UdL2.4.1-000</nowiki>
Este criterio sirve para que las personas que no usan ratón (solo teclado) no tengan que pulsar la tecla "Tabulador" 50 veces para pasar por todo el menú antes de llegar a la noticia o al contenido principal.
=== 3.1. Ejemplo NO Accesible (NOA) - Zara ===
* '''Captura de pantalla:'''
* '''URL de origen:''' <nowiki>https://www.zara.com/es/</nowiki>
* '''Explicación:''' A diferencia del ejemplo anterior, la web de Zara no ofrece un mecanismo visible de salto de bloques. Al intentar navegar por teclado, el usuario debe recorrer obligatoriamente todos los elementos del menú lateral y del buscador antes de poder acceder al contenido central o a los productos.
* '''Impacto:''' Esto crea una barrera de accesibilidad significativa. Para un usuario con movilidad reducida, la navegación se vuelve ineficiente y agotadora al no poder omitir bloques de contenido repetitivos, lo que incumple directamente esta pauta de nivel A.
=== 3.2. Ejemplo Accesible (ACC) - H&M ===
* '''Captura de pantalla:'''
* '''URL de origen:''' <nowiki>https://www2.hm.com/es_es/index.html</nowiki>.
* '''Explicación:''' Al iniciar la navegación con la tecla tabulador, la web de H&M hace visible un botón de "enlace de salto" que permite al usuario dirigirse directamente al contenido principal de la página. Esto evita tener que pasar por todos los enlaces de las categorías del menú (Mujer, Hombre, Niños...) cada vez que se carga una página nueva.
* '''Impacto:''' Facilita la navegación a usuarios que utilizan únicamente el teclado debido a discapacidades motrices, permitiéndoles llegar a los productos de forma rápida y eficiente.

Revisión actual - 15:28 12 feb 2026

2.4.1-A. Saltar bloques repetidos

Discapacidades afectadas

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

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

Recursos de apoyo

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

 Última modificación
2526UdL2.4.1-A-00317 febrero 2026 21:44:21
2526UPSA2.4.11-A-00121 enero 2026 21:53:38
2526UFV2.4.1-A-0018 enero 2026 18:20:22
2526UPSA2.4.1-A-00120 diciembre 2025 18:12:24


Comentarios

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

Loading comments...




Ejemplo de Violeta Gómez

3. SUB-CRITERIO 2.4.1-A: Evitar bloques

ID del Criterio: 2.4.1 Evitar bloques (Nivel A)

Enlace a la Wiki: https://www.wikiwcag.udl.cat/index.php/2526UdL2.4.1-000

Este criterio sirve para que las personas que no usan ratón (solo teclado) no tengan que pulsar la tecla "Tabulador" 50 veces para pasar por todo el menú antes de llegar a la noticia o al contenido principal.

3.1. Ejemplo NO Accesible (NOA) - Zara

  • Captura de pantalla:
  • URL de origen: https://www.zara.com/es/
  • Explicación: A diferencia del ejemplo anterior, la web de Zara no ofrece un mecanismo visible de salto de bloques. Al intentar navegar por teclado, el usuario debe recorrer obligatoriamente todos los elementos del menú lateral y del buscador antes de poder acceder al contenido central o a los productos.
  • Impacto: Esto crea una barrera de accesibilidad significativa. Para un usuario con movilidad reducida, la navegación se vuelve ineficiente y agotadora al no poder omitir bloques de contenido repetitivos, lo que incumple directamente esta pauta de nivel A.

3.2. Ejemplo Accesible (ACC) - H&M

  • Captura de pantalla:
  • URL de origen: https://www2.hm.com/es_es/index.html.
  • Explicación: Al iniciar la navegación con la tecla tabulador, la web de H&M hace visible un botón de "enlace de salto" que permite al usuario dirigirse directamente al contenido principal de la página. Esto evita tener que pasar por todos los enlaces de las categorías del menú (Mujer, Hombre, Niños...) cada vez que se carga una página nueva.
  • Impacto: Facilita la navegación a usuarios que utilizan únicamente el teclado debido a discapacidades motrices, permitiéndoles llegar a los productos de forma rápida y eficiente.
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.1-A&oldid=4491»