2526UdL1.3.1-L-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-L
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>Ejemplo no accesible - Tabla de maquetación</title>
</head>
<body>
<table border="1" width="100%"> <tr>
<td colspan="2"> <h1>Mi página web</h1> </td> </tr>
<tr>
<td width="25%"> <h2>Menú</h2>
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul> </td>
<td width="75%">
<h2>Contenido principal</h2> <p>Bienvenido a mi página web.</p> </td> </tr>
</table>
</body>
</html>
Explicación del problema detectado:
Cuando una tabla se utiliza únicamente para maquetar el diseño y no para mostrar datos reales, las personas usuarias que emplean tecnologías de asistencia, como lectores de pantalla, reciben información estructural incorrecta. El lector anuncia la presencia de una tabla con filas y columnas, lo que hace que la persona espere datos organizados, cuando en realidad solo hay contenido visual distribuido en columnas. Esto genera desorientación y ralentiza la navegación. Además, puede alterar el orden lógico de lectura y aumentar la carga cognitiva, dificultando la comprensión de la estructura real de la página.
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>Ejemplo accesible - Maquetación con CSS</title>
<style> body { margin: 0; font-family: Arial, sans-serif; } header { background: #003366; color: white; padding: 1rem; } .contenedor { display: flex; } nav { width: 25%; background: #f2f2f2; padding: 1rem; } main { width: 75%; padding: 1rem; }
</style>
</head>
<body>
<header>
<h1>Mi página web</h1> </header>
<div class="contenedor"> <nav> <h2>Menú</h2> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> <main> <h2>Contenido principal</h2> <p>Bienvenido a mi página web.</p> </main> </div>
</body>
</html>
Explicación de la solución aplicada:
En este ejemplo la maquetación se realiza mediante CSS y se emplean elementos semánticos como <header>, <nav> y <main>. No se utilizan tablas para estructurar visualmente el contenido, reservándose estas únicamente para datos tabulares reales. De este modo, la información y las relaciones estructurales se transmiten correctamente a las tecnologías de asistencia.
Las personas usuarias de lectores de pantalla pueden comprender la estructura del contenido de forma clara y coherente. Se mejora la navegación, la orientación dentro de la página y la experiencia general de accesibilidad.
