El orden del contenido en una página web es crucial para la accesibilidad. Para muchas personas que utilizan tecnologías de asistencia, como lectores de pantalla, el contenido debe presentarse en un orden lógico y significativo para que tenga sentido.
La técnica G57 está relacionada con el criterio de éxito 1.3.2: Secuencia significativa de WCAG 2.1. Su objetivo es garantizar que la estructura y el orden del contenido sean comprensibles tanto visualmente como en el código subyacente, evitando que el significado de la información se pierda cuando se accede de manera secuencial.
Esta técnica se aplica a todas las tecnologías web y es especialmente relevante en páginas con diseños complejos o contenido estructurado.
Acerca de esta técnica
Para cumplir con este criterio, el contenido debe:
- Mantener una secuencia lógica tanto en el código HTML como en la presentación visual.
- Evitar el uso de tablas de diseño que alteren el orden de lectura del contenido.
- Asegurar que los elementos interactivos sigan un orden natural que facilite la navegación.
- Usar CSS de manera adecuada, sin depender de estilos visuales para definir la estructura semántica.
Esta técnica es esencial en:
- Páginas web con múltiples secciones de contenido.
- Diseños con menús, imágenes, descripciones y contenido multimedia.
- Interfaces interactivas con formularios o botones de navegación.
Ejemplos
Ejemplo incorrecto 1: Uso de una tabla de diseño que altera el orden lógico
En un sitio web, se usa una tabla para posicionar los elementos visualmente, pero el orden en el código no es lógico para los lectores de pantalla.
<table>
<tr>
<td><img src=»imagen.jpg» alt=»Descripción de la imagen»></td>
<td><h2>Título del contenido</h2></td>
</tr>
<tr>
<td colspan=»2″><p>Texto descriptivo del contenido.</p></td>
</tr>
</table>
🔴 Problema:
- Los lectores de pantalla leerán primero la imagen y luego el título, rompiendo la relación lógica entre ellos.
- Si se cambia el diseño, la estructura de lectura sigue dependiendo de la tabla.
Solución correcta: Uso de HTML semántico y CSS para estructurar el contenido
<div class=»contenido»>
<h2>Título del contenido</h2>
<img src=»imagen.jpg» alt=»Descripción de la imagen»>
<p>Texto descriptivo del contenido.</p>
</div>
.contenido {
display: flex;
flex-direction: column;
align-items: center;
}
✅ ¿Qué mejora?:
- Se mantiene una estructura semántica clara y accesible.
- Se evita el uso de tablas para diseño, mejorando la compatibilidad con lectores de pantalla.
Ejemplo incorrecto 2: Elementos interactivos desordenados en el código
En un formulario, los campos están organizados visualmente con CSS, pero en el código HTML el orden no es lógico.
<style>
#campo2 { position: absolute; top: 50px; left: 20px; }
#campo1 { position: absolute; top: 100px; left: 20px; }
</style>
<form>
<input type=»text» id=»campo2″ placeholder=»Segundo campo»>
<input type=»text» id=»campo1″ placeholder=»Primer campo»>
</form>
🔴 Problema:
- Los lectores de pantalla leen los campos en el orden incorrecto, dificultando la navegación.
- La posición visual no coincide con la estructura real del código.
Solución correcta: Mantener el orden lógico en el código y usar CSS para el diseño
<form>
<input type=»text» id=»campo1″ placeholder=»Primer campo»>
<input type=»text» id=»campo2″ placeholder=»Segundo campo»>
</form>
form {
display: flex;
flex-direction: column;
}
✅ ¿Qué mejora?:
- El orden de lectura es correcto, facilitando la navegación con tecnologías de asistencia.
- Se usa CSS para la apariencia visual, sin alterar la estructura semántica del HTML.
Mejor práctica: Uso de encabezados y landmarks para organizar el contenido
En páginas con secciones extensas, se pueden usar encabezados (h1, h2, h3) y landmarks (<header>, <nav>, <main>, <footer>) para estructurar mejor el contenido.
<header>
<h1>Mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href=»#»>Inicio</a></li>
<li><a href=»#»>Servicios</a></li>
<li><a href=»#»>Contacto</a></li>
</ul>
</nav>
<main>
<h2>Servicios</h2>
<p>Descripción de los servicios ofrecidos.</p>
</main>
<footer>
<p>© 2024 Mi Sitio Web</p>
</footer>
✅ ¿Qué mejora?:
- Se establece una estructura jerárquica clara.
- Los lectores de pantalla pueden navegar por secciones fácilmente.
Errores comunes y cómo evitarlos
Errores comunes:
- Usar tablas de diseño que desorganizan la lectura.
- Posicionar elementos con CSS sin considerar el orden en el código.
- Desordenar elementos interactivos como formularios o botones.
Cómo evitarlos:
- Mantener la coherencia entre el código y la presentación visual.
- Usar CSS para diseño, sin alterar la estructura lógica del contenido.
- Verificar el orden de navegación con lectores de pantalla.
Preguntas frecuentes sobre la técnica general G57
¿Cómo afecta el orden del contenido a la accesibilidad?
Un orden incorrecto dificulta la navegación con lectores de pantalla y afecta la comprensión del contenido.
¿Es recomendable usar tablas para organizar contenido?
No, las tablas deben usarse solo para datos tabulares, no para diseño.
¿Cómo puedo comprobar si mi contenido tiene una secuencia lógica?
Puedes desactivar los estilos CSS o usar un lector de pantalla para evaluar la estructura de lectura.
¿Es obligatorio seguir el mismo orden visual y en el código?
Sí, para garantizar que el contenido tenga sentido tanto para usuarios visuales como para quienes usan tecnologías de asistencia.
¿Cómo mejorar la accesibilidad en interfaces interactivas?
Manteniendo un orden lógico de los elementos interactivos y asegurando que los lectores de pantalla los reconozcan en la secuencia correcta.
¿Puedo usar flexbox o grid para diseño sin afectar la accesibilidad?
Sí, siempre que el orden del HTML sea lógico y estructurado correctamente.
Recursos relacionados
- Guía oficial WCAG 2.1 para la Técnica General G57: Ordenar el contenido en una secuencia significativa
- Comprender el criterio de éxito 1.3.2: Secuencia significativa
- C6: Posicionamiento de contenidos según el marcado estructural
- C27: Hacer que el orden del DOM coincida con el orden visual
- F1: Fallo del criterio de éxito 1.3.2 debido a cambio del significado del contenido al posicionar la información con CSS
- F49: Fallo del criterio de éxito 1.3.2 debido al uso de una tabla de diseño HTML que no tiene sentido cuando se linealiza
- Cómo estructurar un documento web semántico
Pruebas y validación
Procedimiento
- Linealizar el contenido (desactivar estilos o usar una herramienta de lectura lineal).
- Verificar que el contenido sigue una secuencia lógica y comprensible.
Resultados esperados
- ✅ Si el contenido es comprensible en su forma lineal, la técnica está bien implementada.
- ❌ Si el contenido pierde sentido, es necesario reorganizarlo.
Mantener una secuencia lógica en el contenido es clave para la accesibilidad digital. La técnica G57 permite que todos los usuarios, incluidos aquellos con discapacidades, puedan navegar y comprender la información sin barreras.
Si diseñas sitios web, verifica siempre el orden del contenido y usa HTML semántico para mejorar la accesibilidad. 🚀 ¡Construyamos una web más inclusiva para todos!