F46Fallo 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

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

<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

Técnicas relacionadas

• H39: Usar elementos caption para asociar títulos a las tablas de datos
• H51: Usar marcado de tabla para presentar información tabular