WCAG 1.4.12: Espaciado del texto

Qué Significa Esta Regla

WCAG 1.4.12 Espaciado del texto pertenece a la Pauta 1.4 (Distinguible) y se dirige a un problema muy específico: muchas personas con dificultades de lectura, baja visión o discapacidades cognitivas necesitan anular el espaciado de texto predeterminado de una página web para que el contenido sea legible para ellas. Si el diseño de un sitio se rompe —el texto se corta, los botones se superponen, las etiquetas de los formularios desaparecen o el contenido se vuelve inalcanzable— cuando se incrementa el espaciado, el sitio no cumple este criterio.

El criterio define cuatro propiedades de espaciado que deben seguir siendo funcionales cuando se establecen simultáneamente en los siguientes valores mínimos:

• Altura de línea (espaciado entre líneas): al menos 1.5 veces el tamaño de fuente del elemento.
• Espaciado entre letras (tracking): al menos 0.12 veces el tamaño de fuente del elemento.
• Espaciado entre palabras: al menos 0.16 veces el tamaño de fuente del elemento.
• Espaciado después de los párrafos: al menos 2 veces el tamaño de fuente del elemento.

Una página cumple este criterio si, después de aplicar las cuatro anulaciones, las personas usuarias aún pueden leer todo el texto, operar todos los controles interactivos y acceder a todo el contenido de la página sin desplazamiento horizontal en una ventana gráfica de 320 píxeles CSS de ancho, sin recortes ni truncamientos y sin que el contenido se superponga hasta el punto de ser ilegible o inutilizable.

Una página no cumple si al aplicar estas anulaciones se produce cualquiera de lo siguiente: el texto es cortado por un contenedor con una altura fija y overflow: hidden; las etiquetas interactivas o el texto de los botones desaparecen; los menús desplegables o tooltips se superponen al contenido principal de forma inutilizable; o cualquier contenido se vuelve permanentemente inaccesible.

Es importante destacar que el criterio no exige que establezcas tú mismo esos valores de espaciado. Solo exige que tu diseño no se rompa cuando la persona usuaria (o su tecnología de apoyo, extensión del navegador u hoja de estilo de usuario) aplica esas anulaciones. Los valores de espaciado son umbrales para las pruebas, no requisitos de diseño.

Hay una excepción explícita: los componentes en los que una presentación visual concreta es esencial para la información que se transmite —por ejemplo, un logotipo, una partitura musical renderizada en SVG o una imagen CAPTCHA— están exentos. Sin embargo, esta excepción es limitada y no debe utilizarse como excusa general para excluir menús de navegación o componentes tipo tarjeta.

Este criterio se aplica a todo el contenido de texto renderizado en el navegador mediante CSS, incluidos encabezados, párrafos, etiquetas, texto de botones, texto de marcador de posición, elementos de lista, celdas de tabla y enlaces de navegación. No se aplica al texto renderizado dentro de imágenes o elementos canvas, ya que estos no se ven afectados por las anulaciones de espaciado de CSS.

Por Qué Importa

El espaciado del texto afecta directamente a personas con una amplia variedad de discapacidades y perfiles de lectura. Según la Organización Mundial de la Salud, aproximadamente 2.2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual o ceguera, y muchas de ellas utilizan el zoom del navegador u hojas de estilo personalizadas para hacer el contenido legible. Más allá de la discapacidad visual, se estima que entre el 15 y el 20% de la población mundial tiene dislexia, una condición para la cual el aumento del espaciado entre letras, entre palabras y de la altura de línea son intervenciones de legibilidad demostradas, respaldadas por investigaciones que incluyen estudios publicados en la revista Annals of Dyslexia.

Para las personas usuarias con discapacidades cognitivas como TDAH o dificultades de procesamiento, un espaciado de texto muy ajustado incrementa la carga cognitiva de la lectura al dificultar el seguimiento de las líneas y la distinción de palabras individuales. Estas personas suelen instalar extensiones de navegador como el Readability Bookmarklet, Stylus o configuraciones de accesibilidad a nivel de plataforma que aplican espaciados personalizados a todos los sitios web que visitan.

Considera un escenario concreto: una estudiante universitaria con dislexia visita una plataforma de comercio electrónico turca para consultar la política de devoluciones de un producto antes de un examen. Utiliza una extensión del navegador que establece la altura de línea en 1.7 y el espaciado entre letras en 0.14em de forma global. En la página de detalle del producto, el texto de la política de devoluciones se encuentra dentro de un <div> de altura fija con estilo height: 120px; overflow: hidden;. Con su espaciado personalizado activo, solo son visibles las dos primeras líneas y no hay ningún mecanismo para mostrar el resto. No puede completar su tarea y pierde la confianza en la plataforma. Este es precisamente el fallo que WCAG 1.4.12 está diseñado para evitar.

Más allá del acceso para personas con discapacidad, hay beneficios secundarios. Los diseños flexibles y resistentes a variaciones de espaciado tienden a ser más robustos en mercados internacionales: el texto en turco, por ejemplo, a menudo contiene formas de palabras más largas debido a la morfología aglutinante, y los diseños que no pueden adaptarse a variaciones de espaciado también tienden a romperse con cadenas más largas. Los diseños accesibles también mejoran el SEO de forma indirecta: el contenido que es legible y accesible tiende a tener tasas de rebote más bajas y mejores señales de interacción, factores que los motores de búsqueda tienen en cuenta en sus rankings.

Reglas Relacionadas de Axe-core

WCAG 1.4.12 requiere pruebas manuales y no puede verificarse completamente solo con herramientas automatizadas. Esto se debe a que los motores automatizados no pueden predecir cómo se comportará un diseño bajo anulaciones de estilos aplicadas por la persona usuaria sin aplicar realmente esas anulaciones y medir el resultado renderizado, un proceso que requiere inspección visual o una comparación de renderizado en modo sin interfaz gráfica. El motor axe-core no incluye una regla automatizada específica para 1.4.12 por esta razón.

• Pruebas manuales con el Text Spacing Bookmarklet: El enfoque de prueba recomendado es el Text Spacing Bookmarklet creado por Steve Faulkner (ahora mantenido por la comunidad de accesibilidad). Este bookmarklet inyecta una hoja de estilo en la página actual que establece simultáneamente las cuatro propiedades de espaciado en sus valores mínimos umbral. La persona evaluadora comprueba visualmente (o con un lector de pantalla) si algún contenido está recortado, superpuesto o inaccesible. El enfoque del bookmarklet es el estándar mencionado en el propio documento de Understanding del W3C para 1.4.12.
• Por qué la automatización se queda corta: Los escáneres automatizados como axe-core analizan el DOM y los estilos calculados tal como existen en el momento del escaneo. No simulan anulaciones de hojas de estilo de usuario ni vuelven a renderizar la página para detectar desbordamientos de diseño o recortes causados por esas anulaciones. Un contenedor con overflow: hidden y una altura fija pasará un escaneo automatizado porque, de forma aislada, no es un error de accesibilidad: solo se convierte en uno cuando se incrementa el espaciado. Solo aplicando la anulación y observando el resultado la persona evaluadora puede confirmar un fallo.
• Comprobaciones automatizadas complementarias: Aunque ninguna regla de axe se corresponde directamente con 1.4.12, las personas revisoras también deben tener en cuenta que la regla scrollable-region-focusable de axe y las reglas de contraste de color pueden sacar a la luz problemas relacionados que contribuyen a una mala experiencia de espaciado del texto. Además, la auditoría de accesibilidad de Lighthouse puede señalar contenedores de tamaño fijo en ciertos contextos, aunque no específicamente por el cumplimiento del espaciado.

Cómo Probar

1. Instala el Text Spacing Bookmarklet. Navega a la página del Text Spacing Bookmarklet de Steve Faulkner (accesible a través del documento Understanding del W3C o mediante una búsqueda web de "text spacing bookmarklet WCAG"). Arrastra el bookmarklet a la barra de marcadores de tu navegador. Alternativamente, crea un marcador manualmente y pega el JavaScript del bookmarklet como URL.
2. Abre la página que vas a probar en tu navegador con el nivel de zoom predeterminado (100%). Navega a la página o componente que quieres evaluar —por ejemplo, una página de listado de productos, un formulario de pago o un menú de navegación.
3. Activa el bookmarklet. Haz clic en el bookmarklet. Esto inyecta CSS que establece line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important y el margin-bottom de p en 2em !important en toda la página.
4. Inspecciona visualmente toda la página. Desplázate por todas las áreas de contenido. Busca: texto que se corta en la parte inferior de un contenedor; etiquetas de botones o texto de enlaces que han desaparecido o están parcialmente ocultos; menús de navegación o desplegables donde los elementos se superponen; campos de formulario donde el texto de marcador de posición o la etiqueta está recortado; y cuadros de diálogo modales o tooltips donde el contenido se desborda más allá del límite del contenedor.
5. Interactúa con los elementos interactivos. Recorre con la tecla Tab todos los elementos enfocables, activa desplegables, abre modales y envía formularios. Confirma que todos los controles interactivos siguen siendo operables y que sus etiquetas visibles son completamente legibles con el espaciado aplicado.
6. Prueba con un lector de pantalla para detectar pérdida funcional. Con el bookmarklet aún activo, utiliza NVDA con Firefox o JAWS con Chrome para navegar por la página mediante encabezados, regiones y elementos interactivos. Confirma que el orden de lectura y el contenido anunciado coinciden con lo que ve una persona vidente. Utiliza VoiceOver en Safari en macOS o iOS para cubrir las plataformas de Apple.
7. Prueba con un ancho de ventana gráfica de 320px. Redimensiona la ventana de tu navegador a 320 píxeles CSS de ancho (o utiliza el modo adaptable de las DevTools del navegador). Reactiva el bookmarklet. Confirma que el contenido sigue siendo accesible sin desplazamiento horizontal y que el texto no se recorta con anchos de ventana pequeños combinados con un espaciado incrementado.
8. Documenta los fallos. Para cada fallo, registra: el tipo de elemento, su clase o ID de CSS, la propiedad de espaciado específica que causa el fallo y una captura de pantalla antes y después de la activación del bookmarklet.

Cómo Corregir

Contenedor de altura fija que recorta texto — Incorrecto

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Contenedor de altura fija que recorta texto — Correcto

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Etiqueta de botón recortada por altura fija del botón — Incorrecto

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Etiqueta de botón recortada por altura fija del botón — Correcto

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Tooltip o desplegable que se desborda sin scroll — Incorrecto

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Tooltip o desplegable que se desborda sin scroll — Correcto

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Espaciado de párrafos que rompe el diseño de la tarjeta — Incorrecto

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Espaciado de párrafos que rompe el diseño de la tarjeta — Correcto

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Errores Comunes

• Usar height en lugar de min-height en contenedores de texto. Una height fija en cualquier elemento que contenga texto provocará recortes en cuanto la persona usuaria aumente la altura de línea o el espaciado entre letras. Sustituye todas las alturas fijas en contenedores que contienen texto por min-height para que el contenedor pueda crecer.
• Establecer overflow: hidden en contenedores que contienen texto de párrafo. Esta es la causa más común de fallos de 1.4.12. El desbordamiento oculto recorta el texto que se expande verticalmente cuando aumenta el espaciado. Utiliza overflow: visible o overflow: auto según el contexto de diseño.
• Usar white-space: nowrap en etiquetas de botones o enlaces sin suficiente flexibilidad del contenedor. Cuando aumenta el espaciado entre letras, el texto con nowrap puede desbordar su elemento padre o ser recortado, especialmente en elementos de navegación de ancho fijo.
• Posicionar absolutamente elementos de pie de página o de acción dentro de una tarjeta de altura fija. Cuando el contenido de la tarjeta crece debido a las anulaciones de espaciado, los elementos posicionados absolutamente en la parte inferior de la tarjeta se superponen al texto. Utiliza un diseño de columna con flexbox en su lugar.
• Aplicar max-height con overflow: hidden a secciones colapsables que están en su estado expandido. Los acordeones animados que se expanden hasta un valor de max-height calculado en función de medidas en píxeles recortarán el texto en ese límite de píxeles cuando se anule el espaciado, incluso cuando estén completamente abiertos.
• Usar CSS line-clamp (webkit-line-clamp) sin un mecanismo visible para expandir el contenido completo. Limitar el texto a un número fijo de líneas es aceptable solo si existe un control claramente etiquetado y accesible por teclado para mostrar el contenido completo. Limitar sin ningún mecanismo de expansión incumple 1.4.12.
• Confiar en JavaScript para establecer dinámicamente alturas de elementos en píxeles. Los scripts que miden las alturas de los elementos y luego fijan esos valores de píxeles como estilos en línea bloquearán el contenedor en un tamaño que ignora las anulaciones de espaciado de la persona usuaria. Utiliza tamaños intrínsecos y deja que CSS gestione el diseño.
• Suponer que los escaneos automatizados de accesibilidad detectarán todos los fallos de 1.4.12. Los equipos que dependen exclusivamente de axe o Lighthouse sin ejecutar el Text Spacing Bookmarklet pasarán por alto todos los fallos de espaciado basados en el diseño. Las pruebas manuales con el bookmarklet son obligatorias para este criterio.
• No probar los menús de navegación y mega-menús con el bookmarklet. Los componentes de navegación se construyen con frecuencia con alturas en píxeles fijos y overflow hidden para crear un resultado visual pulido. También se encuentran entre los componentes que más suelen fallar en 1.4.12 porque el aumento del espaciado hace que los elementos del menú se ajusten a la siguiente línea y se recorten.
• Tratar los valores de espaciado como requisitos de diseño en lugar de umbrales de prueba. Algunos equipos responden a 1.4.12 actualizando sus estilos predeterminados para que coincidan con los valores umbral, lo cual es innecesario y puede entrar en conflicto con la intención de la persona diseñadora. El criterio solo exige que el diseño no se rompa cuando se aplican esos valores, no que sean los valores predeterminados.

Relación con la Normativa de Accesibilidad de Turquía

WCAG 1.4.12 Espaciado del texto es directamente relevante para el marco legal de accesibilidad emergente de Turquía. El desarrollo reciente más significativo es la Circular Presidencial 2025/10, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025. Esta circular establece obligaciones vinculantes para que una amplia gama de organizaciones garanticen la accesibilidad digital en toda su presencia web y aplicaciones móviles.

La circular abarca un amplio conjunto de tipos de entidades. Las instituciones y organismos públicos en todos los niveles de gobierno están obligados a cumplir. Las entidades del sector privado dentro de su alcance incluyen plataformas de comercio electrónico, bancos e instituciones financieras, hospitales y proveedores de servicios sanitarios, empresas de telecomunicaciones con 200,000 o más abonados, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE). Estas organizaciones están obligadas a cumplir con el nivel AA de conformidad con WCAG, que incluye 1.4.12, como parte de sus obligaciones en virtud de la circular.

El cumplimiento en el nivel AA también es un requisito previo para obtener el Accessibility Logo (Erişilebilirlik Logosu) emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı). Este logotipo indica a las personas usuarias, especialmente a aquellas con discapacidad, que un producto digital ha sido auditado y cumple la norma de accesibilidad requerida. Para las organizaciones que atienden a la comunidad de personas con discapacidad en Turquía —estimada en varios millones de personas, incluidas aquellas con discapacidades visuales, cognitivas y de lectura— el logotipo tiene un peso tanto reputacional como regulatorio.

En términos prácticos, una plataforma de comercio electrónico turca que utiliza contenedores de descripción de producto de altura fija con overflow: hidden, o un portal gubernamental cuyo menú de navegación recorta contenido cuando una persona usuaria aplica anulaciones de espaciado mediante una extensión del navegador o una configuración de accesibilidad del sistema operativo, no solo está fallando a sus personas usuarias, sino que también podría estar incumpliendo las obligaciones establecidas en la circular 2025/10. Los fallos de Espaciado del texto son especialmente relevantes para las personas usuarias turcas con dislexia y baja visión que dependen de herramientas de espaciado personalizado, y para quienes acceden a servicios gubernamentales o comerciales en dispositivos móviles donde las configuraciones de tamaño de texto del sistema operativo también pueden desencadenar inestabilidad del diseño similar a las anulaciones de espaciado.

Las organizaciones que busquen el Erişilebilirlik Logosu deben incluir una auditoría manual del espaciado del texto utilizando el Text Spacing Bookmarklet como paso obligatorio en su proceso de auditoría de accesibilidad, junto con el escaneo automatizado y las pruebas con lectores de pantalla. Corregir los fallos de 1.4.12 —principalmente sustituyendo alturas fijas por min-height, eliminando overflow: hidden innecesario de los contenedores de texto y adoptando técnicas de diseño CSS flexibles— suele ser posible sin cambios significativos de diseño y representa una mejora de alto valor y bajo coste para la accesibilidad de cualquier servicio digital turco.