Técnica CSS WCAG 2.2
C28Especificar el tamaño de los contenedores de texto en unidades em
En resumen
Esta técnica consiste en definir la anchura y/o la altura de los contenedores que incluyen texto o que admiten entrada de texto (cajas de maquetación, campos de formulario, listas desplegables, casillas) en unidades em o rem, en lugar de píxeles. De este modo, cuando el usuario aumenta el tamaño del texto en su navegador, el contenedor crece con él y el texto no queda recortado. Beneficia a las personas con baja visión y a cualquiera que amplíe la letra.
Aplicabilidad
CSS
Descripción
El objetivo de esta técnica es especificar en unidades em la anchura y/o la altura de los contenedores que incluyen texto o que admiten la entrada de texto. Esto permitirá a los agentes de usuario compatibles con el cambio de tamaño del texto redimensionar los contenedores de texto en consonancia con los cambios en la configuración del tamaño del texto.
La anchura y/o la altura de los contenedores de texto que se han especificado con otras unidades corren el riesgo de que el texto se recorte, porque queda fuera de los límites del contenedor cuando se ha aumentado el tamaño del texto.
Los contenedores controlan por lo general la colocación del texto dentro de la página web y pueden incluir elementos de maquetación, elementos estructurales y controles de formulario.
Esta técnica utiliza unidades em, pero usar en su lugar unidades rem tendría el mismo efecto.
Ejemplos
Unidades em para los tamaños de un contenedor de maquetación que incluye texto
En este ejemplo, un elemento div, con el valor de id "nav_menu", se usa para situar el menú de navegación a lo largo del lado izquierdo del área de contenido principal de la página web. El menú de navegación consiste en una lista de enlaces de texto, con el valor de id "nav_list". El tamaño del texto de los enlaces de navegación y la anchura del contenedor se especifican en unidades em.
#nav_menu { width: 20em; height: 100em; }
#nav_list { font-size: 100%; }Unidades em para controles de formulario de texto
En este ejemplo, a los elementos input que contienen texto o que aceptan la entrada de texto por parte del usuario se les ha asignado class="form1". Se usan reglas CSS para definir el tamaño de fuente de estos elementos en porcentaje y su anchura en unidades em. Esto permitirá que el texto del control de formulario cambie de tamaño en respuesta a los cambios en la configuración del tamaño del texto sin quedar recortado (porque la anchura del propio control de formulario también cambia de tamaño según el tamaño de la fuente).
input.form1 { font-size: 100%; width: 15em; }Unidades em en listas desplegables
En este ejemplo, a los elementos select se les ha asignado class="pick". Se usan reglas CSS para definir el tamaño de fuente en porcentaje y la anchura en unidades em. Esto permitirá que el texto del control de formulario cambie de tamaño en respuesta a los cambios en la configuración del tamaño del texto sin quedar recortado.
select.pick { font-size: 100%; width: 10em; }Unidades em para controles de formulario que no son de texto
En este ejemplo, a los elementos input que definen casillas de verificación o botones de opción se les ha asignado el nombre de clase "choose". Se usan reglas CSS para definir la anchura y la altura de estos elementos en unidades em. Esto permitirá que el control de formulario cambie de tamaño en respuesta a los cambios en la configuración del tamaño del texto.
input.choose { width: 1.2em; height: 1.2em; }Pruebas
Procedimiento
- Identificar los contenedores que incluyen texto o que permiten la entrada de texto.
- Comprobar que la anchura y/o la altura del contenedor están especificadas en unidades
em.
Resultados esperados
- La comprobación n.º 2 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 C28 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.
