Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F33Columnas de texto hechas con espacios o tabuladores

Nombre oficial en el W3C: Fallo de los criterios de conformidad 1.3.1 y 1.3.2 debido a usar caracteres de espacio en blanco para crear varias columnas en contenido de texto sin formato

En pocas palabras

El error es colocar el texto en dos o más columnas usando espacios, tabuladores o saltos de línea, como en una máquina de escribir. A la vista parecen columnas. Pero el lector de pantalla lee cada línea de izquierda a derecha y mezcla las frases de una columna con las de la otra.

Por qué es importante

El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee el texto línea a línea, en el orden en que está escrito. No sabe que hay columnas.

Así, la persona oye media frase de la columna izquierda y, a continuación, media frase de la derecha. El resultado no tiene sentido.

También falla para quien ve la pantalla. Si amplía el texto, cambia la letra o usa un móvil, las líneas se cortan y las columnas se descolocan.

Cómo evitarlo

  1. No use espacios ni tabuladores para alinear texto en columnas. Es habitual en bloques <pre>, en textos pegados desde un procesador de textos y en avisos de texto plano.
  2. Si el texto es corrido, preséntelo en una sola columna. Es lo más sencillo y funciona en cualquier pantalla.
  3. Si quiere columnas en una web, haga cada columna como un bloque propio, por ejemplo un <div> o una <section>. Colóquelas con CSS: columns, flex o grid.
  4. Si los datos son en realidad una tabla, use una tabla de verdad (vea F34).
  5. En documentos de Word o PDF, use la función de columnas del programa, no espacios.

Cómo comprobarlo

  1. Busque en la página textos colocados en columnas.
  2. Seleccione con el ratón el texto de una columna. Si la selección salta a la otra columna, las columnas están hechas con espacios.
  3. Amplíe la página al 200 % o redúzcala a ancho de móvil. Si las columnas se descolocan o se mezclan, es una señal del fallo.
  4. Lea el texto con NVDA o VoiceOver. Cada columna debe leerse entera antes de pasar a la siguiente.
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 F33 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 a columnas de datos en contenido textual constituye un fallo en el uso correcto de la estructura. Las tecnologías de asistencia interpretan el contenido en el orden de lectura del idioma en uso. Usar caracteres de espacio en blanco para crear varias columnas no presenta la información en un orden de lectura natural. Por tanto, quien usa tecnología de asistencia no recibirá la información de una forma comprensible.

El texto sin formato no es adecuado para mostrar varias columnas de texto. Modifique el contenido para presentar los datos con otra disposición. Como alternativa, use una tecnología que proporcione elementos estructurales para representar datos en columnas.

Ejemplos

El siguiente ejemplo usa incorrectamente caracteres de espacio en blanco para dar formato a un párrafo en dos columnas.

Web Content Accessibility Guidelines      including blindness and low vision, 
2.0 (WCAG 2.0) covers a wide range of     deafness and hearing loss, learning 
issues and recommendations for making     difficulties, cognitive limitations, limited 
Web content more accessible. This         movement, speech difficulties, and 
document contains principles,             others. Following these guidelines will 
guidelines, success criteria, benefits,   also make your web content more 
and examples that define and explain      accessible to the vast majority of users, 
the requirements for making Web-based     including older users. It will also enable
information and applications accessible.  people to access web content using 
"Accessible" means usable to a wide       many different devices - including a 
range of people with disabilities,        wide variety of assistive technologies.

Si un lector de pantalla interpretara y leyera en voz alta este contenido, pronunciaría las siguientes líneas:

  • Web Content Accessibility Guidelines including blindness and low vision,
  • 2.0 (WCAG 2.0) covers a wide range of deafness and hearing loss, learning
  • issues and recommendations for making difficulties, cognitive limitations, limited
  • Web content more accessible. This movement, speech difficulties, and
  • (se omiten las líneas restantes por brevedad)

Si el texto se reajustara, se cambiara de una fuente de ancho fijo a una de ancho variable o se aumentara de tamaño hasta que las líneas dejaran de caber en la página, surgirían problemas de interpretación similares en la presentación visual.

Pruebas

Procedimiento

  1. Examinar el documento en busca de datos o información presentados en formato de columnas.
  2. Comprobar si las columnas se han creado usando caracteres de espacio en blanco para disponer la información.

Resultados esperados

  • Si la comprobación n.º 2 es verdadera, se da esta condición de fallo y el contenido falla estos criterios 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.

Solicitar una auditoría

Basado en la técnica F33 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.