2526UPSA1.4.10-A-000
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
b) Enlace de donde se ha obtenido la imagen:
https://codepen.io/shepelevstas/pen/ebPPmq
2.1.2. Código HTML:
<div style="width:1200px; background:#eee; display:inline-block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
(Bloque con ancho fijo que no se adapta a 320px)
</div>
<p>
Más contenido debajo para forzar scroll vertical también.
</p>
Explicación del problema detectado:
El contenido incluye un contenedor con ancho fijo (1200px). En un viewport reducido (320px) el contenido no refluye, por lo que aparece scroll horizontal. Como además hay contenido adicional, el usuario termina necesitando scroll en dos dimensiones, incumpliendo 1.4.10-A.
codepen.io
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Baja visión: con zoom alto deben desplazarse izquierda/derecha para leer cada línea, perdiendo el contexto y aumentando la carga cognitiva.
Discapacidad motriz: el doble desplazamiento (horizontal + vertical) aumenta el esfuerzo físico y la probabilidad de errores al navegar.
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:
<style>
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 12px;
}
@media (max-width: 320px) {
.layout { grid-template-columns: 1fr; }
}
</style>
<div class="layout">
<div>
<h2>Menú</h2>
<p>Opciones</p>
</div>
<div>
<h2>Contenido</h2>
<p>El contenido refluye en una sola columna en pantallas estrechas.</p>
</div>
</div>
Explicación de la solución aplicada:
El diseño usa CSS Grid y una media query para reorganizar el contenido cuando el ancho es reducido (p.ej., 320px). En lugar de obligar a desplazarse horizontalmente, las columnas se apilan y el contenido se mantiene legible y operable con scroll en una sola dirección, cumpliendo 1.4.10-A.
