Fallo común WCAG 2.2

F1Contenido que cambia de sentido al reordenarlo solo con CSS

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.2 debido a cambiar el significado del contenido al posicionar la información con CSS

En pocas palabras

Este error ocurre cuando el CSS coloca los textos en pantalla en un orden distinto al del código, y ese cambio altera el significado. Los lectores de pantalla y el teclado siguen el orden del código, no el visual. La persona recibe la información desordenada. La solución es escribir el HTML ya en el orden correcto.

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 HTML. No sabe que el CSS ha movido un texto a otra columna.

Imagine un horario con dos columnas, «Mañanas» y «Tardes», montado con position: absolute. Si en el código las horas están mezcladas, la persona oye «Mañanas, Tardes, 9:00, 16:00, 14:00, 19:00». No puede saber qué hora va con cada turno. Lo mismo le pasa a quien ve la página sin estilos o con sus propios estilos.

Cómo evitarlo

Escriba el HTML en el orden en que debe leerse.
Use los elementos que dan estructura: encabezados, listas, tablas de datos o listas de definición. No monte columnas con span sueltos colocados a mano.
Use el CSS solo para el aspecto. Grid, flexbox o float pueden crear columnas sin cambiar el orden del código.
Tenga cuidado con order, flex-direction: row-reverse y la colocación en grid. Si cambian el orden, compruebe que el sentido se mantiene.
Si el orden no cambia el sentido, no hay fallo. Por ejemplo, una barra lateral con noticias independientes.

Cómo comprobarlo

Desactive los estilos. En Firefox, vaya al menú Ver, Estilo de página, Sin estilo. También sirve una extensión como Web Developer.
Lea el contenido de arriba abajo. Compruebe que tiene el mismo sentido que con el diseño.
Recorra la página con un lector de pantalla (NVDA o VoiceOver) y con Tab. El orden debe ser lógico.
Busque en el CSS position: absolute, order y row-reverse, y revise qué mueven.

Ejemplo

Horario de una oficina: el HTML sigue el orden de lectura y el CSS solo coloca las columnas.

<section class="horario">
  <h2>Horario de atención</h2>
  <dl class="turnos">
    <div><dt>Mañanas</dt><dd>De 9:00 a 14:00</dd></div>
    <div><dt>Tardes</dt><dd>De 16:00 a 19:00</dd></div>
  </dl>
</section>
<style>
  .turnos { display: grid; grid-template-columns: 1fr 1fr; }
</style>

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 F1 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 que admiten CSS.

Descripción

Este documento describe la condición de fallo que se produce cuando se utiliza CSS, en lugar de marcado estructural, para modificar la disposición visual del contenido y la disposición modificada cambia el significado del contenido. Mediante las propiedades de posicionamiento de CSS, el contenido puede mostrarse en cualquier posición de la ventana gráfica del usuario. El orden en que los elementos aparecen en pantalla puede ser distinto del orden en que se encuentran en el documento fuente. Las tecnologías de asistencia se basan en el código fuente o en otro orden determinado por software para presentar el contenido en la secuencia correcta. Por tanto, es importante no depender de CSS para posicionar visualmente el contenido en una secuencia concreta si esa secuencia da lugar a un significado distinto del que tiene el orden de lectura determinado por software.

Ejemplos

El siguiente ejemplo muestra cómo se ha usado CSS de forma indebida para crear un conjunto de columnas. Además, el texto aparece visualmente en el navegador en un orden distinto al del marcado.

En este ejemplo se define una clase para cada objeto que se posiciona. Cuando se aplican las hojas de estilo, el texto aparece en dos columnas. Los elementos de las clases "menu1" (Products, «Productos») y "menu2" (Locations, «Ubicaciones») aparecen como encabezados de columna. "Telephones, Computers, and Portable MP3 Players" («Teléfonos, Ordenadores y Reproductores MP3 portátiles») se listan bajo Products, y "Idaho" y "Wisconsin" se listan bajo Locations (obsérvese el orden distinto de Idaho y Wisconsin en el orden del código fuente).

Como no se han utilizado los elementos estructurales adecuados, cuando no se aplican las hojas de estilo todo el texto aparece en una sola línea en el orden del código fuente: "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho."

Este es el contenido HTML:

<div class="box">      
     <span class="menu1">Products</span>       
     <span class="menu2">Locations</span>       
     <span class="item1">Telephones</span>       
     <span class="item2">Computers</span>       
     <span class="item3">Portable MP3 Players</span>       
     <span class="item5">Wisconsin</span>       
     <span class="item4">Idaho</span>
</div>

Estos son los estilos del contenido anterior:

.menu1 { 
     position: absolute; 
     top: 3em; 
     left: 0em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}        
.menu2 { 
     position: absolute; 
     top: 3em; 
     left: 10em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}      
.item1 { 
     position: absolute; 
     top: 7em; 
     left: 0em; 
     margin: 0px 
}      
.item2 { 
     position: absolute; 
     top: 8em; 
     left: 0em; 
     margin: 0px 
}      
.item3 { 
     position: absolute; 
     top: 9em; 
     left: 0em; 
     margin: 0px 
}      
.item4 { 
     position: absolute; 
     top: 7em; 
     left: 14em; 
     margin: 0px 
}      
.item5 { 
     position: absolute; 
     top: 8em; left: 14em; 
     margin: 0px 
}      
#box { 
     position: absolute; 
     top: 5em; 
     left: 5em 
}

Una solución mejor para este contenido sería utilizar elementos con más significado, como una tabla o una lista de definiciones.

Pruebas

Procedimiento

Para el contenido que utiliza CSS para el posicionamiento:

Identificar los elementos de contenido que utilizan CSS para el posicionamiento.
Comprobar que el orden de lectura del contenido es correcto y que el significado del contenido se conserva en relación con la página o el contexto circundante, mediante uno de los métodos siguientes:
- Inspección del código: revisar el código HTML para determinar la secuencia lógica de lectura.
- Inspección del árbol de accesibilidad: examinar el árbol de accesibilidad para confirmar el orden de lectura.
- Prueba con tecnología de asistencia: usar un lector de pantalla para comprobar cómo se lee en voz alta el contenido.
- Prueba visual sin posicionamiento CSS: eliminar los estilos de posicionamiento y observar la secuencia visual de lectura.

Resultados esperados

Si alguna de las opciones de la comprobación n.º 2 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F1 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.