Regla de accesibilidad: El espaciado de texto en línea debe ser ajustable con hojas de estilo personalizadas

Acerca de esta regla de accesibilidad

Algunos usuarios necesitan ajustar el espaciado del texto para hacer que el contenido sea legible. Las personas con baja visión pueden aumentar el espaciado entre letras o palabras para reducir la aglomeración visual. Las personas con discapacidades cognitivas, dislexia o trastornos de déficit de atención a menudo tienen dificultades para seguir líneas de texto muy juntas — aumentar line-height, letter-spacing o word-spacing puede hacer que la lectura sea significativamente más fácil.

Cuando las propiedades de espaciado de texto se establecen en línea con !important, obtienen la especificidad más alta en la cascada CSS. Esto significa que las hojas de estilo de usuario, extensiones del navegador y herramientas de tecnología asistiva no pueden sobrescribir esos valores. El texto queda bloqueado en un espaciado fijo que puede ser difícil o imposible de leer para algunos usuarios.

Esta regla se relaciona con el Criterio de Éxito 1.4.12 de WCAG 2.1: Espaciado del texto (Nivel AA), que requiere que no haya pérdida de contenido o funcionalidad cuando los usuarios ajusten:

La altura de línea a al menos 1.5 veces el tamaño de la fuente
El espaciado después de párrafos a al menos 2 veces el tamaño de la fuente
El espaciado entre letras a al menos 0.12 veces el tamaño de la fuente
El espaciado entre palabras a al menos 0.16 veces el tamaño de la fuente

Si las declaraciones !important en línea impiden estos ajustes, el contenido falla este criterio.

Cómo solucionarlo

La solución es sencilla: no uses !important en atributos style en línea para line-height, letter-spacing o word-spacing. Tienes varias opciones:

Elimina !important de la declaración de estilo en línea. Sin !important, los usuarios pueden sobrescribir el valor con una hoja de estilo personalizada.
Mueve los estilos a una hoja de estilo externa o incorporada. Esta es generalmente la mejor aproximación porque separa el contenido de la presentación y da a los usuarios más control a través de la cascada.
Si !important es realmente necesario, aplícalo en una hoja de estilo en lugar de en línea. Los estilos !important en línea son virtualmente imposibles de sobrescribir para los usuarios, mientras que el !important a nivel de hoja de estilo aún puede ser sobrescrito por reglas !important del usuario.

Ten en cuenta que otras propiedades de estilo en línea como font-size no son marcadas por esta regla — solo las tres propiedades de espaciado de texto (line-height, letter-spacing, word-spacing) son verificadas.

Ejemplos

Incorrecto: Estilos en línea con `!important`

Estos ejemplos fallan porque !important en propiedades de espaciado de texto en línea impide las sobrescrituras del usuario.

<!-- line-height con !important — no puede ser sobrescrito -->

<p style="line-height: 1.5 !important;">
  Este texto está bloqueado a una altura de línea específica.
</p>

<!-- letter-spacing con !important — no puede ser sobrescrito -->

<p style="letter-spacing: 2px !important;">
  Este texto tiene un espaciado entre letras fijo.
</p>

<!-- word-spacing con !important — no puede ser sobrescrito -->

<p style="word-spacing: 4px !important;">
  Este texto tiene un espaciado entre palabras fijo.
</p>

<!-- Mixto: word-spacing está bien, pero letter-spacing tiene !important -->

<p style="word-spacing: 4px; letter-spacing: 2px !important; line-height: 1.8;">
  Incluso un !important en una propiedad de espaciado causa un fallo.
</p>

Correcto: Estilos en línea sin `!important`

Estos ejemplos pasan porque los usuarios pueden sobrescribir los valores en línea con una hoja de estilo personalizada.

<!-- line-height sin !important — sobrescribible -->

<p style="line-height: 1.5;">
  Los usuarios pueden ajustar esta altura de línea con una hoja de estilo personalizada.
</p>

<!-- letter-spacing sin !important — sobrescribible -->

<p style="letter-spacing: 2px;">
  Los usuarios pueden ajustar este espaciado entre letras.
</p>

<!-- word-spacing sin !important — sobrescribible -->

<p style="word-spacing: 4px;">
  Los usuarios pueden ajustar este espaciado entre palabras.
</p>

<!-- Múltiples propiedades de espaciado, todas sin !important -->

<p style="word-spacing: 4px; letter-spacing: 2px; line-height: 1.8;">
  Las tres propiedades de espaciado pueden ser sobrescritas por el usuario.
</p>

<!-- font-size con !important está bien — no es una propiedad de espaciado de texto -->

<p style="font-size: 200%;">
  Esto no activa la regla.
</p>

Mejor práctica: Usa una hoja de estilo externa en su lugar

<!-- HTML -->

<p class="readable-text">
  Los estilos están definidos en la hoja de estilo, dando a los usuarios control total.
</p>

/* CSS */
.readable-text {
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

Al mantener los estilos de espaciado de texto en una hoja de estilo, facilitas que los usuarios apliquen sus propias sobrescrituras mientras mantienes tu diseño predeterminado.

Learn more: