Técnica CSS WCAG 2.2
C6Colocar el contenido con CSS sin perder la estructura del HTML
Nombre oficial en el W3C: Posicionar el contenido basándose en el marcado estructural
En pocas palabras
El CSS puede colocar cada bloque en cualquier lugar de la pantalla. La técnica consiste en marcar el contenido con los elementos HTML adecuados y en un orden lógico, y usar el CSS solo para la colocación visual. Así, si se quitan los estilos, el contenido sigue teniendo sentido y se lee 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, no la posición visual. Si el HTML está desordenado, la persona oye las piezas mezcladas.
Además, hay quien desactiva los estilos o usa los suyos propios para leer mejor. Por ejemplo, con letra muy grande o con colores de alto contraste. En esos casos solo queda la estructura del HTML.
Cómo se hace
- Escriba el HTML en el orden en que el contenido debe leerse.
- Use los elementos que dicen qué es cada cosa: encabezados, listas,
<dl>para pares término y descripción, tablas para datos. - Aplique las columnas, posiciones y márgenes solo con CSS (
grid,flex,position). - Evite que el CSS cambie el significado. Por ejemplo, no use
orderogrid-areapara mostrar un orden distinto del que se lee.
Cómo comprobarlo
- Desactive los estilos. En Firefox: menú Ver, Estilo de página, «Sin estilo».
- Lea la página de arriba abajo. El orden y las relaciones deben seguir siendo claros.
- Compruebe que encabezados, listas y tablas siguen pareciendo lo que son.
- Recorra la página con el tabulador o con un lector de pantalla. El orden debe coincidir con el visual.
Ejemplo
Un listado de servicios municipales y su dirección, marcado como lista de descripciones y mostrado en dos columnas con CSS.
<dl class="servicios">
<dt>Registro general</dt>
<dd>Plaza Mayor, 1</dd>
<dt>Biblioteca municipal</dt>
<dd>Calle Alfarería, 12</dd>
</dl>
<style>
.servicios { display: grid; grid-template-columns: 1fr 1fr; }
.servicios dd { margin: 0; }
</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 C6 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 compatibles con CSS
Descripción
El objetivo de esta técnica es mostrar cómo puede mejorarse la apariencia visual mediante hojas de estilo manteniendo al mismo tiempo una presentación con sentido cuando no se aplican las hojas de estilo. Con las propiedades de posicionamiento de CSS, el contenido puede mostrarse en cualquier posición de la ventana gráfica del usuario. Usar elementos estructurales garantiza que el significado del contenido pueda seguir determinándose cuando los estilos no están disponibles.
Ejemplos
En este ejemplo se ha aplicado marcado estructural (listas de descripción) al contenido. Se ha usado CSS para dar al contenido forma de columnas. Cada clase posiciona de forma absoluta el contenido en columnas y los márgenes se han puesto a 0 para anular el comportamiento predeterminado de los agentes de usuario, que muestran las listas de definición de HTML con el elemento dd sangrado.
Este es el contenido que se va a mostrar:
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</dd>
</dl>
</div>Este es el CSS que posiciona y da estilo a los elementos anteriores:
.item1 {
left: 0;
margin: 0;
position: absolute;
top: 7em;
}
.item2 {
left: 0;
margin: 0;
position: absolute;
top: 8em;
}
.item3 {
left: 0;
margin: 0;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0;
margin: 0;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}Cuando se aplican las hojas de estilo, los datos se muestran en dos columnas, «Products» (productos) y «Locations» (ubicaciones). Cuando no se aplican las hojas de estilo, el texto aparece como una lista de definición que conserva la estructura y el orden de lectura.
Pruebas
Procedimiento
Para el contenido que usa CSS para el posicionamiento:
- Eliminar la información de estilo del documento o desactivar el uso de hojas de estilo en el agente de usuario.
- Comprobar que se conservan las relaciones estructurales y el significado del contenido.
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 C6 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.