Logotipo de la Universidad de Alicante
Logotipo del Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad Web

Buscador


Búsqueda avanzada

Migas de pan

Estás en: Accesibilidad web > Ejemplos > Errores típicos > Presentación > Espacio entre las letras de una palabra

Espacio entre las letras de una palabra

Muchos desarrolladores de páginas web introducen espacios en blanco entre las letras de una palabra para crear un efecto visual especial, normalmente cuando la palabra forma parte de un título. Esto ocasiona un grave problema de accesibilidad: un lector de pantallas no lee la palabra entera como tal, sino que la lee letra a letra.

Elementos clave de la solución

Solución

La página web Con espacio en blanco entre letras contiene un encabezado y un botón en los que se ha insertado un espacio en blanco entre las letras de cada palabra para crear el efecto de un tamaño de letra mayor, tal como podemos observar en el siguiente fragmento de código:

<h1>F o r m u l a r i o &nbsp;&nbsp; i n s c r i p c i ó n</h1>
<form action="" method="post">
<p>
Nombre: <input type="text" name="nombre" />
<br />
<input type="submit" value="E n v i a r" />
</p>
</form>

En la siguiente imagen podemos ver como se muestra esta página web en un navegador:

Texto con espacio en blanco entre letras

El problema de esta página web es que un lector de pantallas va a leer las palabras cuyas letras están separadas por espacios en blanco letra a letra en vez de como una palabra. Esto hace que el contenido sea muy difícil de entender. Por ejemplo, en el siguiente enlace (archivo de sonido de JAWS) se puede escuchar lo que dice JAWS al leer la página realizada con espacios en blanco entre las letras. La grabación está realizada con JAWS leyendo el contenido a la mínima velocidad posible.

La solución a este problema de accesibilidad es muy sencilla. La página web Sin espacio en blanco entre letras es la misma página que antes pero sin espacios en blanco entre las letras. En la siguiente imagen podemos observar que al mostrarse en un navegador se obtiene el mismo resultado que con la página errónea que contiene espacios en blanco entre las letras de una palabra:

Texto sin espacios en blanco entre letras

La solución consiste en utilizar la propiedad de CSS letter-spacing que permite controlar la separación entre las letras de una palabra. Además, también se ha empleado la propiedad de CSS word-spacing para controlar la separación entre las palabras. El código CSS para esta página es:

h1 {
  letter-spacing: 0.25em;
  word-spacing: 0.25em;
}

input {
  letter-spacing: 0.2em;
}

Por último, en el siguiente enlace (archivo de sonido de JAWS) se puede escuchar lo que dice JAWS al leer la página realizada correctamente sin espacios en blanco entre las letras: ahora se entiende todo correctamente. La grabación está realizada con JAWS leyendo el contenido a la mínima velocidad posible.

Estándares, licencia y contacto