1.4.12 Espaciado de texto
Criterio
En el contenido implementado mediante lenguajes de marcado que admiten las siguientes propiedades de estilo de texto, no se produce ninguna pérdida de contenido o funcionalidad cuando se establecen los siguientes valores y no se modifica ninguna otra propiedad de estilo:
- Altura de línea (interlineado) de al menos 1,5 veces el tamaño de fuente.
- Espacio entre letras de al menos 0,12 veces el tamaño de fuente.
- Espacio entre palabras de al menos 0,16 veces el tamaño de fuente.
- Espacio que sigue a los párrafos de al menos 2 veces el tamaño de fuente.
Excepción: Los lenguajes humanos y las escrituras que no utilizan una o más de estas propiedades de estilo de texto en texto escrito pueden verificarse conforme usando solo las propiedades aplicables a ese idioma o escritura.
¿Qué es el espaciado de texto?
Este criterio garantiza que cuando un usuario sobrescribe los estilos de espaciado de texto de una página (ya sea mediante una hoja de estilos personalizada, una extensión del navegador o ajustes de accesibilidad del sistema), el contenido no se pierda ni deje de funcionar.
El criterio no requiere que tú, como autor, implementes esos estilos de espaciado. Solo exige que tu diseño sea lo suficientemente flexible como para tolerarlos sin romperse.
Mismo texto · Distinto espaciado
La accesibilidad digital es el conjunto de prácticas y estándares que garantizan que todas las personas puedan usar la web independientemente de sus capacidades.
line-height: 1.4 · letter-spacing: 0La accesibilidad digital es el conjunto de prácticas y estándares que garantizan que todas las personas puedan usar la web independientemente de sus capacidades.
line-height: 1.5 · letter-spacing: 0.12em · word-spacing: 0.16emEl contenido debe seguir siendo completamente legible y funcional en ambas condiciones. Si en la columna derecha algún texto quedara cortado, un botón se volviera inaccesible o un componente se rompiera visualmente, habría un fallo de este criterio.
Las 4 métricas de espaciado
El criterio define cuatro propiedades CSS que deben tolerarse cuando se aplican simultáneamente. Todos los valores son relativos al tamaño de fuente del elemento (em).
line-height Si el texto es 16 px, la altura mínima es 24 px.
letter-spacing En texto de 16 px equivale a ≈ 1,9 px adicionales entre caracteres.
word-spacing En texto de 16 px equivale a ≈ 2,6 px adicionales entre palabras.
margin-bottom / padding-bottom Si el texto es 16 px, el margen inferior mínimo es 32 px.
Importante: este criterio no requiere que implementes estos valores, sino que tu contenido no se rompa cuando un usuario los aplica desde fuera. No se aplica a PDFs, imágenes de texto ni contenido en canvas.
¿Por qué importa?
Las personas con dislexia, déficit de atención o baja visión frecuentemente necesitan un espaciado mayor para discriminar las letras con facilidad, seguir las líneas de texto sin perderlas y reducir la fatiga visual al leer bloques largos.
Muchas de estas personas usan extensiones de navegador, hojas de estilos personalizadas o el modo de lectura del sistema para aumentar el espaciado automáticamente. Si tu CSS usa alturas fijas que recortan el texto, contenedores con overflow: hidden sin espacio suficiente o componentes cuyo layout se rompe al ampliar el interlineado, estas personas pierden acceso al contenido.
Este criterio asegura que la personalización del usuario no sea neutralizada por el diseño del sitio.
¿Quién se ve afectado?
Las personas con dislexia se benefician especialmente del aumento del espaciado entre letras y palabras para reducir la confusión entre caracteres similares. Las personas con baja visión necesitan mayor interlineado para seguir líneas largas de texto. Las personas con déficit de atención encuentran más fácil mantener el foco con bloques de texto mejor espaciados. También afecta a personas que usan alto contraste o modos de lectura del navegador que aplican sus propios estilos tipográficos.
Implementación
La clave es usar unidades relativas y evitar alturas fijas que no crezcan con el contenido.
CSS: usa unidades relativas
/* ✅ CORRECTO: el contenedor crece con el contenido */
.card {
padding: 1.5rem;
/* sin height fijo */
}
.card p {
line-height: 1.6; /* relativo al font-size */
margin-bottom: 1em; /* relativo */
}/* ❌ INCORRECTO: altura fija recorta texto con mayor interlineado */
.card {
height: 120px; /* fijo — puede recortar */
overflow: hidden; /* oculta el desbordamiento */
}Cómo probar con el bookmarklet
El método más rápido para verificar este criterio es usar el bookmarklet de espaciado de texto del proyecto Text Spacing Editor (Steve Faulkner). Al activarlo, aplica automáticamente los cuatro valores del criterio a toda la página. Si algo se rompe visualmente, hay un fallo.
/* Los valores que aplica el bookmarklet */
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p {
margin-bottom: 2em !important;
}Cómo detectar problemas
Los síntomas más comunes de fallo son: texto cortado por overflow: hidden con altura fija; botones cuyo texto se sale del área clicable; tooltips o etiquetas que se solapan entre sí; y componentes de acordeón o tab que pierden su altura colapsada.
Fallos comunes
Estos son los patrones de código que con más frecuencia provocan fallos en este criterio:
Ejemplos de fallos típicos
Causas raíz frecuentes
Las causas más comunes son: uso de height fijo en contenedores de texto; overflow: hidden sin min-height que permita crecer; white-space: nowrap en textos que deberían envolver; y posicionamiento absoluto de elementos que asume un interlineado concreto.
Técnicas
El W3C documenta las siguientes técnicas para superar este criterio:
- C36 — Permitir que el espaciado entre letras cambie sobrescribiendo el estilo CSS.
- C35 — Permitir que el espaciado entre palabras cambie sobrescribiendo el estilo CSS.
- C8 — Usar el espaciado entre letras CSS para controlar el espaciado de un texto.
- C21 — Especificar el interlineado en unidades CSS.
- C28 — Especificar el tamaño de los contenedores de texto usando unidades em.
La técnica de prueba más recomendada en la práctica es la prueba manual con bookmarklet, que aplica todos los valores del criterio de una sola vez y permite verificar visualmente si hay pérdida de contenido.
Errores documentados
- F104 — El texto no puede ser espaciado sin perder contenido o funcionalidad.
Criterios relacionados
- 1.4.8 Presentación visual — También aborda el espaciado del texto, pero a nivel AAA y con requisitos más específicos sobre ancho de columna, alineación y contraste.
- 1.4.4 Cambiar el tamaño del texto — Exige que el texto pueda escalarse al 200% sin pérdida de contenido. Complementario a 1.4.12.
- 1.4.10 Reflujo — Exige que el contenido sea legible a 320 px sin scroll horizontal. Comparte el principio de adaptabilidad con 1.4.12.