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 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.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 89: Línea 89:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li> 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> '''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>
<li>
<strong>Bookmarklet Forzar el foco:</strong><br/>
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y forzar ver el foco en páginas que no se muestra el foco (util para ver si es orden de navegación es correcto). <br>
<a class="bookmarklet-button"
href="javascript:(function()%7Bdocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/focus.js';var%20iframes=document.getElementsByTagName('iframe');for(i=0;i%3Ciframes.length;i++)%20%7Biframes%5Bi%5D.contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/focus.js';%7D%7D)();">
Forzar foco</a>
</div>
</html>
</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>'''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>'''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>

Revisión actual - 09:20 8 dic 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 ilustrativo

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.
  • Bookmarklet Forzar el foco:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y forzar ver el foco en páginas que no se muestra el foco (util para ver si es orden de navegación es correcto).
    Forzar foco
  • 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

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

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

Reserva de Hotel

⚠️ 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> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

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

¿Cuántas personas se alojarán?

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

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

Seleccione el tipo de habitación que prefiere

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

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

✅ 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.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=3833»