ACCESSIBILITAT ≠ OVERLAY · 36
Taules accessibles: quan les dades necessiten context, no un overlay
📅 9 de novembre del 2026 · ⏱ 7 min de lectura
Una taula pot semblar ordenada i continuar sent incomprensible per a qui l’escolta o la consulta amb ampliació. L’accessibilitat exigeix conservar les relacions entre cada dada, la seva fila i la seva columna.
01. Una xifra aïllada no explica res
Imagina que consultes els horaris d’un servei i només sents «09:00, 10:00, 11:00, 12:00». Sense saber a quin dia o servei correspon cada hora, no pots prendre una decisió útil. La barrera apareix quan el context depèn exclusivament de mirar cap amunt o cap a l’esquerra. La informació és visible, però falta una relació que el programari pugui interpretar.
En una taula de preus passa el mateix. Una xifra pot representar una quota mensual, un preu anual o un suplement. Si cal memoritzar la posició de totes les columnes, consultar la informació es converteix en un exercici de reconstrucció. L’objectiu és poder respondre una pregunta concreta amb autonomia.
02. Decideix si les dades necessiten una taula
Una taula és adequada quan comparar files i columnes aporta significat: horaris, tarifes, característiques o resultats. Si només tens una seqüència d’instruccions o una fitxa amb poques dades, una llista o diversos paràgrafs poden ser més clars. La decisió ha de partir de la informació i no de l’aspecte de quadrícula de l’editor.
Tampoc convé utilitzar taules per posar dos blocs independents de costat. La presentació correspon a CSS i als components de disseny. Barrejar maquetació i dades introdueix una estructura que es pot anunciar sense aportar res. Abans de programar, defineix quina comparació necessita fer la persona i elimina les columnes que no hi contribueixen.
03. Encapçalaments presents també en el codi
Posar la primera fila en negreta o amb fons blau no converteix les seves cel·les en encapçalaments. Les cel·les que identifiquen files o columnes han d’utilitzar th; les dades ordinàries utilitzen td. En una taula senzilla, scope="col" i scope="row" poden indicar la direcció de les associacions pertinents.
Per exemple, «Servei», «Dilluns» i «Dimarts» identifiquen columnes. «Consultes» i «Suport» poden identificar files. En consultar una hora interessa reconèixer tant el servei com el dia. No afegeixis ARIA per rutina per repetir la semàntica nativa. Revisa primer l’HTML del component i després comprova com el presenten el navegador i el lector de pantalla utilitzats.
| Servei | Dilluns | Dimarts |
|---|---|---|
| Consultes | 09:00 | 10:00 |
| Suport | 11:00 | 12:00 |
04. Un títol útil i una orientació breu
Un caption ajuda a identificar la taula: «Horaris d’atenció» comunica més que «Taula 1». El títol ha de permetre distingir-la d’altres sense llegir tot el contingut anterior. Si el període, la moneda o la unitat són essencials, han de quedar clars a la taula mateixa o en una explicació associada.
Una taula complexa també pot necessitar una indicació sobre com s’organitza. Explica, per exemple, que cada grup de columnes correspon a un trimestre. Aquesta orientació no substitueix els encapçalaments de les cel·les. Evita descripcions interminables que repeteixin tots els valors: es tracta de facilitar la consulta i no d’obligar a escoltar la informació dues vegades.
05. Simplifica abans de combinar cel·les
Les cel·les combinades i els encapçalaments amb diversos nivells dificulten la interpretació i el manteniment. Abans d’utilitzar-los, pregunta si pots dividir la informació en taules més petites amb títols precisos. Separar dos períodes pot millorar més la comprensió que afegir atributs a una quadrícula enorme.
Quan la complexitat sigui necessària, representa expressament els grups i les associacions. Segons l’estructura, poden ser adequats scope="colgroup", scope="rowgroup" o les relacions entre id i headers. No són receptes intercanviables per a qualsevol taula. Comprova les relacions reals i prova la lectura de cel·les centrals, límits i grups, no només de la primera fila.
06. El mòbil no ha d’esborrar les relacions
Reduir la lletra fins que tota la taula càpiga en un telèfon fa que sigui difícil de llegir. Amagar columnes sense oferir accés a les dades tampoc resol el problema. El disseny adaptable ha de conservar la informació necessària per comparar i decidir, també quan es fa servir ampliació.
Una regió amb desplaçament horitzontal pot ser raonable per a dades que necessiten dues dimensions. Quan calgui, s’ha de poder manejar amb teclat i ha d’indicar de manera comprensible que hi ha més contingut. Si transformes files en targetes, conserva les etiquetes i el significat al DOM. Comprova que el canvi visual no elimina la semàntica ni obliga a deduir les associacions.
07. Color, abreviatures i cel·les buides
Una cel·la verda no explica tota sola «disponible», igual que una de vermella no necessàriament significa «sense places». Afegeix text o una alternativa comprensible i comprova el contrast dels textos, controls i indicadors rellevants. Les franges alternes poden ajudar a seguir una fila, però no han de ser l’única pista per entendre una relació.
Defineix les abreviatures poc evidents i expressa les unitats amb coherència. Diferencia entre zero, dada desconeguda i servei no disponible: no signifiquen el mateix. Una cel·la buida pot ser ambigua tant visualment com en escoltar-la. Escriure «Sense dades» evita interpretar un silenci com un valor o com un problema del lector de pantalla.
08. Ordenació i filtres que es puguin utilitzar
Si un encapçalament permet ordenar, ofereix l’acció mitjançant un control amb nom clar que funcioni amb teclat. Comunica programàticament l’estat d’ordenació quan correspongui; aria-sort pot expressar-lo a l’encapçalament adequat. Un triangle petit no explica prou quina columna determina l’ordre actual.
Després de filtrar, conserva un recorregut de focus previsible i informa del resultat quan calgui sense generar anuncis constants. Prova també la situació sense coincidències i la restauració del filtre. No converteixis una taula informativa en una graella interactiva amb navegació especial si el component no ho necessita realment. Qualsevol comportament afegit s’ha de dissenyar i provar amb cura.
09. Comprova tasques, no només etiquetes
Tria una pregunta verificable: «A quina hora atén suport el dimarts?». Resol-la visualment i després amb un lector de pantalla, utilitzant les seves ordres de navegació per taules. La prova útil no consisteix a sentir que existeix una taula, sinó a identificar correctament la dada i els seus encapçalaments sense perdre el context.
Repeteix la tasca amb ampliació i una finestra estreta. Utilitza el teclat per als botons, filtres i regions desplaçables que ho requereixin. No cal convertir totes les cel·les d’una taula estàtica en aturades de Tab. Documenta el navegador, la tecnologia de suport, què ha passat i quina resposta correcta hauria de poder obtenir la persona.
10. Què aporten les eines i les WCAG
Una eina automàtica pot assenyalar determinats problemes estructurals, però no decideix si un encapçalament descriu bé les dades o si dividir una taula en facilitaria la comparació. Tampoc valida tota sola tots els estats d’un filtre. Combina els avisos amb inspecció del codi, revisió editorial i tasques manuals.
A les WCAG 2.2, el criteri 1.3.1, Informació i relacions, és especialment pertinent per a l’estructura tabular. Segons el component, també poden intervenir teclat, contrast, reajustament i missatges d’estat. L’excepció de reajustament per al contingut que necessita dues dimensions no eximeix tota la pàgina. Avalua cada requisit aplicable sense presentar una recepta com a garantia de conformitat.
11. Corregeix WordPress i Divi des de l’origen
Revisa l’HTML que genera el mòdul o connector de taules després de desar. Un editor pot mostrar la primera fila destacada i publicar només cel·les td. Copiar des d’un full de càlcul també pot introduir estils o combinacions innecessàries. La revisió s’ha de fer sobre el resultat real, no únicament dins del constructor.
Si el mateix defecte es repeteix en moltes entrades, corregeix el component o la plantilla compartida i documenta una pauta editorial. Un overlay no pot deduir de manera fiable si una xifra és preu, termini o percentatge, ni quina comparació necessita el visitant. Els ajustos visuals poden complementar la feina, però les relacions s’han de resoldre al contingut original.
12. Una publicació comprensible també demà
Abans de publicar, confirma títol, unitats, encapçalaments, associacions i comportament en pantalla estreta. Incorpora una tasca concreta a la revisió editorial i repeteix-la quan canviïn les dades o el connector. Una taula correcta es pot deteriorar en inserir una columna, combinar cel·les o substituir etiquetes per icones.
Inclou persones que utilitzin tecnologies de suport quan sigui possible i escolta les seves dificultats reals. La millor taula no és la que acumula més atributs, sinó la que permet consultar i comparar sense reconstruir mentalment l’estructura. L’accessibilitat es demostra quan la persona troba la dada correcta, entén què significa i la pot utilitzar per prendre la seva pròpia decisió.