Técnica Técnicas generales WCAG 2.2
G146Usar un diseño fluido que se adapte al ancho disponible
Nombre oficial en el W3C: Usar una maquetación líquida
En pocas palabras
En un diseño fluido, las zonas de la página crecen o encogen con el texto y con la ventana. Cuando no caben una al lado de otra, pasan a la línea siguiente, igual que las palabras de un párrafo. Así se puede agrandar el texto sin que aparezca una barra de desplazamiento horizontal.
Por qué es importante
Las personas con baja visión agrandan el texto para leerlo. Si las columnas tienen un ancho fijo, el texto se corta o hay que moverse a izquierda y derecha en cada línea.
Leer así es agotador y es fácil perderse. Un diseño fluido mantiene el orden de lectura y funciona en móviles, tabletas y pantallas grandes.
Cómo se hace
- Defina el ancho de las zonas con unidades relativas (
%,em,rem) en lugar de píxeles fijos. - Coloque las columnas con CSS que permita que pasen abajo cuando no caben, como
flex-wrapo CSS Grid. - Use
max-widthen lugar dewidthfijo en contenedores e imágenes. - Mantenga el mismo orden en el código y en pantalla, para que el orden de lectura no cambie al recolocarse.
- Pruebe varios tamaños de texto: un buen diseño fluido requiere ajustes.
Cómo comprobarlo
- Abra la página en el navegador.
- Aumente el texto al 200 %, con el zoom o con la opción de tamaño de letra del navegador.
- Compruebe que no aparece desplazamiento horizontal y que no hay texto cortado o superpuesto.
- Estreche la ventana y compruebe que las columnas pasan abajo en un orden lógico.
Ejemplo
Tres columnas que se reparten el ancho y pasan abajo cuando ya no caben.
.columnas {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.columnas > div {
flex: 1 1 15em;
}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 G146 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
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 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 G146 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.