2526UdL1.3.1-K-003
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-K
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
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.1.2. Código HTML:
<!-- ERROR: Es fa servir un div amb negreta en lloc de <caption> -->
<div style="font-weight: bold; font-size: 1.2em;">Llista d'Usuaris i Rols</div>
<table border="1">
<!-- ERROR: Es fa servir una fila normal (tr/td) amb estils en lloc d'encapçalaments (th) -->
<tr style="background-color: #eee;">
<td><b>Nom complet</b></td>
<td><b>Correu electrònic</b></td>
<td><b>Permisos</b></td>
</tr>
<tr>
<td>Joan Pérez</td>
<td>joan@exemple.cat</td>
<td>Administrador</td>
</tr>
<tr>
<td>Anna García</td>
<td>anna@exemple.cat</td>
<td>Editora</td>
</tr>
</table>
Explicación del problema detectado:
- Absència de caption per al títol: El text "Llista d’usuaris i rols" s'ha creat amb un div estilitzat. Tot i que visualment sembla un títol, els lectors de pantalla no el vinculen amb la taula. Això fa que l'usuari cec no rebi el context necessari abans de començar a navegar per les dades. Segons la normativa, aquest text hauria d'estar dins d'una etiqueta caption per ser semànticament correcte.
- Ús de td en lloc de th a les capçaleres: La fila superior ("Nom complet", "Correu electrònic", etc.) s'ha definit amb cel·les de dades estàndard (td) i negretes visuals. En no fer servir l'etiqueta de capçalera th, el lector de pantalla no pot associar cada dada (com "Juan Pérez") amb la seva columna corresponent. L'usuari sent una llista de noms i correus sense saber a què es refereix cada camp, trencant la relació lògica de la taula.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Discapacitat visual total: Sense l'etiqueta caption, l'usuari no rep el títol de la taula en entrar-hi i perd el context. A més, si no s'utilitza th, el lector de pantalla no pot associar les dades amb la seva capçalera, provocant una desorientació total en llegir valors solts sense saber a quina columna pertanyen.
- Sordceguesa:És una barrera crítica per a la lectura lineal en braille. La falta de th i caption impedeix que la persona identifiqui l'estructura de la graella, obligant-la a deduir manualment la relació entre les dades, cosa que fa la navegació extremadament lenta i ineficient.
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>
<caption>Llista d'usuaris i rols</caption>
<tr>
<th scope="col">Nom complet</th>
<th scope="col">Correu electrònic</th>
<th scope="col">Permisos</th>
</tr>
<tr>
<td>Joan Pérez</td>
<td>joan@exemple.cat</td>
<td>Administrador</td>
</tr>
<tr>
<td>Anna García</td>
<td>anna@exemple.cat</td>
<td>Editora</td>
</tr>
</table>
Explicación de la solución aplicada:
- Ús de l'etiqueta caption: En lloc d'un text extern, el títol "Llista d’usuaris i rols" s'integra dins la taula amb caption. Això permet que els lectors de pantalla l'anuncien immediatament en entrar-hi, donant context a l'usuari abans que comenci a llegir les dades.
- Capçaleres amb th scope="col": S'ha substituït els td per th (table headers). L'atribut scope="col" indica explícitament que aquella cel·la és la capçalera de tota la columna. D'aquesta manera, si un usuari navega per la cel·la de "Juan Pérez", el lector de pantalla dirà automàticament: "No complet: Joan Pérez".
- Codi net: S'han eliminat els atributs visuals obsolets (com border="1") i els estils inline. Tota l'aparença es gestiona mitjançant CSS, separant completament el contingut (HTML) del disseny. Això fa que el codi sigui més fàcil de mantenir i més lleuger per als navegadors.
