2526UPSA1.3.1-J-001
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-J
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
http://cppadremanjon.centros.educa.jcyl.es/sitio/
2.1.2. Código HTML:
<table
style="width: 627px; height: 38px; margin-left: auto; margin-right: auto;"
border="0"
>
<tbody>
<tr>
<td>
<iframe
style="display: block; margin-left: auto; margin-right: auto;"
title="YouTube video player"
allowfullscreen=""
frameborder="0"
height="202"
src="https://www.youtube.com/embed/IVB5P5_dhSU?si=xD8Vi-2mIXoCwyJD"
width="359"
></iframe>
</td>
<td>
<iframe
style="display: block; margin-left: auto; margin-right: auto;"
allowfullscreen=""
frameborder="0"
height="205"
src="https://www.youtube.com/embed/aaEbpsLcuCc"
width="364"
></iframe>
</td>
</tr>
<tr>
<td>
<iframe
style="display: block; margin-left: auto; margin-right: auto;"
title="YouTube video player"
allowfullscreen=""
frameborder="0"
height="184"
src="https://www.youtube.com/embed/AgsUXpx-yHc?si=1TKidOfpJb_3r7GL"
width="353"
></iframe>
</td>
<td>
<iframe
style="display: block; margin-left: auto; margin-right: auto;"
title="YouTube video player"
allowfullscreen=""
frameborder="0"
height="185"
src="https://www.youtube.com/embed/8yGD9OrtYvA?si=zecIVIB0pPJd1WO2"
width="329"
></iframe>
</td>
</tr>
</tbody>
</table>
Explicación del problema detectado:
La página hace uso de un elemento table para mostrar una serie de vídeos, pero en ningún momento pone la etiqueta summary dentro del html correspondiente a la tabla para describir sobre qué se está mostrando la información dentro del elemento table.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con discapacidad visual o sordoceguera que se ayudan de lectores de pantalla no puedan anticipar la estructura ni el contenido de la tabla, obligándoles a recorrerla celda por celda sin contexto, lo que incrementa el esfuerzo cognitivo, la confusión y el tiempo necesario para acceder a la información.
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 style="width: 627px; height: 38px; margin-left: auto; margin-right: auto;" border="0" summary="Esta tabla muestra cuatro videos educativos de YouTube sobre el colegio, organizados en dos filas. Cada fila contiene dos videos relacionados con diferentes actividades del colegio.">
<tbody>
<tr>
<td>
<iframe style="display: block; margin-left: auto; margin-right: auto;"
title="Video sobre la historia del colegio"
allowfullscreen="" frameborder="0" height="202"
src="https://www.youtube.com/embed/IVB5P5_dhSU?si=xD8Vi-2mIXoCwyJD" width="359">
</iframe>
</td>
<td>
<iframe style="display: block; margin-left: auto; margin-right: auto;"
title="Video sobre actividades extracurriculares"
allowfullscreen="" frameborder="0" height="205"
src="https://www.youtube.com/embed/aaEbpsLcuCc" width="364">
</iframe>
</td>
</tr>
<tr>
<td>
<iframe style="display: block; margin-left: auto; margin-right: auto;"
title="Video de los eventos escolares del último año"
allowfullscreen="" frameborder="0" height="184"
src="https://www.youtube.com/embed/AgsUXpx-yHc?si=1TKidOfpJb_3r7GL" width="353">
</iframe>
</td>
<td>
<iframe style="display: block; margin-left: auto; margin-right: auto;"
title="Video de la participación en competencias deportivas"
allowfullscreen="" frameborder="0" height="185"
src="https://www.youtube.com/embed/8yGD9OrtYvA?si=zecIVIB0pPJd1WO2" width="329">
</iframe>
</td>
</tr>
</tbody>
</table>
Explicación de la solución aplicada:
En este ejemplo hemos corregido la tabla, ahora incorpora el atributo summary, que ofrece una descripción clara de la estructura y del contenido antes de que el lector de pantalla empiece a recorrerla, facilitando la comprensión global de la información. Además, cada vídeo incluye un atributo title descriptivo en el iframe, lo que permite a los usuarios de tecnologías de apoyo identificar correctamente el contenido de cada elemento, convirtiendo la evidencia en un ejemplo accesible y comprensible para personas con discapacidad visual.
