C8Separar las letras de una palabra con letter-spacing, no con espacios

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee «B I E N» letra a letra. La persona oye una serie de letras sueltas y tiene que adivinar la palabra.

• El buscador de la página y el de Google no encuentran la palabra.
• Al copiar el texto se pegan las letras con espacios.
• Si la persona cambia el espaciado con sus propios estilos, los espacios escritos no se pueden quitar.

Cómo se hace

1. Escriba la palabra normal en el HTML: Bienvenidos.
2. Aplique la separación en el CSS con letter-spacing, por ejemplo 0.5em.
3. Si quiere mayúsculas, use text-transform: uppercase en lugar de escribirlas.
4. No use espacios,   ni otros caracteres en blanco entre letras.

Cómo comprobarlo

1. Busque palabras con las letras más separadas de lo normal.
2. Inspecciónelas con las herramientas del navegador (F12). En el HTML deben aparecer sin espacios.
3. En los estilos debe verse la propiedad letter-spacing.
4. Opcionalmente, búsquela con Ctrl + F. El navegador debe encontrar la palabra completa.

Ejemplo

Titular con letras separadas: la palabra está entera en el HTML y la separación la pone el CSS.

<h2 class="espaciado">Bienvenidos</h2>
<style>
  .espaciado {
    letter-spacing: 0.5em;
    text-transform: uppercase;
  }
</style>