Técnica Técnicas generales WCAG 2.2
G146Usar una maquetación líquida
En resumen
Esta técnica propone definir las regiones de la página con unidades relativas al texto y colocarlas como cajas flotantes que se reorganizan en nuevas filas cuando no caben, de modo que el contenido se adapta al ancho disponible sin generar barras de desplazamiento horizontal. Beneficia a quienes amplían el tamaño del texto o usan pantallas pequeñas o de distintas resoluciones, y conviene aplicarla desde el diseño inicial de cualquier sitio web.
Aplicabilidad
Se aplica a todas las tecnologías.
Descripción
El objetivo de esta técnica es poder presentar el contenido sin introducir barras de desplazamiento horizontal, utilizando técnicas de maquetación que se adapten al espacio horizontal disponible. Las maquetaciones líquidas definen regiones de la página que cambian de tamaño junto con el texto y que, además, se reajustan según sea necesario para mostrar la región en la pantalla. Aunque la disposición exacta varía, la relación entre los elementos y el orden de lectura se mantienen. Es una forma eficaz de crear diseños que se presentan bien en distintos dispositivos y para usuarios con distintas preferencias de tamaño de fuente.
Los principios básicos de las maquetaciones líquidas son:
- Definir el tamaño de las regiones de la página con unidades que hagan que la región se escale en relación con el texto, de modo que se agranden o se reduzcan cuando el texto se agranda o se reduce;
- Colocar las regiones de la página como una fila de cajas flotantes adyacentes, que pasan a nuevas filas cuando es necesario, de forma muy parecida a como saltan de línea las palabras de un párrafo.
Pueden lograrse maquetaciones líquidas complejas anidando regiones, creando así maquetaciones líquidas localizadas dentro de una maquetación líquida mayor. Incluso las maquetaciones líquidas sencillas requieren destreza de diseño para obtener buenos resultados visuales con una amplia gama de tamaños de texto, pero las maquetaciones líquidas bien diseñadas pueden ser el diseño de página más eficaz.
Ejemplos
Maquetación líquida sencilla en HTML y CSS
El siguiente ejemplo, bastante sencillo, utiliza HTML y CSS para crear una maquetación líquida. Las tres columnas ajustan su tamaño cuando se ajusta el tamaño del texto. Cuando la anchura horizontal total supera la anchura disponible para las columnas, la última columna salta para situarse debajo de la columna anterior, en lugar de a su lado. El tamaño de fuente puede aumentarse sin que se recorte el contenido ni aparezca desplazamiento horizontal, hasta que la palabra más larga deje de caber en una columna. Este ejemplo concreto utiliza tamaños en porcentaje para las columnas y las define como regiones flotantes mediante la propiedad "float".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Basic Liquid Layout</title>
<style>
.column {
border-left: 1px solid green;
padding-left:1%;
float: left;
width: 32%;
}
.column:nth-of-type(1){
border:0;
}
footer {
border-top: 1px solid green;
clear: both;
}
</style>
</head>
<body>
<h1>WCAG Example</h1>
<h2>Text in Three Columns</h2>
<div class="column">
<h3>Block 1</h3>
<p>The objective of this technique is to be able to present content
without introducing horizontal scroll bars by using layout
techniques that adapt to the available horizontal space.</p>
</div>
<div class="column">
<h3>Block 2</h3>
<p>This is a very simple example of a page layout that adapts as the
text size changes.</p>
</div>
<div class="column">
<h3>Block 3</h3>
<p>For techniques that support more complex page layouts, see the
Resources listed below.</p>
</div>
<footer>
<p>Footer text</p>
</footer>
</body>
</html>Pruebas
Procedimiento
- Mostrar el contenido en un agente de usuario.
- Aumentar el tamaño del texto al 200 %.
- Comprobar si todo el contenido y toda la funcionalidad están disponibles sin desplazamiento horizontal.
Resultados esperados
- La comprobación n.º 3 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 G146 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.
