2526UFV1.3.1-I-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-I
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Gastos mensuales</title>
</head>
<body>
<h1>Ejemplo NO accesible – Tabla sin <caption></h1>
<p><strong>Gastos mensuales</strong></p>
<table border="1">
<tr>
<th>Categoría</th>
<th>Importe (€)</th>
</tr>
<tr>
<td>Alquiler</td>
<td>800</td>
</tr>
<tr>
<td>Alimentación</td>
<td>250</td>
</tr>
<tr>
<td>Transporte</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Explicación del problema detectado:
La tabla tiene un título visible, pero este no está asociado semánticamente a la tabla.
Afecta a personas ciegas que usan lectores de pantalla: falta de contexto al entrar en la tabla. Afecta a personas con baja visión: dificultad para identificar rápidamente el tema de la tabla. Afecta a personas con discapacidad cognitiva: mayor esfuerzo para comprender los datos.
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Gastos mensuales</title>
</head>
<body>
<h1>Ejemplo accesible – Tabla con <caption></h1>
<table border="1">
<caption>Gastos mensuales</caption>
<tr>
<th>Categoría</th>
<th>Importe (€)</th>
</tr>
<tr>
<td>Alquiler</td>
<td>800</td>
</tr>
<tr>
<td>Alimentación</td>
<td>250</td>
</tr>
<tr>
<td>Transporte</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Explicación de la solución aplicada:
