Técnica General G59 de WCAG 2.1: Colocar los elementos interactivos en un orden que siga secuencias y relaciones dentro del contenido

El orden en el que los elementos interactivos reciben el foco es crucial para la accesibilidad web. Un orden lógico y predecible permite a los usuarios con discapacidad visual o movilidad reducida navegar eficientemente utilizando tecnologías asistivas, como lectores de pantalla y teclados.

La técnica G59 está relacionada con el criterio de éxito:

• 2.4.3: Orden del foco, asegurando que los elementos interactivos sigan una secuencia lógica y estructurada dentro del contenido.

Este método aplica a todas las tecnologías que definen un orden de tabulación predeterminado para los elementos interactivos, como HTML y ARIA.

Acerca de esta técnica

El objetivo de la técnica G59 es garantizar que los elementos interactivos, como botones, enlaces y campos de formulario, sean accesibles en un orden que refleje su relación y secuencia lógica dentro del contenido.

Para lograrlo:

• Organizar los elementos en el código fuente en el mismo orden que aparecen visualmente.
• Evitar manipulaciones del DOM que alteren la secuencia del foco de manera inesperada.
• Asegurar que el uso de tabindex sea correcto, sin modificar el flujo natural de tabulación a menos que sea absolutamente necesario.
• Garantizar que el orden del foco respete la relación jerárquica del contenido, agrupando elementos relacionados.

Esta técnica es crucial en:

• Formularios con múltiples campos.
• Interfaces con menús, botones y secciones interactivas.
• Aplicaciones web dinámicas con contenido que se actualiza mediante JavaScript.

Ejemplos

Ejemplo incorrecto 1: Orden del foco inconsistente en un formulario

<form>
  <input type="text" id="campo2" placeholder="Segundo campo">
  <input type="text" id="campo1" placeholder="Primer campo">
</form>

🔴 Problema: El segundo campo aparece antes que el primero en el código fuente, lo que genera una navegación confusa para usuarios que dependen del teclado o tecnologías asistivas.

Solución correcta: Orden lógico de los campos de formulario

<form>
  <input type="text" id="campo1" placeholder="Primer campo">
  <input type="text" id="campo2" placeholder="Segundo campo">
</form>

✅ ¿Qué mejora?:

• La navegación con teclado sigue el flujo lógico esperado.
• Los usuarios pueden completar el formulario de manera intuitiva sin interrupciones.

Ejemplo incorrecto 2: Uso indebido de tabindex para alterar el orden natural

<a href="#" tabindex="2">Opción 2</a>
<a href="#" tabindex="1">Opción 1</a>

🔴 Problema:

• El orden de tabulación manual con tabindex interrumpe la secuencia natural del contenido.
• Puede confundir a los usuarios, especialmente a quienes usan lectores de pantalla.

Solución correcta: Mantener el orden natural del DOM

<a href="#">Opción 1</a>
<a href="#">Opción 2</a>

✅ ¿Qué mejora?:

• La navegación es predecible y coincide con el flujo visual del contenido.
• Se evita la necesidad de gestionar manualmente el orden de tabulación.

Mejor práctica: Formularios con agrupación de campos relacionados

<form>
  <fieldset>
    <legend>Datos personales</legend>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre">
    <label for="apellido">Apellido:</label>
    <input type="text" id="apellido">
  </fieldset>
</form>

✅ ¿Qué mejora?

• Los campos están agrupados semánticamente, facilitando la navegación.
• La secuencia es clara y estructurada, mejorando la experiencia del usuario.

Errores comunes y cómo evitarlos

Errores comunes:

• Modificar el orden del foco con tabindex de manera arbitraria.
• Ubicar elementos interactivos en un orden ilógico dentro del código fuente.
• Utilizar CSS para reorganizar visualmente los elementos sin ajustar el orden en el DOM.

Cómo evitar estos errores:

• Mantener el orden lógico del contenido tanto en el DOM como en el diseño visual.
• Usar tabindex="0" solo cuando sea necesario y evitar valores superiores a 0.
• Probar la navegación con teclado para verificar que el orden sea intuitivo.

Preguntas frecuentes sobre la técnica general G59

¿Por qué es importante el orden del foco en la accesibilidad?

Un orden lógico permite a los usuarios navegar eficazmente con teclado y tecnologías asistivas, evitando confusión y frustración.

¿Es recomendable usar tabindex para reordenar el foco?

No, se debe mantener el orden natural del contenido y solo utilizar tabindex="0" en casos específicos.

¿Cómo puedo probar el orden del foco en mi sitio web?

Navega usando la tecla Tab para verificar que los elementos interactivos sean enfocados en el orden correcto.

¿Qué impacto tiene un mal orden del foco en la experiencia del usuario?

Puede dificultar o impedir la navegación, afectando especialmente a personas con discapacidades visuales o motoras.

¿Cómo afecta el CSS al orden del foco?

Modificar la posición de los elementos con position: absolute o flexbox sin ajustar el orden en el DOM puede causar confusión.

¿Cómo puedo mejorar la accesibilidad en formularios largos?

Usa fieldset y legend para agrupar campos relacionados y asegurar un flujo de navegación lógico.

Recursos relacionados

• Guía oficial WCAG 2.1 para la Técnica General G59: Colocar los elementos interactivos en un orden que siga secuencias y relaciones dentro del contenido.
• Comprender el criterio de éxito 2.4.3: Orden del foco
• G57: Ordenar el contenido en una secuencia significativa
• C27: Hacer que el orden del DOM coincida con el orden visual
• SCR26: Inserción de contenido dinámico en el Modelo de Objetos de Documento inmediatamente después de su elemento desencadenante
• SCR27: Reordenamiento de secciones de página utilizando el Modelo de Objeto de Documento
• H102: Creación de cuadros de diálogo modales con el elemento de diálogo HTML
• HTML tabindex Attribute

Pruebas y validación

Procedimiento:

1. Navegar por los elementos interactivos utilizando la tecla Tab.
2. Comprobar que el foco sigue una secuencia lógica y predecible.
3. Verificar que los elementos relacionados se agrupan de forma coherente.

Resultados esperados:

• ✅ Si el foco sigue un orden lógico, la técnica está bien implementada.
• ❌ Si el foco salta de manera inesperada, es necesario corregir la estructura del contenido.

Asegurar un orden lógico del foco es esencial para garantizar la accesibilidad web. La técnica G59 permite a los usuarios navegar de manera eficiente y sin obstáculos, mejorando la experiencia para todos, especialmente para aquellos que dependen de tecnologías asistivas.

Si desarrollas interfaces interactivas, evalúa y ajusta el orden del foco en tu contenido. Prioriza un diseño accesible desde el código y realiza pruebas de navegación con teclado.

¡Optimiza la accesibilidad y haz que tu web sea más inclusiva para todos! 🚀