2526UdL1.4.12-A-003
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.12-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.w3.org/WAI/WCAG21/Techniques/failures/F104
2.1.2. Código HTML:
<div style="font-size:100%; width:130px;
height:95px; overflow:hidden; border:thin solid gray;">
<p>Now is the time for all good men to come to the aid of their country.</p>
</div>
<p>The quick brown fox jumps over the lazy dog.</p>
Explicación del problema detectado:
El texto está dentro de un contenedor con altura fija (height:95px) y (overflow:hidden), si se usa un espaciado “normal”, el texto cabe y parece correcto. Sin embargo cuando el usuario aplica los ajustes mínimos que exige el criterio 1.4.12 (por ejemplo, aumentar el line-height a 1.5 y los espaciados entre letras y palabras), el contenido necesita más espacio vertical, como el contenedor no puede crecer (por la altura fija) y además está configurado para ocultar el exceso (overflow:hidden), parte del texto queda recortado y el usuario pierde información.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Baja visión (barrera grave): Muchas personas aumentan el interlineado y los espaciados para leer mejor, si el contenido se recorta, la lectura se vuelve imposible porque falta parte del texto, por lo tanto se pierde información.
Discapacidad cognitiva (barrera moderada): En casos de usuarios con dislexia u otras dificultades de procesamiento, es beneficioso el aumento de espaciado. Si al hacerlo el texto se corta o se desordena, aumenta el esfuerzo cognitivo y los errores de comprensión.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.w3.org/WAI/WCAG21/Techniques/css/C36
2.2.2 Código HTML:
<style>
.card {
font-size: 1rem;
line-height: 1.5;
max-width: 40em;
}
.card p {
margin-bottom: 2em;
}
</style>
<div class="card">
<p>
Ejemplo de texto dentro de un contenedor flexible.
El diseño permite que el contenido crezca en altura cuando el
usuario ajusta el interlineado o el espaciado.
</p>
</div>
Explicación de la solución aplicada:
Este caso en concreto no utiliza una altura fija que limite el crecimiento del texto, el contenedor es flexible y permite que el contenido se adapte automáticamente cuando el usuario incrementa el interlineado, el espaciado entre letras o el espaciado entre palabras.
En lugar de valores absolutos en pixeles, se utilizan unidades relativas (rem, em), que facilitan la adaptabilidad del diseño. Al aplicar los valores mínimos exigidos por el criterio (interlineado 1.5, doble espaciado entre párrafos, etc...), el contenido permanece visible, legible y funcional.
Personas con baja visión: Pueden aumentar el espaciado sin que el texto se corte ni desaparezca, esto mejora significativamente la legibilidad.
Personas con dificultades cognitivas o dislexia:
El aumento del espacio entre líneas, palabras y letras reduce la densidad visual del texto, facilitando la comprensión y disminuyendo la fatiga lectora.
