2526UdL1.4.10-A-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.4_Distinguible/1.4.10-A
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>Diseño fijo no responsive</title>
<style> body { margin: 0; } .contenedor { width: 1200px; background-color: lightgray; padding: 20px; } </style> </head>
<body> <div class="contenedor"> <h1>Mi sitio web</h1> <p>Este diseño tiene un ancho fijo de 1200px.</p> <p>Al hacer zoom al 200% o más, aparecerá scroll horizontal.</p> </div>
</body>
</html>
Explicación del problema detectado:
El diseño utiliza un ancho fijo en píxeles, lo que impide que el contenido se adapte cuando se amplía hasta el 200% o más. Como consecuencia, aparece desplazamiento horizontal además del vertical, incumpliendo el criterio, que exige que el contenido pueda reorganizarse sin necesidad de scroll en dos dimensiones.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con baja visión que necesitan ampliar el contenido deben desplazarse horizontal y verticalmente para leer cada línea, lo que dificulta la comprensión, aumenta la carga cognitiva y puede provocar pérdida de contexto.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.bbc.com/
2.2.2 Código HTML:
Explicación de la solución aplicada:
El ejemplo utiliza un diseño adaptable (responsive), incluyendo la etiqueta meta viewport y medidas relativas o porcentuales en lugar de anchos fijos. El contenido se reorganiza automáticamente cuando se amplía, evitando el desplazamiento horizontal y cumpliendo el criterio.
Las personas con baja visión pueden ampliar el contenido hasta el 400% sin perder funcionalidad ni contexto. Esto mejora la legibilidad, la autonomía y la accesibilidad general del sitio web.
