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

De WCAG Wiki
VisualWikitexto
Página creada con «== '''2.4.3-A. El orden de tabulación por los enlaces, controles de formulario y demás elementos de interacción debe tener sentido''' == '''A) EJEMPLO ACCESIBLE:''' '''B) EJEMPLO NO ACCESIBLE:'''»
 
Sin resumen de edición
 
(No se muestran 4 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''2.4.3-A. El orden de tabulación por los enlaces, controles de formulario y demás elementos de interacción debe tener sentido''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|id_wcag_criterio=2.4.3
|id_wcag_subcriterio=2.4.3-A
|wcag_titulo_criterio=2.4.3-A. Orden de tabulación lógico
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegable
|wcag_grupo=Navegación
|wcag_subgrupo=Teclado_y_contenido
|wcag_subcriterio_url=Principio_2/2.4_Navegacion_clara/2.4.3-A


'''B) EJEMPLO NO ACCESIBLE:'''
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[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="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[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="gravedad gravedad-moderada">Barrera moderada</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
 
|wcag_texto_criterioOAW=
El orden de tabulación por los enlaces, controles de formulario y demás elementos de interacción debe tener sentido.
 
|wcag_descripcion_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.
 
|wcag_objetivo=
Asegurar que los usuarios puedan moverse por la interfaz con el teclado sin perder contexto ni acceso a los controles.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<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/WCAG21/Techniques/failures/F44 F44: Failure due to using tabindex to create a tab order that does not preserve meaning and operability]</span></li>
</ul>
 
 
|wcag_recursos= NO hay
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Tabular con el teclado por todos los elementos de la página.
</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>
 
|wcag_resultado_evaluacion=
El foco de teclado se mueve de forma predecible y lógica, respetando la estructura visual y semántica de la página.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Codigo HTML con el orden natural del DOM.
<pre class="wcag-codigo-html">
<form>
  <label>Email</label>
  <input type="email">
  <label>Contraseña</label>
  <input type="password">
  <button type="submit">Entrar</button>
</form>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>
<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>
 
}}

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»