Técnica Técnicas generales WCAG 2.2
G57Ordenar el contenido del código en una secuencia con sentido
Nombre oficial en el W3C: Ordenar el contenido en una secuencia significativa
En pocas palabras
El orden en que el contenido aparece en el código debe tener sentido al leerlo de corrido. Los lectores de pantalla leen en ese orden, no en el que se ve en pantalla. Si el diseño coloca los bloques con CSS, el código debe mantener igualmente un orden lógico.
Por qué es importante
Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) sigue el orden del código. Lo mismo ocurre al ver la página sin estilos, en modo lectura o en el móvil en una sola columna.
Si el código está desordenado, el texto pierde sentido. Por ejemplo, el pie de una foto se lee lejos de la foto, o el precio de un producto se separa de su nombre.
Cómo se hace
- Escriba el HTML en el orden en que se debe leer: cabecera, menú, contenido principal, barra lateral y pie.
- Mantenga juntos los elementos relacionados: un título con su texto, una imagen con su pie, un campo con su etiqueta.
- Coloque los bloques en pantalla con CSS (Grid o Flexbox). Cuidado con
orderyrow-reverse: solo cambian el orden visual, así que úselos solo si ambos órdenes tienen sentido. - No use tablas para maquetar. Se leen fila a fila y separan lo que en pantalla aparece unido.
- No use espacios ni tabuladores para alinear texto en columnas. Se leen como texto y rompen el sentido.
- Si mezcla idiomas de distinta dirección, como árabe y español, use
diro<bdo>en lugar de mover los signos de puntuación en el código.
Cómo comprobarlo
- Desactive los estilos de la página. En Firefox: menú «Ver» › «Estilo de página» › «Sin estilo».
- Lea el contenido de arriba abajo y compruebe que tiene sentido y que cada elemento va junto a lo que le corresponde.
- Escuche la página con un lector de pantalla, como NVDA o VoiceOver, en lectura continua.
- Compare el orden leído con el visual en las zonas con columnas, tarjetas o elementos colocados con CSS.
Ejemplo
Ficha de producto con nombre, imagen, precio y botón en un orden lógico; el CSS solo sube la imagen en pantalla.
<style>
.producto { display: flex; flex-direction: column; }
.producto img { order: -1; } /* solo cambia la posición visual */
</style>
<article class="producto">
<h2>Silla de oficina Ergo</h2>
<img src="silla.jpg" alt="Silla negra con reposacabezas">
<p>Precio: 129 €</p>
<button type="button">Añadir a la cesta</button>
</article>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G57 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G57 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.