2526UdL1.3.1-G-002

De WCAG Wiki

Edición de la página como 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-G
Universidad participante: UdL
Curso académico: 2025-26

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



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:
https://www.alsa.com/ruta/barcelona-valencia

2.1.2. Código HTML:

<tr> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><p> <picture data-fileentryid="58896754"> <source media="(max-width:128px)" srcset="/o/adaptive-media/image/58896754/Preview-1000x0/reloj.png?t=1701341441734"> <source media="(max-width:128px) and (min-width:128px)" srcset="/o/adaptive-media/image/58896754/Thumbnail-300x300/reloj.png?t=1701341441734"> <img alt="" height="15" src="/documents/21643679/21664826/reloj.png/883aea9c-2895-c75b-f234-a037fed51dcd?t=1701341441734" width="15"> </picture>  Duración del viaje</p></td> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"> <strong>3:50h - 4:30h</strong></td> </tr> <tr> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><p><span id="cke_bm_661S" style="display: none;"> </span> <picture data-fileentryid="49892894"> <source media="(max-width:128px)" srcset="/o/adaptive-media/image/49892894/Preview-1000x0/icono-bus.png?t=1683122483260"> <source media="(max-width:128px) and (min-width:128px)" srcset="/o/adaptive-media/image/49892894/Thumbnail-300x300/icono-bus.png?t=1683122483260"> <img alt="" height="17" src="/documents/21643679/21664826/icono-bus.png/b4a4262c-0203-32c7-f791-529c417b8067?t=1683122483260" width="17"> </picture>  Primer bus </p></td> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><strong> 00:25h </strong></td> </tr> <tr> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><p><span id="cke_bm_661S" style="display: none;"> </span> <picture data-fileentryid="49892894"> <source media="(max-width:128px)" srcset="/o/adaptive-media/image/49892894/Preview-1000x0/icono-bus.png?t=1683122483260"> <source media="(max-width:128px) and (min-width:128px)" srcset="/o/adaptive-media/image/49892894/Thumbnail-300x300/icono-bus.png?t=1683122483260"> <img alt="" height="17" src="/documents/21643679/21664826/icono-bus.png/b4a4262c-0203-32c7-f791-529c417b8067?t=1683122483260" width="17"> </picture>  Último bus</p></td> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><strong> 22:00h</strong></td> </tr> <tr> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><p> <picture data-fileentryid="71422951"> <source media="(max-width:32px)" srcset="/o/adaptive-media/image/71422951/Preview-1000x0/picto-ruta-tren.png?t=1728381984722"> <source media="(max-width:32px) and (min-width:32px)" srcset="/o/adaptive-media/image/71422951/Thumbnail-300x300/picto-ruta-tren.png?t=1728381984722"> <img alt="" height="17" src="/documents/21643679/47255579/picto-ruta-tren.png/e0f78733-582d-bc32-67ca-4f8be4ce0169?t=1728381984722" width="17"> </picture>  Distancia de la ruta </p></td> <td style="border-bottom: 1.0px solid rgb(221,221,221);padding: 8.0px;"><strong> 350 km</strong></td> </tr> <tr> <td style="padding: 8.0px;"><p> <picture data-fileentryid="58896754"> <source media="(max-width:128px)" srcset="/o/adaptive-media/image/58896754/Preview-1000x0/reloj.png?t=1701341441734"> <source media="(max-width:128px) and (min-width:128px)" srcset="/o/adaptive-media/image/58896754/Thumbnail-300x300/reloj.png?t=1701341441734"> <img alt="" height="15" src="/documents/21643679/21664826/reloj.png/883aea9c-2895-c75b-f234-a037fed51dcd?t=1701341441734" width="15"> </picture>  Frecuencia</p></td> <td style="padding: 8.0px;"><strong> 21 buses diarios</strong></td> </tr>



Explicación del problema detectado:
No hay diferencia en la tabla entre los elementos "titulo" y la información dentro de la tabla sintaticamente.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Discapacidad visual total – Barrera grave

   Discapacidad sordoceguera – Barrera grave


2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://en.wikipedia.org/wiki/Black_hole


2.2.2 Código HTML:

<tr> <th>Class</th> <th>Approx.<br>mass</th> <th>Approx.<br>radius </th></tr> <tr> <td><a href="/wiki/Supermassive_black_hole#Ultramassive_black_holes" title="Supermassive black hole">Ultramassive black hole</a></td> <td style="text-align: center;">10<sup><span class="nowrap"><span data-sort-value="7000900000000000000♠"></span>9</span></sup>–10<sup><span class="nowrap"><span data-sort-value="7001110000000000000♠"></span>11</span></sup> <var>M</var><sub>☉</sub></td> <td style="text-align: center;">>1,000 <a href="/wiki/Astronomical_unit" title="Astronomical unit">AU</a> </td></tr> <tr> <td><a href="/wiki/Supermassive_black_hole" title="Supermassive black hole">Supermassive black hole</a></td> <td style="text-align: center;">10<sup><span class="nowrap"><span data-sort-value="7000600000000000000♠"></span>6</span></sup>–10<sup><span class="nowrap"><span data-sort-value="7000900000000000000♠"></span>9</span></sup> <var>M</var><sub>☉</sub></td> <td style="text-align: center;">0.001–400 <a href="/wiki/Astronomical_unit" title="Astronomical unit">AU</a> </td></tr> <tr> <td><a href="/wiki/Intermediate-mass_black_hole" title="Intermediate-mass black hole">Intermediate-mass black hole</a><sup id="cite_ref-mc04_115-0" class="reference"><a href="#cite_note-mc04-115"><span class="cite-bracket">[</span>115<span class="cite-bracket">]</span></a></sup></td> <td style="text-align: center;">10<sup><span class="nowrap"><span data-sort-value="7000200000000000000♠"></span>2</span></sup>–10<sup><span class="nowrap"><span data-sort-value="7000500000000000000♠"></span>5</span></sup> <var>M</var><sub>☉</sub></td> <td style="text-align: center;">10<sup>3</sup> km ≈ <a href="/wiki/Earth_radius" title="Earth radius"><i>R</i><sub>Earth</sub></a> </td></tr> <tr> <td><a href="/wiki/Stellar_black_hole" title="Stellar black hole">Stellar black hole</a></td> <td style="text-align: center;">2–150 <var>M</var><sub>☉</sub></td> <td style="text-align: center;">30 km </td></tr> <tr> <td><a href="/wiki/Micro_black_hole" title="Micro black hole">Micro black hole</a></td> <td style="text-align: center;">up to <i>M</i><sub><a href="/wiki/Moon" title="Moon">Moon</a></sub></td> <td style="text-align: center;">up to 0.1 mm </td></tr>



Explicación de la solución aplicada:

Aqui los titulos si tienen la etiqueta que hace que la lectura sea mas clara para los lectores de pantalla para discapacidades visuales.