Principio 1/1.4 Distinguible/1.4.12-A

1.4.12-A. Ajustes de espaciado del texto

1_Perceptible 1.4_Distinguible

• Nivel: AA
• Versión: 2.1
• Principio: 1_Perceptible
• Pauta: 1.4_Distinguible
• Grupo: Texto
• Subgrupo: Espaciado

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Baja visión – Barrera grave
• Cognitiva – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Debe permitirse un ajuste de las siguientes características del texto sin que se pierda contenido o funcionalidad:
  • Ajustar el alto de la línea hasta al menos 1.5 veces el tamaño de la fuente
  • Espaciar los párrafos hasta al menos el doble del tamaño de la fuente
  • Ajustar el espacio entre letras hasta al menos 0.12 veces el tamaño de la fuente
  • Ajustar el espaciado entre palabras hasta al menos 0.16 veces el tamaño de la fuente.

Comprensión del criterio

Descripción resumida

El contenido debe permitir que las personas aumenten interlineado, espaciado entre palabras, letras y párrafos sin que el texto se superponga, se corte o pierda funcionalidad. El diseño no debe impedir estos ajustes.

Objetivo

Facilitar la lectura y comprensión a personas con baja visión y con dificultades de procesamiento (p. ej., dislexia) permitiendo ajustar el espaciado sin romper el diseño.

Importancia de cumplir el criterio

Si el espaciado no puede modificarse o, al ajustarlo, el contenido se solapa o desaparece, la legibilidad y el uso del sitio se ven gravemente afectados.

Referencias WCAG

• C36: Allowing for text spacing override
• C35: Allowing for text spacing without wrapping
• C8: Using CSS letter-spacing to control spacing within a word
• C21: Specifying line spacing in CSS
• C28: Specifying the size of text containers using em units
• F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted

Recursos de apoyo

Consejos

• Evitar valores fijos que impidan reflujo del texto
• Usar line-height, letter-spacing, word-spacing con valores relativos
• Definir contenedores con em para permitir crecimiento
• Probar con herramientas automáticas

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomatica

Procedimiento de evaluación

Uso de Bookmarklet “Text spacing”

1. Paso 1. En la barra de marcadores del navegador, pulsar sobre el marcador “Text spacing”. El aspecto gráfico de la web deberá cambiar para aplicar ajustes de espaciado del texto que cumplen los criterios correspondientes.
2. Paso 2. Comprobar que con la nueva visualización no existen:
   • a. Textos cortados.
   • b. Superposiciones de textos.

Resultado esperado

El contenido mantiene legibilidad y funcionalidad al aplicar los valores mínimos de espaciado definidos.

Ejemplo

El texto puede espaciarse sin romper el diseño.

body {
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

Otras herramientas de evaluación

• Prueba de espaciado: aplicar los valores de referencia (line-height 1.5, espacio entre párrafos 2×, letter-spacing 0.12em, word-spacing 0.16em) mediante herramientas del navegador y comprobar que todo sigue siendo legible y usable.
• Inspección del navegador: revisar CSS para evitar reglas que impidan el ajuste de espaciado (p. ej. !important, alturas fijas o contenedores que recorten texto).
• Revisión visual: verificar que al aumentar el espaciado no se produce solapamiento, recorte de texto, pérdida de elementos o necesidad de scroll horizontal excesivo.
• Prueba asistiva: (NVDA, JAWS, VoiceOver) confirmar que el contenido sigue siendo accesible al modificar el espaciado y que el foco no se pierde.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.12-A. Ajustes de espaciado del texto

Loading comments...