Técnica Técnicas generales WCAG 2.2
G57Ordenar el contenido en una secuencia significativa
En resumen
Esta técnica pide que el orden del contenido en el código fuente tenga sentido por sí mismo, sin depender de la maquetación visual. Beneficia a quienes usan lectores de pantalla, navegan con teclado o desactivan las hojas de estilo, porque reciben el contenido en el orden del código. Aplíquela al colocar bloques con CSS o tablas y compruébela linealizando la página.
Aplicabilidad
Todas las tecnologías.
Descripción
El objetivo de esta técnica es garantizar que el orden en que el contenido se presenta a las tecnologías de asistencia permite al usuario darle sentido. Algunas técnicas permiten que el contenido se presente visualmente en una secuencia significativa aunque esta sea distinta del orden en que el contenido está codificado en el archivo fuente subyacente.
Por ejemplo, al mezclar idiomas con distinta direccionalidad en HTML, el algoritmo bidireccional puede colocar los signos de puntuación en un lugar incorrecto en la presentación visual. El problema de presentación visual podría corregirse moviendo la puntuación en el flujo del contenido para que el algoritmo bidireccional la coloque donde se desea, pero esto expondría a las tecnologías de asistencia un orden de contenido incorrecto. Si se utiliza marcado para anular el algoritmo bidireccional, el contenido se presenta visualmente en el orden correcto y, al mismo tiempo, se expone a las tecnologías de asistencia en el orden correcto.
Cuando se presentan visualmente, los caracteres de espacio en blanco, como el espacio o el tabulador, pueden no parecer parte del contenido. Sin embargo, cuando se insertan en el contenido para controlar el formato visual, pueden interferir en el significado del contenido.
A una escala mayor, controlar la colocación de bloques de contenido en un documento HTML mediante tablas de maquetación puede producir una presentación en la que la información relacionada aparece junta visualmente, pero separada en el flujo del contenido. Dado que las tablas de maquetación se leen fila por fila, si el pie de una ilustración se coloca en la fila siguiente a la ilustración, puede resultar imposible asociar el pie con la imagen.
Ejemplos
Una página web de una exposición de un museo contiene una barra de navegación con una larga lista de enlaces. La página también contiene la imagen de uno de los cuadros de la exposición, un encabezado para el cuadro y una descripción detallada del mismo. Los enlaces de la barra de navegación forman una secuencia significativa. El encabezado, la imagen y el texto de la descripción también forman una secuencia significativa. Se utiliza CSS para colocar los elementos en la página.
HTML
<h1>My Museum Page</h1>
<ul id="nav">
<li><a href="#">Link 1</a></li>
...
<li><a href="#">Link 10</a></li>
</ul>
<div id="description">
<h2>Mona Lisa</h2>
<div>
<img src="img.png" alt="Mona Lisa">
</div>
<p>...detailed description of the picture...</p>
</div>CSS
ul#nav {
float: left;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #063;
}
ul#nav a {
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #063;
}
div#description {
margin-left: 11em;
}Pruebas
Procedimiento
- Linealizar el contenido utilizando un método estándar para la tecnología (por ejemplo, eliminando los estilos de maquetación o ejecutando una herramienta de linealización).
- Comprobar si el orden del contenido produce el mismo significado que el original.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G57 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
