2526UPSA.1.3.1-E-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.4-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://xarxaempren.gencat.cat/es/inici/index.html">https://xarxaempren.gencat.cat/es/inici/index.html</a> <a rel="nofollow" class="external free" href="https://xarxaempren.gencat.cat/es/inici/index.html">https://xarxaempren.gencat.cat/es/inici/index.html</a>]
2.1.2. Código HTML:
<div style="width: 200px; height: 50px; overflow: hidden; border: 1px solid red;">
<p>Oferta especial: Compra ahora y recibe un 50% de descuento en todos los productos de la tienda online antes del domingo.</p>
</div>
Explicación del problema detectado:
El contenedor tiene una altura fija (height: 50px) y la propiedad overflow: hidden. Cuando el usuario aumenta el tamaño del texto, este necesita más espacio vertical, desborda la caja y es ocultado/cortado por el navegador.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afectados: usuarios con baja visión (cataratas, presbicia, glaucoma) que usan ampliación de texto.
Barrera: pérdida total de información crítica, ya que el final de las frases desaparece y es imposible de leer o recuperar.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.gov.uk/">https://www.gov.uk/</a> <a rel="nofollow" class="external free" href="https://www.gov.uk/">https://www.gov.uk/</a>]
2.2.2 Código HTML:
<div style="width: 200px; min-height: 50px; border: 1px solid green;">
<p>Oferta especial: Compra ahora y recibe un 50% de descuento en todos los productos de la tienda online antes del domingo.</p>
</div>
Explicación de la solución aplicada:
Se cambia height por min-height y se elimina overflow: hidden. Esto permite que la caja tenga un tamaño inicial, pero si el texto crece (zoom), la caja se estira verticalmente para acomodarlo todo.
