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 el contenido legible. Las personas con baja visión pueden aumentar el espaciado entre letras o palabras para reducir el amontonamiento 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 que están 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 mayor especificidad en la cascada CSS. Esto significa que las hojas de estilo del usuario, las extensiones del navegador y las 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 ocurra pérdida de contenido o funcionalidad cuando los usuarios ajustan:

La altura de línea a al menos 1.5 veces el tamaño de la fuente
El espaciado después de los 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 evitan estos ajustes, el contenido falla este criterio.

Cómo solucionarlo

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

Eliminar !important de la declaración de estilo en línea. Sin !important, los usuarios pueden sobrescribir el valor con una hoja de estilo personalizada.
Mover los estilos a una hoja de estilo externa o incrustada. Este es generalmente el mejor enfoque 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 se verifican las tres propiedades de espaciado de texto (line-height, letter-spacing, word-spacing).

Ejemplos

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

Estos ejemplos fallan porque !important en propiedades de espaciado de texto en línea evita que el usuario las sobrescriba.

<!-- 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>

Buena práctica: Usar 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: