Fallo Común F32 de WCAG 2.1: Uso de espacios en blanco para controlar el espacio dentro de una palabra

El uso de espacios en blanco para dar formato visual al texto puede afectar gravemente la accesibilidad de una web. Cuando los desarrolladores utilizan espacios, tabulaciones o saltos de línea para ajustar la separación dentro de una palabra, los lectores de pantalla pueden interpretar incorrectamente el contenido, dificultando su comprensión para las personas con discapacidad visual o cognitiva.

Este fallo incumple el criterio 1.3.2 – Secuencia significativa, que garantiza que la información presentada mantenga su significado cuando se utiliza tecnología de asistencia.

Acerca de este fallo

Este error ocurre cuando se insertan caracteres de espacio en blanco para alterar el espaciado dentro de una palabra. Esto puede hacer que:

• Los lectores de pantalla pronuncien las palabras incorrectamente, letra por letra en lugar de reconocer la palabra completa.
• Se pierda el significado del contenido, especialmente en idiomas como el japonés, donde los espacios pueden cambiar completamente el significado de una palabra.
• El contenido no se reconozca correctamente en búsquedas, ya que los motores pueden interpretar palabras separadas en lugar de una sola.

Escenarios comunes donde ocurre este fallo

• Uso de espacios entre letras para mejorar la estética de títulos o encabezados.
• Separación de caracteres en idiomas como japonés o chino, alterando su interpretación.
• Aplicación de saltos de línea en palabras dentro de tablas para forzar un formato específico.

Ejemplos

Ejemplo incorrecto 1: Agregar espacios dentro de una palabra

Código incorrecto:

🔴 Problema: Los lectores de pantalla pueden leerlo como letras separadas: «W – e – l – c – o – m – e» en lugar de «Welcome».

Solución correcta

Código corregido:

✅ ¿Qué mejora?: Se mantiene la palabra como una unidad reconocible por los lectores de pantalla.

Ejemplo incorrecto 2: Uso de entidades HTML para espaciar texto

Código incorrecto:

🔴 Problema: Se introducen espacios artificiales dentro de la palabra «HOLA», lo que afecta su reconocimiento.

Solución correcta

✅ ¿Qué mejora?: Se utiliza letter-spacing en CSS para controlar el espaciado sin afectar la accesibilidad.

Ejemplo incorrecto 3: Uso de espacios en blanco en caracteres japoneses

Código incorrecto:

🔴 Problema: En japonés, «東京都» significa «Tokio», pero si se separa con espacios, los lectores de pantalla pueden interpretar «東 京» como «Higashi Kyo» en lugar de «Tokio».

Solución correcta

✅ ¿Qué mejora?: Se mantiene la palabra sin separaciones artificiales para que se lea correctamente.

Ejemplo incorrecto 4: Uso de saltos de línea en tablas

Código incorrecto:

🔴 Problema: El uso de saltos de línea <br /> dentro de palabras en japonés genera una lectura errónea en lectores de pantalla.

Solución correcta

✅ ¿Qué mejora?: Se mantiene la palabra como un solo elemento legible sin cortes.

Errores comunes y cómo evitarlos

Errores frecuentes:

1. Insertar espacios en blanco dentro de palabras para aumentar el espaciado visual.
2. Usar   o múltiples espacios para forzar una separación entre letras.
3. Aplicar saltos de línea dentro de palabras en tablas o encabezados.
4. No probar con lectores de pantalla para verificar la correcta interpretación del contenido.

Cómo evitar estos errores:

• Utiliza CSS para controlar el espaciado, con letter-spacing o word-spacing.
• Evita modificar la estructura de las palabras con espacios en blanco o saltos de línea innecesarios.
• Prueba con tecnología de asistencia para asegurarte de que el contenido se lee correctamente.

Preguntas frecuentes sobre el fallo común F32

¿Por qué no debo usar espacios en blanco para el espaciado visual?

Porque los lectores de pantalla pueden interpretar cada letra como separada, dificultando la lectura para usuarios con discapacidad visual.

¿Puedo usar letter-spacing en CSS sin problemas de accesibilidad?

Sí, letter-spacing es una forma accesible de controlar el espaciado sin afectar la interpretación del texto.

¿Cómo afectan los espacios en blanco en otros idiomas?

En idiomas como japonés o chino, los espacios pueden cambiar el significado de una palabra, haciendo que se lea incorrectamente.

¿Los motores de búsqueda interpretan mal las palabras con espacios?

Sí, una palabra con espacios insertados artificialmente puede ser interpretada como varias palabras separadas, afectando el SEO y la usabilidad.

¿Cómo pruebo si mi sitio tiene este fallo?

Utiliza un lector de pantalla como NVDA o VoiceOver y verifica si las palabras se leen correctamente.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F32: Incumplimiento del Criterio de Conformidad 1.3.2 debido al uso de espacios en blanco para controlar el espacio dentro de una palabra
• Comprender el criterio de éxito 1.3.2: Secuencia significativa
• C8: Uso del espaciado entre letras CSS para controlar el espaciado dentro de una palabra
• Uso correcto de letter-spacing en CSS
• NVDA – Lector de pantalla gratuito

Pruebas y validación

Procedimiento

1. Revisa el código fuente en busca de espacios dentro de palabras.
2. Activa un lector de pantalla y prueba la lectura del contenido.
3. Desactiva los estilos CSS y revisa si las palabras siguen siendo comprensibles.
4. Usa herramientas de validación de accesibilidad como Axe o WAVE.

Resultados esperados

• ✅ Si las palabras se leen correctamente sin separaciones artificiales, la página cumple con WCAG 2.1 – 1.3.2.
• ❌ Si los lectores de pantalla pronuncian las letras individualmente o las palabras pierden su significado, la página falla este criterio y debe corregirse.

El uso de espacios en blanco para modificar la apariencia del texto es una mala práctica que afecta la accesibilidad. En su lugar, utiliza CSS para el espaciado y realiza pruebas con lectores de pantalla.

📢 ¿Tu web cumple con los estándares de accesibilidad? Contáctanos para una auditoría y mejora la experiencia de todos tus usuarios.