Fallo común WCAG 2.2
F32Espacios dentro de una palabra para separar sus letras
Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.2 debido a usar caracteres de espacio en blanco para controlar el espaciado dentro de una palabra
En pocas palabras
El error es escribir espacios, tabuladores o saltos de línea entre las letras de una palabra para que se vea más separada. Por ejemplo: «B I E N V E N I D O». El lector de pantalla ya no reconoce la palabra y la deletrea o la lee mal. El efecto visual se consigue con CSS sin tocar el texto.
Por qué es importante
El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee el texto tal como está escrito. Si hay espacios entre las letras, cree que cada letra es una palabra.
- La persona oye «be, i, e, ene…» en lugar de «Bienvenido».
- Los buscadores, la búsqueda dentro de la página (Ctrl+F) y los traductores tampoco encuentran la palabra.
- En idiomas como el japonés, un espacio entre caracteres puede cambiar por completo la lectura de la palabra.
Cómo evitarlo
- Escriba las palabras completas, sin espacios, tabuladores,
ni<br>entre sus letras. - Para separar las letras, use la propiedad CSS
letter-spacing. - Para poner un texto en mayúsculas, use
text-transform: uppercaseen lugar de reescribirlo. - Para texto vertical, use
writing-modeen CSS, no un salto de línea tras cada carácter. - Los espacios entre palabras no son este fallo. Tampoco los de una sigla que se deletrea, como «D N I», porque no cambian el significado.
Cómo comprobarlo
- Busque en la página títulos, rótulos o botones con letras muy separadas.
- Mire el código con las herramientas del navegador (tecla F12). Si hay espacios o
entre las letras, es el fallo. - Use la búsqueda de la página (Ctrl+F) con la palabra completa. Si no la encuentra, es probable que esté partida.
- Escuche el texto con NVDA o VoiceOver. Debe oírse la palabra entera, no letra a letra.
Ejemplo
El mismo título espaciado: primero con espacios en el texto (incorrecto) y después con CSS (correcto).
<!-- Incorrecto: el lector deletrea la palabra -->
<h1>B i e n v e n i d o</h1>
<!-- Correcto: la palabra está entera y el CSS la separa -->
<h1 class="espaciado">Bienvenido</h1>
<style>
.espaciado { letter-spacing: 0.5em; }
</style>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F32 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías.
Descripción
El objetivo de esta técnica es describir cómo el uso de caracteres de espacio en blanco, como el espacio, el tabulador, el salto de línea o el retorno de carro, para dar formato visual a palabras individuales puede constituir un fallo en la presentación correcta de las secuencias significativas. Cuando se insertan caracteres en blanco para controlar el espaciado entre las letras de una palabra, pueden cambiar la interpretación de la palabra o impedir que se reconozca por software como una única palabra.
Insertar caracteres de espacio en blanco en una sigla no es un ejemplo de este fallo, puesto que el espacio en blanco no cambia la interpretación de la sigla y puede facilitar su comprensión.
El uso de espacios en blanco entre palabras para el formato visual no es un fallo, puesto que no cambia la interpretación de las palabras.
Ejemplos
Fallo debido a añadir espacios en blanco en medio de una palabra
Este ejemplo contiene espacios en blanco dentro de una palabra para separar las letras de un encabezado. Los lectores de pantalla pueden leer cada letra por separado en lugar de la palabra "Welcome" (bienvenido).
<h1>W e l c o m e</h1>
También puede usarse para añadir espacios en blanco, lo que produce fallos similares:
<h1>H E L L O</h1>Espacios en blanco en medio de una palabra que cambian su significado
En japonés, los caracteres Han (kanji) pueden tener varias lecturas que significan cosas muy distintas. En este ejemplo, la palabra se lee incorrectamente porque los lectores de pantalla pueden no reconocer estos caracteres como una palabra debido al espacio en blanco entre los caracteres. Los caracteres significan "Tokio", pero los lectores de pantalla dicen "Higashi Kyo".
<h1>東 京</h1>Usar caracteres de salto de línea para dar formato a texto vertical
En la celda de encabezado de fila de una tabla de datos con texto en japonés, a menudo se crea texto vertical mediante caracteres de salto de línea. Sin embargo, los lectores de pantalla no pueden leer correctamente las palabras en texto vertical porque los saltos de línea se producen dentro de la palabra. En el siguiente ejemplo, "東京都" (Tokyo-to) se leerá como "Higashi Kyo Miyako".
<table>
<caption>表1. 都道府県別一覧表</caption>
<tr>
<td></td>
<th scope="col">（見出しセル 1.）</th>
<th scope="col">（見出しセル 2.）</th>
</tr>
<tr>
<th scope="row">東<br />京<br />都</th>
<td>（データセル 1.）</td>
<td>（データセル 2.）</td>
</tr>
...
</table>
Pruebas
Procedimiento
Para cada palabra que parezca tener un espaciado no estándar entre caracteres:
- Comprobar si alguna palabra del texto del contenido contiene caracteres de espacio en blanco.
Resultados esperados
- Si la comprobación n.º 1 es verdadera, se da esta condición de fallo y el contenido falla este criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F32 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.