Taules de dades accessibles

Una taula de dades és una relació bidimensional: cada cel·la té sentit per la seva fila i la seva columna. Qui veu la pantalla fa aquesta associació d'un cop d'ull. Qui fa servir un lector de pantalla depèn que el marcatge la declari, perquè el lector llegeix cel·la per cel·la i, en entrar a cadascuna, anuncia els encapçalaments que li corresponen. Si els encapçalaments no estan ben marcats, la persona sent «1.250,00» sense saber si és l'import de gener o de febrer, o si correspon a ingressos o a despeses. Tot això entra dins del criteri 1.3.1 Informació i relacions.

Anatomia d'una taula accessible

Una taula de dades ben construïda té aquests elements:

• <caption>: el títol de la taula. És el seu nom accessible, el primer que anuncia el lector en entrar-hi i el que apareix a la llista de taules. Ha de ser el primer fill de <table>.
• <thead>, <tbody> i, si escau, <tfoot>: agrupen files. No són obligatoris per a l'accessibilitat, però hi ajuden i permeten capçaleres fixes amb CSS.
• <th> per a cada cel·la d'encapçalament, amb scope="col" si encapçala una columna o scope="row" si encapçala una fila.
• <td> per a les cel·les de dades.

<table>
  <caption>Taxes municipals 2025 per tipus de tràmit</caption>
  <thead>
    <tr>
      <th scope="col">Tràmit</th>
      <th scope="col">Taxa ordinària</th>
      <th scope="col">Taxa reduïda</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Llicència d'obra menor</th>
      <td>45,00 €</td>
      <td>22,50 €</td>
    </tr>
    <tr>
      <th scope="row">Gual permanent</th>
      <td>120,00 €</td>
      <td>60,00 €</td>
    </tr>
  </tbody>
</table>

Les cel·les d'encapçalament de fila són les que més s'obliden. Si la primera columna conté <td> en lloc de <th scope="row">, el lector només anunciarà l'encapçalament de columna i la persona haurà de tornar enrere constantment per recordar en quina fila és.

Taules complexes: headers i id

Quan una taula té encapçalaments en dos nivells (per exemple, anys agrupats per trimestres) o cel·les que ocupen diverses files o columnes amb colspan i rowspan, scope (inclosos els seus valors colgroup i rowgroup) pot no ser suficient, o no ser interpretat de manera fiable per tots els lectors, per descriure quins encapçalaments corresponen a cada cel·la. En aquest cas s'assigna un id a cada <th> i cada <td> enumera a headers els identificadors dels seus encapçalaments, separats per espais.

<table>
  <caption>Usuaris atesos per canal i semestre</caption>
  <tr>
    <td rowspan="2"></td>
    <th id="a24" colspan="2">2024</th>
  </tr>
  <tr>
    <th id="s1" headers="a24">1r semestre</th>
    <th id="s2" headers="a24">2n semestre</th>
  </tr>
  <tr>
    <th id="pres" scope="row">Presencial</th>
    <td headers="a24 s1 pres">8.120</td>
    <td headers="a24 s2 pres">7.950</td>
  </tr>
</table>

És laboriós i propens a errors, així que abans d'arribar aquí pregunta't si la taula es pot dividir en diverses taules simples, una per grup. Gairebé sempre és millor per a tothom, incloses les persones que la llegeixen en un mòbil.

Taules de maquetació

Fer servir taules per col·locar elements a la pantalla va ser la norma fa vint anys i continua sent habitual en plantilles de correu HTML. Per a una tecnologia de suport, una taula de maquetació és un laberint: anuncia «taula amb 3 files i 4 columnes», llegeix coordenades de cel·les i genera un ordre de lectura il·lògic. En pàgines web, maqueta amb CSS (Grid, Flexbox). Si heretes una taula de maquetació que no pots refer, afegeix role="presentation" a l'element <table> perquè el navegador la retiri de l'arbre d'accessibilitat com a taula, i no hi facis servir <th>, <caption> ni summary.

Taules en pantalles petites

Al mòbil les taules amples solen trencar el criteri 1.4.10 Reajustament dels elements, que exigeix evitar el desplaçament horitzontal excepte en contingut que el requereixi per naturalesa. Les taules de dades són una de les excepcions admeses, però tot i així convé oferir una solució amable. La més segura és embolcallar la taula en un contenidor amb desplaçament horitzontal propi:

<div class="tabla-scroll" role="region" aria-labelledby="cap-tasas" tabindex="0">
  <table>
    <caption id="cap-tasas">Taxes municipals 2025</caption>
    …
  </table>
</div>

El tabindex="0" permet desplaçar el contenidor amb les fletxes del teclat i el role="region" amb nom evita l'errada d'«element enfocable sense rol ni nom». Les tècniques que transformen cada fila en una targeta amb CSS (display: block a tr i td) trenquen la semàntica de taula en molts navegadors; si les fas servir, verifica-ho amb lector de pantalla al mòbil i considera afegir els rols de taula explícits (role="table", role="row", role="cell", role="columnheader") per restaurar-la.

Com comprovar-ho

• Amb el lector de pantalla, entra a la taula i mou-te entre cel·les amb Ctrl+Alt+fletxes (NVDA i JAWS). Ha d'anunciar l'encapçalament correcte quan canvies de fila i de columna.
• Amb WAVE o axe, revisa els avisos de «cel·la de dades sense encapçalament» i «encapçalament sense cel·les associades».
• Inspecciona la <caption>: descriu el que conté la taula, inclosa la unitat o el període?
• Redimensiona a 320 píxels d'amplada i comprova que la taula es pot desplaçar amb el teclat.

Resum

• Tota taula de dades necessita <th> per a cada encapçalament, amb scope de columna o de fila, i convé que tingui un <caption> que li doni nom.
• Els encapçalaments de fila (scope="row") són els que més s'obliden i els que més ajuden a orientar-se.
• Per a taules amb encapçalaments en diversos nivells, fes servir id i headers o, millor, divideix la taula.
• No maquetis amb taules; si n'heretes una, role="presentation" i sense <th>.
• Al mòbil, un contenidor amb desplaçament, nom i tabindex="0" és la solució més robusta.