2526UdL1.3.1- J

Edición de la página como formulario

Editar con formulario

1. Información básica

Id del criterio: 1.3.1 - Información y relaciones (Nivel: A)

Título del subcriterio: 1.3.1-J

Universidad participante: UdL

Curso académico: 2025-26

1.3.1-J

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-J

---

2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
http://zara.com/

2.1.2. Código HTML:

<table class="zrc-measure-size-guide-table"> <thead>...</thead> <tbody>...</tbody> </table>

Explicación del problema detectado:

A la captura de pantalla del codi font de Zara, s'observa que l'etiqueta s'utilitza sense cap tipus d'atribut descriptiu. Concretament, manca l'atribut summary. Aquest atribut és una tècnica específica del criteri 1.3.1 (sovint associada a la tècnica H73 de les WCAG) que serveix per proporcionar una descripció de l'organització de la taula o una explicació de com navegar-hi, especialment quan la taula és complexa. En el cas de Zara, la taula presenta una graella de mesures (XS, S, M, L...) relacionades amb zones del cos (Pit, Esquena, Braç...). Tot i ser una informació estructuralment complexa, el codi es presenta "nu". Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Les persones amb discapacitat visual total que depenen de lectors de pantalla per navegar són les principals afectades per aquesta mancança, ja que la falta d'un atribut summary o d'una etiqueta caption fa que el programari no pugui anunciar el propòsit de la taula en interactuar-hi per primera vegada. Aquesta absència de context inicial genera una barrera de desorientació immediata perquè l'usuari només rep informació genèrica sobre el nombre de files i columnes però no sap si les dades corresponen a mides, preus o estoc del producte. Així mateix, els usuaris amb baixa visió que utilitzen magnificadors o persones amb dificultats cognitives també es veuen perjudicades en perdre la referència estructural de la informació complexa que presenta Zara. La barrera principal és la navegació ineficient i la fatiga cognitiva, ja que l'usuari es veu obligat a explorar diverses cel·les a cegues per intentar deduir la relació entre les zones del cos i les mides, cosa que resulta en una pèrdua de temps considerable i una experiència frustrant. En definitiva, es genera una situació d'inequitat en l'accés on l'usuari amb discapacitat ha d'invertir un esforç molt superior al d'un usuari visual per obtenir una dada bàsica per a la compra, fet que pot provocar l'abandonament de la pàgina davant la incertesa de no poder confirmar la talla correctament.

---

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.

2.2.2 Código HTML:

<table class="zrc-measure-size-guide-table" summary="Taula comparativa de talles que relaciona la zona del cos amb la mesura en centímetres per a les talles XS fins a XXL."> <caption>Mesures detallades de la jaqueta</caption> <thead> <tr> <th scope="col">ZONA</th> <th scope="col">XS</th> <th scope="col">S</th> </tr> </thead> <tbody>...</tbody> </table>

Explicación de la solución aplicada:

La solució per garantir l’accessibilitat d’aquesta taula de dades consisteix a establir una relació d'informació clara i determinable per programari mitjançant la incorporació d'etiquetes semàntiques que identifiquin la regió. En primer lloc, cal afegir l'etiqueta

immediatament després de l'obertura de la taula per proporcionar un títol visible i programàtic que descrigui el seu contingut, com per exemple "Taula de mesures del producte en centímetres". Per reforçar aquesta identificació en taules de dades complexes, és altament recomanable incloure l'atribut summary dins de l'etiqueta , el qual, tot i ser invisible visualment, permet oferir una explicació detallada sobre com està organitzada la informació als usuaris de lectors de pantalla. A més d'aquests elements d'identificació general, la solució implica definir correctament les capçaleres de fila i columna utilitzant l'etiqueta

amb l'atribut scope, assegurant que cada dada numèrica estigui vinculada a la seva zona del cos i talla corresponent. Amb aquesta implementació, el programari d'assistència pot anunciar el context de la taula tan bon punt l'usuari hi interactua, eliminant la barrera de la desorientació i permetent una navegació eficient i autònoma que garanteix que qualsevol persona, independentment de la seva capacitat visual, pugui interpretar correctament les mides abans de realitzar una compra.