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.
letter-spacing.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 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:
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:
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.
