F1Fallo del criterio de conformidad 1.3.2 debido a cambiar el significado del contenido al posicionar la información con CSS

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.

• Ejemplo de fallo por posicionamiento con CSS
• Ejemplo de fallo por posicionamiento con CSS con los estilos eliminados