Técnica HTML WCAG 2.2

H79Aclarar los enlaces de una tabla con su celda y sus encabezados

Nombre oficial en el W3C: Identificar el propósito de un enlace en una tabla de datos mediante el texto del enlace combinado con la celda que lo contiene y las celdas de encabezado asociadas

En pocas palabras

En una tabla de datos, un enlace como «PDF» o «Ver» se entiende por lo que lo rodea. Lo aclaran el texto de su celda y los encabezados de su fila y su columna. Los lectores de pantalla anuncian esos encabezados al moverse por la tabla. Para que funcione, los encabezados deben estar bien marcados con th.

Por qué es importante

Las tablas de convocatorias, actas o licitaciones suelen tener columnas de enlaces que dicen solo «PDF». A la vista, la fila deja claro de qué documento se trata.

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 los encabezados están bien marcados, el lector dice la fila y la columna al cambiar de celda. Sin ese marcado, la persona solo oye «PDF» una y otra vez.

Cómo se hace

Use una tabla de datos de verdad, con <table>, <th> y <td>.
Marque los encabezados de columna con <th scope="col">.
Marque la celda que identifica cada fila con <th scope="row">.
Compruebe que el enlace, su celda y sus encabezados, juntos, dicen adónde lleva.
Si es posible, haga el enlace más explícito, por ejemplo con el nombre del documento.

Cómo comprobarlo

Localice los enlaces de la tabla cuyo texto no se entiende solo.
Compruebe en el código que la tabla tiene <th> para filas y columnas, con scope o con headers.
Lea juntos el enlace, su celda y sus encabezados y confirme que queda claro su destino.
Con NVDA, recorra la tabla con Ctrl + Alt + flechas y escuche si anuncia los encabezados al llegar a cada enlace.

Ejemplo

Tabla de convocatorias: cada enlace «PDF» se entiende por el encabezado de su fila y de su columna.

<table>
  <caption>Convocatorias abiertas</caption>
  <tr>
    <th scope="col">Convocatoria</th>
    <th scope="col">Bases</th>
    <th scope="col">Solicitud</th>
  </tr>
  <tr>
    <th scope="row">Becas de comedor 2026</th>
    <td><a href="bases-comedor.pdf">PDF</a></td>
    <td><a href="solicitud-comedor.pdf">PDF</a></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 H79 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 que contienen enlaces.

Descripción

El objetivo de esta técnica es identificar el propósito de un enlace a partir del enlace en el contexto de su tabla de datos. Este contexto es la celda de la tabla que encierra el enlace y las celdas de encabezado asociadas a esa celda. El contexto de la tabla de datos proporciona el propósito de un enlace que de otro modo resultaría poco claro, cuando la celda de la tabla es el elemento de bloque antecesor más cercano. Permite al usuario distinguir este enlace de otros enlaces de la página web que llevan a otros destinos y le ayuda a decidir si seguir el enlace. Tenga en cuenta que limitarse a indicar el URI del destino no es suficientemente descriptivo para las personas con discapacidad, en especial para quienes tienen discapacidades cognitivas.

Ejemplos

Una tabla de opciones de coches de alquiler

<table>
  <caption>Available rental cars with cost per day</caption>
  <tr>
    <th>Type of car</th>
    <th>Alamo</th>
    <th>Budget</th>
    <th>National</th>
    <th>Avis</th>
    <th>Hertz</th>
  </tr>
  <tr>
    <th scope="row">Economy</th>
    <td><a href="econ-ala.html">$67</a></td>
    <td><a href="econ-bud.html">$68</a></td>
    <td><a href="econ-nat.html">$72</a></td>
    <td><a href="econ-av.html">$74</a></td>
    <td><a href="econ-hz.html">$74</a></td>
  </tr>
  <tr>
    <th scope="row">Compact</th>
    <td><a href="comp-ala.html">$68</a></td>
    <td><a href="comp-bud.html">$69</a></td>
    <td><a href="comp-nat.html">$74</a></td>
    <td><a href="comp-av.html">$76</a></td>
    <td><a href="comp-hz.html">$76</a></td>
  </tr>
  <tr>
    <th scope="row">Mid-sized</th>
    <td><a href="mid-ala.html">$79</a></td>
    <td><a href="mid-bud.html">$80</a></td>
    <td><a href="mid-nat.html">$83</a></td>
    <td><a href="mid-av.html">$85</a></td>
    <td><a href="mid-hz.html">$85</a></td>
  </tr>
  <tr>
    <th scope="row">Full-sized</th>
    <td><a href="full-ala.html">$82</a></td>
    <td><a href="full-bud.html">$83</a></td>
    <td><a href="full-nat.html">$89</a></td>
    <td><a href="full-av.html">$91</a></td>
    <td><a href="full-hz.html">$91</a></td>
  </tr>
</table>

Pruebas

Procedimiento

Para cada enlace del contenido que utilice esta técnica:

Comprobar que el enlace está en una celda de tabla.
Comprobar que el texto del enlace, combinado con el texto de las celdas de encabezado asociadas, describe el propósito del enlace.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

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.

Solicitar una auditoría

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