Fallo común WCAG 2.2
F34Tablas dibujadas con espacios o tabuladores en lugar de una tabla real
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 dar formato a tablas en contenido de texto sin formato
En pocas palabras
El error es simular una tabla alineando el texto con espacios, tabuladores o saltos de línea, por ejemplo un horario pegado como texto. A la vista hay filas y columnas. Pero el lector de pantalla no sabe que es una tabla: lee las líneas seguidas y la persona no sabe a qué fila ni columna pertenece cada dato.
Por qué es importante
Una tabla de verdad le dice al lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) qué celdas son encabezados. Así, al llegar a «9:15», la persona oye también «Lunes» y «Salida».
- Con espacios no hay celdas ni encabezados. La persona oye datos sueltos sin saber a qué se refieren.
- Tampoco puede moverse por filas y columnas, que es como se consulta una tabla con lector de pantalla.
- Si alguien amplía el texto o lo ve en un móvil, las líneas se parten y las columnas se descuadran.
Cómo evitarlo
- Para datos en filas y columnas, use el elemento
<table>con sus filas (<tr>) y celdas (<td>). - Marque los encabezados con
<th>. Indique conscope="col"oscope="row"si encabezan una columna o una fila. - Añada un título a la tabla con
<caption>. Ayuda a saber qué contiene antes de entrar en ella. - No pegue tablas de Excel o Word como texto plano ni dentro de
<pre>. - Si no puede usar una tabla, por ejemplo en un correo de texto plano, presente los datos en frases: «Lunes: salida a las 9:15 y llegada a las 10:00».
Cómo comprobarlo
- Busque en la página datos que se vean como una tabla: horarios, precios, resultados, calendarios.
- Inspecciónelos con las herramientas del navegador (tecla F12). Deben estar dentro de
<table>, no en un<pre>ni en párrafos con espacios. - Intente seleccionar una sola columna con el ratón. Si se selecciona la línea entera, no es una tabla real.
- Con NVDA, pulse la tecla T para saltar a la tabla. Si no la encuentra, el lector no la reconoce.
Ejemplo
Un horario sencillo hecho con una tabla real y con los encabezados marcados.
<table>
<caption>Horario del autobús a la playa</caption>
<tr>
<th scope="col">Día</th>
<th scope="col">Salida</th>
<th scope="col">Llegada</th>
</tr>
<tr>
<td>Lunes</td><td>9:15</td><td>10:00</td>
</tr>
</table>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 F34 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 tablas en contenido textual constituye un fallo en el uso correcto de la estructura. Cuando las tablas se crean de esta manera no hay forma de indicar que una celda está pensada como celda de encabezado, ni de asociar las celdas de encabezado de la tabla con las celdas de datos, ni de navegar directamente a una celda concreta de la tabla.
Además, las tecnologías de asistencia interpretan el contenido en el orden de lectura del idioma en uso. Usar espacios en blanco para organizar los datos en una tabla visual no presenta la información en un orden de lectura natural en el código fuente del documento. Por tanto, quien usa tecnología de asistencia no recibirá la información en un orden de lectura lógico.
El texto sin formato no es adecuado para mostrar información compleja como las tablas, porque la estructura de la tabla no puede percibirse. En lugar de usar formato visual para representar relaciones tabulares, la información tabular tendría que presentarse mediante otra tecnología o de forma lineal.
Ejemplos
El siguiente ejemplo usa incorrectamente espacios en blanco para dar formato a un menú como si fuera una tabla visual.
Menu
Breakfast Lunch Dinner
Monday 2 fried eggs tomato soup garden salad
bacon hamburger Fried Chicken
toast onion rings green beans
Oatmeal cookie mashed potatoes
Tuesday Pancakes vegetable soup Caesar salad
sausage hot dogs Spaghetti with meatballs
orange juice potato salad Italian bread
brownie ice cream
Si un lector de pantalla interpretara y leyera en voz alta esta tabla, pronunciaría las siguientes líneas:
- Menu
- Breakfast Lunch Dinner
- Monday 2 fried eggs tomato soup garden salad
- bacon hamburger Fried Chicken
- toast onion rings green beans
- Oatmeal cookie mashed potatoes
Este orden de lectura no tiene sentido, ya que la tabla no tiene ninguna estructura que permita a la tecnología de asistencia identificarla como tabla. 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 similares en la presentación visual.
Pruebas
Procedimiento
- Examinar el documento en busca de tablas con formato visual.
- Comprobar si las tablas se han creado usando caracteres de espacio en blanco para disponer los datos tabulares.
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.
Basado en la técnica F34 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.