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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=2.4.3-A. Orden de tabulación lógico
|wcag_titulo_criterio=2.4.3-A. Orden de tabulación lógico
|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=Teclado_y_contenido
|wcag_subgrupo=Teclado_y_contenido
Línea 28: Línea 28:
   <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-moderada">Barrera moderada</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Auditiva.png|20px|class=icon-discapacidad|alt=Discapacidad auditiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad auditiva|Auditiva]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>


Línea 44: Línea 34:
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad auditiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
El orden de tabulación debe seguir una secuencia lógica y coherente que preserve el significado y la operabilidad del contenido. Los elementos interactivos deben recibir el foco en un orden que tenga sentido para el usuario.
El orden de tabulación por los enlaces, controles de formulario y demás elementos de interacción debe tener sentido.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 61: Línea 49:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html Understanding SC 2.4.3: Focus Order]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G59 G59: Placing the interactive elements in an order that follows sequences and relationships within the content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#focus-order WCAG Quick Reference – 2.4.3]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F44 F44: Failure due to using tabindex to create a tab order that does not preserve meaning and operability]</span></li>
<li>[https://webaim.org/techniques/keyboard/#content WebAIM — Keyboard Accessibility]</li>
</ul>
</ul>


|wcag_recursos=
 
<ul>
|wcag_recursos= NO hay
<li>[https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex MDN – tabindex]</li>
<li>[https://accessibilityinsights.io/ Accessibility Insights]</li>
<li>[https://wave.webaim.org/ WAVE]</li>
<li>[https://axe.deque.com/ axe-core]</li>
</ul>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
Línea 78: Línea 60:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Recorrer la página usando solo teclado (Tab / Shift+Tab).</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Verificar que el foco sigue un flujo lógico (de arriba a abajo, izquierda a derecha, según sentido visual y semántico).</li>
Tabular con el teclado por todos los elementos de la página.
<li>Comprobar que no se salta elementos interactivos importantes ni repite foco innecesariamente.</li>
</li>
<li>Revisar valores de <code>tabindex</code> que alteren el orden natural.</li>
 
<li>Verificar el foco en componentes dinámicos (modales, menús, pop-ups).</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que el orden de la tabulación sigue el orden lógico que debería presentar la página.
<br><small>Nota: Si el comportamiento no es el adecuado, puede utilizarse la herramienta <strong>Web Developer Toolbar</strong>, activando <strong>Information → Display Tab Index</strong> para visualizar el atributo <code>tabindex</code> y ayudar a identificar el origen del problema.</small>
</li>
</ol>
</ol>


Línea 90: Línea 75:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible: orden natural del DOM</strong>
Codigo HTML con el orden natural del DOM.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<form>
<form>
Línea 99: Línea 84:
   <button type="submit">Entrar</button>
   <button type="submit">Entrar</button>
</form>
</form>
</pre>
</div>
<div class="accessibility-card">
<strong>❌ No accesible: tabindex incorrecto</strong>
<pre class="wcag-codigo-html">
<input type="text" placeholder="Nombre" tabindex="3">
<input type="text" placeholder="Email" tabindex="1">
<button tabindex="2">Enviar</button>
</pre>
</div>
<div class="accessibility-card">
<strong>✅ Correcto: tabindex usado con propósito</strong>
<pre class="wcag-codigo-html">
<div tabindex="0" role="button">Abrir menú</div>
</pre>
</pre>
</div>
</div>
Línea 120: Línea 89:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Pruebas manuales con teclado (Tab / Shift+Tab / Enter / Esc)</li>
<li> '''Plugin''': Usa el plugin [https://chromewebstore.google.com/detail/taba11y-tab-order-accessi/aocppmckdocdjkphmofnklcjhdidgmga  taba11y - Tab order accessibility testing] para ver el orden de los elementos de la página.
<li>AXE DevTools, WAVE, Accessibility Insights</li>
</li>
<li>Lectores de pantalla: NVDA, JAWS, VoiceOver</li>
<li>'''Navegación con teclado''': recorrer la página con <kbd>Tab</kbd> y <kbd>Shift + Tab</kbd> para comprobar que el foco avanza en un orden lógico y coherente con la disposición visual.</li>
<li>'''Inspección del DOM''': revisar el orden de los elementos interactivos en el HTML para confirmar que coincide con el orden visual (evitar depender de CSS para el orden).</li>
<li>'''Revisión de atributos''': comprobar que no se usa <code>tabindex</code> de forma incorrecta (p. ej. valores mayores que 0 que rompen el orden natural).</li>
<li>'''Pruebas con lectores de pantalla''': (NVDA, JAWS, VoiceOver) verificar que el orden de navegación por foco es comprensible y no produce saltos inesperados.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:44 6 nov 2025

2.4.3-A. Orden de tabulación lógico

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)

  • El orden de tabulación por los enlaces, controles de formulario y demás elementos de interacción debe tener sentido.

Comprensión del criterio

Descripción resumida

El orden del foco al navegar con teclado debe ser comprensible y coincidir con el flujo visual y semántico de la página, garantizando que todos los elementos relevantes sean accesibles.

Objetivo

Asegurar que los usuarios puedan moverse por la interfaz con el teclado sin perder contexto ni acceso a los controles.

Importancia de cumplir el criterio

Un orden del foco incoherente genera confusión, impide completar formularios y puede dejar controles inaccesibles para quienes dependen exclusivamente del teclado o lectores de pantalla.

Referencias WCAG

Recursos de apoyo

NO hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Tabular con el teclado por todos los elementos de la página.
  2. Paso 2. Verificar que el orden de la tabulación sigue el orden lógico que debería presentar la página.
    Nota: Si el comportamiento no es el adecuado, puede utilizarse la herramienta Web Developer Toolbar, activando Information → Display Tab Index para visualizar el atributo tabindex y ayudar a identificar el origen del problema.

Resultado esperado

El foco de teclado se mueve de forma predecible y lógica, respetando la estructura visual y semántica de la página.

Ejemplo

Codigo HTML con el orden natural del DOM. 

<form>
  <label>Email</label>
  <input type="email">
  <label>Contraseña</label>
  <input type="password">
  <button type="submit">Entrar</button>
</form>

Otras herramientas de evaluación

  • Plugin: Usa el plugin taba11y - Tab order accessibility testing para ver el orden de los elementos de la página.
  • Navegación con teclado: recorrer la página con Tab y Shift + Tab para comprobar que el foco avanza en un orden lógico y coherente con la disposición visual.
  • Inspección del DOM: revisar el orden de los elementos interactivos en el HTML para confirmar que coincide con el orden visual (evitar depender de CSS para el orden).
  • Revisión de atributos: comprobar que no se usa tabindex de forma incorrecta (p. ej. valores mayores que 0 que rompen el orden natural).
  • Pruebas con lectores de pantalla: (NVDA, JAWS, VoiceOver) verificar que el orden de navegación por foco es comprensible y no produce saltos inesperados.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.3-A. Orden de tabulación lógico

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.3-A&oldid=3726»