Técnica HTML WCAG 2.2
H63Usar scope para unir los encabezados con sus celdas en las tablas
Nombre oficial en el W3C: Usar el atributo scope para asociar las celdas de encabezado con las celdas de datos en las tablas de datos
En pocas palabras
En una tabla de datos, cada encabezado se marca con th, y su atributo scope dice a qué datos afecta. scope="col" indica que encabeza una columna y scope="row", que encabeza una fila. Así el lector de pantalla anuncia el encabezado correcto al leer cada dato.
Por qué es importante
Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) recorre la tabla celda a celda. Si el dato no está unido a su encabezado, solo oye «19:30» y no sabe a qué día ni a qué actividad corresponde.
En tablas muy simples, el navegador adivina bien los encabezados. Pero falla cuando el encabezado de fila no está en la primera columna o cuando un encabezado abarca un grupo. El atributo scope lo deja claro.
Cómo se hace
- Marque cada encabezado con
<th>, nunca con un<td>en negrita. - En los encabezados de columna, ponga
scope="col". - En los encabezados de fila, ponga
scope="row", aunque no estén en la primera columna. - Si un encabezado abarca un grupo de filas o de columnas, use
scope="rowgroup"oscope="colgroup". - Si la tabla tiene encabezados de varios niveles, use
idyheaders, o divídala en tablas más simples.
Ejemplo práctico
El horario de actividades de un polideportivo municipal es una tabla de datos simple. Pero el dato clave de cada fila, la actividad, no está en la primera columna. Está en la segunda, después del número de orden.
Así no: Encabezado de fila marcado como celda de datos
El nombre de la actividad está en un td con strong. Por eso el navegador no lo trata como encabezado de fila. Al bajar por la columna «Hora» con un lector de pantalla se oye solo «19:30». No se sabe a qué actividad corresponde.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
table { border-collapse: collapse; }
caption { font-weight: bold; text-align: left; margin-bottom: 6px; }
th, td { border: 1px solid #767676; padding: 4px 10px; text-align: left; }
</style>
<table>
<caption>Horario de actividades dirigidas</caption>
<tr><th>N.º</th><th>Actividad</th><th>Día</th><th>Hora</th></tr>
<tr><td>1</td><td><strong>Pilates</strong></td><td>Lunes</td><td>18:00</td></tr>
<tr><td>2</td><td><strong>Yoga</strong></td><td>Martes</td><td>19:30</td></tr>
<tr><td>3</td><td><strong>Natación infantil</strong></td><td>Miércoles</td><td>17:00</td></tr>
</table>Así sí: th con scope="col" y scope="row"
Las celdas de la primera fila son th scope="col". La actividad de cada fila pasa a ser th scope="row". Así cada dato queda unido a su columna y a su actividad, aunque el encabezado de fila no esté en la primera columna.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
table { border-collapse: collapse; }
caption { font-weight: bold; text-align: left; margin-bottom: 6px; }
th, td { border: 1px solid #767676; padding: 4px 10px; text-align: left; }
</style>
<table>
<caption>Horario de actividades dirigidas</caption>
<tr><th scope="col">N.º</th><th scope="col">Actividad</th><th scope="col">Día</th><th scope="col">Hora</th></tr>
<tr><td>1</td><th scope="row">Pilates</th><td>Lunes</td><td>18:00</td></tr>
<tr><td>2</td><th scope="row">Yoga</th><td>Martes</td><td>19:30</td></tr>
<tr><td>3</td><th scope="row">Natación infantil</th><td>Miércoles</td><td>17:00</td></tr>
</table>Cómo comprobarlo
Errores frecuentes en auditorías
- Encabezados de columna o de fila hechos con td y negrita (strong, b o CSS), en lugar de th.
- Escribir scope="column" o scope="fila". Son valores que no existen y el navegador los ignora.
- Resolver solo con scope tablas con encabezados de varios niveles o con celdas combinadas. Necesitan id y headers, o dividirse en tablas más simples.
- Poner scope en celdas td. Es un uso obsoleto en HTML y no garantiza la unión con los datos.
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 H63 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 asociar las celdas de encabezado con las celdas de datos en tablas complejas usando el atributo scope. El atributo scope puede usarse para aclarar el alcance de cualquier celda que actúe como encabezado. El atributo scope identifica si la celda es un encabezado de una fila, de una columna o de un grupo de filas o de columnas. Los valores row, col, rowgroup y colgroup identifican, respectivamente, estos posibles alcances.
Esta técnica puede usarse en tablas de datos simples en las que el encabezado no está en la primera fila o columna, como la del ejemplo 1.
En las tablas simples que tienen los encabezados en la primera fila o columna, basta con usar los elementos th sin scope.
En las tablas complejas, use id y headers como se indica en Usar los atributos id y headers para asociar las celdas de datos con las celdas de encabezado en las tablas de datos.
A algunos usuarios puede resultarles más fácil trabajar con varias tablas simples que con una sola tabla más compleja. Los autores pueden plantearse si es posible convertir las tablas complejas en una o varias tablas simples.
Ejemplos
Un horario simple
En el siguiente ejemplo, la primera columna contiene los números de orden de las filas de la tabla, y la segunda columna contiene el valor clave de la fila. Por tanto, las celdas de la segunda columna pueden usar scope="row". Las celdas de la primera fila también se marcan con td y usan scope="col".
<table>
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">Phone Number</th>
<th scope="col">City</th>
</tr>
<tr>
<td>1.</td>
<th scope="row">Charlotte Smith</th>
<td>412-212-5421</td>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th scope="row">Joetta Frere</th>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
<tr>
<td>3.</td>
<th scope="row">David Walls</th>
<td>281-511-6600</td>
<td>New York</td>
</tr>
</table> Pruebas
Procedimiento
Para cada tabla de datos:
- Comprobar que todos los elementos
thtienen un atributoscope. - Comprobar que todos los atributos
scopetienen el valorrow,col,rowgroupocolgroup.
Resultados esperados
- Todas las comprobaciones anteriores son verdaderas.
Recursos
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H63 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.