2526UPSA1.4.5-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.5-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.lidl.es/l/folletos/folleto-alimentacion-26-01-26-01-26-01-02-26/view/flyer/page/1
2.1.2. Código HTML:
<div class="flyer__image_wrapper">
<img data-leaflet-image
class="flyer__image"
src="https://imgproxy.leaflets.schwarz/folleto-alimentacion-page-01.jpg"
alt="" />
</div>
<div class="flyer__content">
<div class="flyer__name">FOLLETO ALIMENTACIÓN 19/01</div>
</div>
Explicación del problema detectado:
En el código extraído de la página, se observa que la portada del folleto de alimentación se carga mediante una etiqueta <img>. Todo el contenido textual visual (precios, nombres de productos, fechas "19/1/26") forma parte de los píxeles de la imagen. Además, el atributo alt se encuentra vacío, lo que incumple doblemente la pauta: no es texto real y ni siquiera tiene una alternativa textual que describa la oferta.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas afectadas: Principalmente personas con baja visión y usuarios con dificultades de lectura (dislexia) que necesitan personalizar la visualización del texto.
Barreras:
Imposibilidad de personalización: El usuario no puede cambiar el tipo de fuente, el tamaño o el contraste (colores) del texto dentro de la imagen para adaptarlo a sus necesidades visuales.
Pixelado al ampliar: Si un usuario con baja visión utiliza el zoom del navegador, la imagen se distorsiona y pixela, haciendo el texto borroso e ilegible, a diferencia del texto real que se redibuja nítidamente.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
Archivo:2526UPSA1.4.5-A-0012.png 2526UPSA1.4.5-A-0021.png
b) Enlace de donde se ha obtenido la imagen:
https://getbootstrap.com/docs/5.3/examples/heroes/
2.2.2 Código HTML:
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="bootstrap-themes.png" alt="Temas de Bootstrap" width="700" height="500">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">
Diseño adaptable y accesible
</h1>
<p class="lead">
Diseña y personaliza rápidamente sitios web adaptables para dispositivos móviles...
</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Ver más</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Cancelar</button>
</div>
</div>
</div>
</div>
Explicación de la solución aplicada:
La solución sustituye la imagen por texto real estructurado en HTML y estilizado mediante hojas de estilo (CSS) para lograr la apariencia visual deseada (fondo de color, tipografía específica).
Esto permite que el texto mantenga su nitidez al ampliarse (hacer zoom) y que los usuarios puedan modificar sus propiedades (como cambiar a modo alto contraste o aumentar el tamaño de la fuente) sin que la información se pierda o degrade .
