Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F46Tablas de maquetación con encabezados, título o resumen de tabla de datos

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.1 debido a usar elementos th, elementos caption o atributos summary no vacíos en tablas de maquetación

En pocas palabras

Algunas páginas usan una tabla solo para colocar bloques en columnas. Si esa tabla lleva celdas de encabezado (th), un título (caption) o un atributo summary con texto, el lector de pantalla la presenta como una tabla de datos. La persona oye encabezados y descripciones que no significan nada.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) trata las tablas de datos de forma especial. Anuncia cuántas filas y columnas tienen y repite los encabezados al moverse por las celdas.

Si la tabla solo sirve para maquetar, todo eso sobra. La persona cree que hay datos que comparar. Oye, por ejemplo, el nombre de la web como si fuera el encabezado de una columna, y pierde tiempo.

Cómo evitarlo

  1. Maquete con CSS (por ejemplo, display: grid o display: flex) en lugar de tablas.
  2. Si mantiene una tabla de maquetación, use solo celdas <td>. No use <th>, <caption> ni los atributos scope o headers.
  3. No escriba nada en el atributo summary, ni siquiera «tabla de maquetación».
  4. Añada role="presentation" a la tabla para que los lectores de pantalla no la anuncien como tabla.
  5. Reserve th, caption y summary para las tablas de datos de verdad, como un horario o una lista de precios.

Cómo comprobarlo

  1. Busque en el código las etiquetas <table>. Decida si cada tabla muestra datos o solo coloca contenido.
  2. En las tablas de maquetación, compruebe que no hay <th> ni <caption>.
  3. Compruebe que el atributo summary no existe o está vacío.
  4. Recorra esa zona con NVDA o VoiceOver. Si oye encabezados de columna o un título de tabla donde no hay datos, hay fallo.

Ejemplo

Tabla usada solo para colocar el contenido: celdas td sencillas, sin th ni caption, y el título como encabezado real.

<table role="presentation">
  <tr>
    <td colspan="3"><h1>Ayuntamiento de Villanueva</h1></td>
  </tr>
  <tr>
    <td>Menú</td>
    <td>Noticias del día</td>
    <td>Agenda</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 F46 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

HTML

Descripción

El objetivo de esta técnica es describir un fallo que se produce cuando una tabla usada únicamente para maquetar incluye elementos th, un atributo summary o un elemento caption. Se trata de un fallo porque se usa marcado estructural (o semántico) solo con fines de presentación. La finalidad de los elementos de tabla de HTML es presentar datos.

Aunque no es habitual en una tabla de maquetación, el siguiente marcado estructural también constituiría un fallo del criterio de conformidad 1.3.1 Información y relaciones si se usara en una tabla de maquetación:

  • atributos headers
  • atributos scope

Las tecnologías de asistencia usan la estructura de una tabla HTML para presentar los datos al usuario de forma lógica. El elemento th se usa para marcar los encabezados de columna y de fila de la tabla. Un lector de pantalla usa la información de los elementos th para leer en voz alta la información de encabezado que va cambiando a medida que el usuario navega por la tabla. El atributo summary del elemento table proporciona una descripción textual de la tabla que explica su propósito y su función. Las tecnologías de asistencia ponen a disposición de los usuarios la información del atributo summary. El elemento caption forma parte de la tabla y la identifica.

Aunque las WCAG 2 no prohíben el uso de tablas de maquetación, se recomiendan las maquetaciones basadas en CSS para conservar el significado semántico definido de los elementos de tabla de HTML y para ajustarse a la buena práctica de separar la presentación del contenido. Cuando se usa una tabla con fines de maquetación no debe usarse el elemento th. Dado que la tabla no presenta datos, no hay necesidad de marcar ninguna celda como encabezado de columna o de fila. Del mismo modo, no hace falta añadir una descripción a una tabla que solo se usa para maquetar contenido. No incluya un atributo summary ni use el atributo summary para describir la tabla como, por ejemplo, «tabla de maquetación». Al leerse en voz alta, esta información no aporta valor y solo distrae a quienes navegan por el contenido con un lector de pantalla. Los atributos summary vacíos son aceptables en tablas de maquetación, pero no se recomiendan.

Ejemplos

He aquí un ejemplo sencillo que usa una tabla para maquetar el contenido en tres columnas. La barra de navegación está en la columna izquierda, el contenido principal en la columna central y una barra lateral adicional a la derecha. En la parte superior está el título de la página. El ejemplo marca el título de la página como <th>.

<table>
  <tr>
    <th colspan=3>Page Title</th>
  </tr>
  <tr>
    <td><div>navigation content</div></td>
    <td><div>main content</div></td>
    <td><div>right sidebar content</div></td>
  </tr>
  <tr>
    <td colspan=3>footer</td>
  </tr>
</table>

Pruebas

Procedimiento

  1. Examinar el código fuente del documento HTML o XHTML en busca del elemento table

  2. Si la tabla se usa únicamente para disponer visualmente elementos dentro del contenido

    1. Comprobar que la tabla no contiene ningún elemento th.
    2. Comprobar que el elemento table no contiene un atributo summary con contenido.
    3. Comprobar que el elemento table no contiene un elemento caption.

Resultados esperados

  • Si alguna de las comprobaciones anteriores es falsa, se da esta condición de fallo y el contenido falla el 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.

Solicitar una auditoría

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