Regla de accesibilidad: El espaciado de texto inline 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 hacinamiento 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 la lectura significativamente más fácil.

Cuando las propiedades de espaciado de texto se establecen inline 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 anular 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 de 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 fuente
El espaciado después de párrafos a al menos 2 veces el tamaño de fuente
El espaciado entre letras a al menos 0.12 veces el tamaño de fuente
El espaciado entre palabras a al menos 0.16 veces el tamaño de fuente

Si las declaraciones !important inline impiden estos ajustes, el contenido falla este criterio.

Cómo solucionarlo

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

Elimina !important de la declaración de estilo inline. Sin !important, los usuarios pueden anular el valor con una hoja de estilo personalizada.
Mueve 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 verdaderamente necesario, aplícalo en una hoja de estilo en lugar de inline. Los estilos !important inline son virtualmente imposibles de anular para los usuarios, mientras que el !important a nivel de hoja de estilo aún puede ser anulado por reglas !important del usuario.

Ten en cuenta que otras propiedades de estilo inline 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 inline con `!important`

Estos ejemplos fallan porque !important en propiedades de espaciado de texto inline impide que los usuarios las anulen.

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

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

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

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

<p style="word-spacing: 4px !important;">
  Este texto tiene 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 solo !important en una propiedad de espaciado causa un fallo.
</p>

Correcto: Estilos inline sin `!important`

Estos ejemplos pasan porque los usuarios pueden anular los valores inline con una hoja de estilo personalizada.

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

<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 — anulable -->

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

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

<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 anuladas 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: 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 anulaciones mientras mantienes tu diseño por defecto.

Learn more: