2526UFV1.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>NOA – 1.4.10-A</title>
<style>
.contenedor {
width: 1000px; /* Ancho fijo */
border: 1px solid #000;
padding: 16px;
}
.columna {
display: inline-block;
width: 300px;
vertical-align: top;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Ejemplo NO accesible – Diseño con ancho fijo</h1>
<div class="contenedor">
<div class="columna">
<h2>Noticias</h2>
<p>Últimas noticias del día.</p>
</div>
<div class="columna">
<h2>Eventos</h2>
<p>Próximos eventos y actividades.</p>
</div>
<div class="columna">
<h2>Contacto</h2>
<p>Información de contacto y localización.</p>
</div>
</div>
</body>
</html>
Explicación del problema detectado:
El diseño utiliza un ancho fijo de 1000px y columnas colocadas en horizontal.
En pantallas estrechas (320px) o con zoom elevado (400%), el contenido no se reorganiza y obliga a usar scroll horizontal y vertical.
Se incumple el criterio porque el contenido no se reconfigura para adaptarse a áreas de visualización reducidas.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con baja visión que usan zoom alto, que en este caso tendrían la necesidad constante de desplazarse en dos direcciones.
Personas con movilidad reducida, que tienen dificultad física para manejar scroll horizontal y vertical.
Personas con discapacidad cognitiva, que este ejemplo implica un aumento de carga cognitiva al perder la continuidad del contenido.
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>ACC – 1.4.10-A</title>
<style>
.contenedor {
max-width: 100%;
border: 1px solid #000;
padding: 16px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.columna {
flex: 1 1 300px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<h1>Ejemplo accesible – Diseño adaptable (Reflow)</h1>
<div class="contenedor">
<div class="columna">
<h2>Noticias</h2>
<p>Últimas noticias del día.</p>
</div>
<div class="columna">
<h2>Eventos</h2>
<p>Próximos eventos y actividades.</p>
</div>
<div class="columna">
<h2>Contacto</h2>
<p>Información de contacto y localización.</p>
</div>
</div>
</body>
</html>
Explicación de la solución aplicada:
El diseño utiliza anchos flexibles y permite que los bloques se reorganicen verticalmente.
En pantallas estrechas o con zoom alto las columnas pasan a mostrarse una debajo de otra y no aparece scroll horizontal.
El contenido mantiene toda la información y funcionalidad, cumpliendo el criterio de Reflow.
