Diferencia entre revisiones de «2526UPSA1.4.5-A-001»
Página creada con «{{ActividadWCAG |id_criterio=1.4.5 - Imágenes de texto (Nivel: AA) |id_subcriterio=1.4.5-A |id_universidad=UPSA |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.5-A |noa_barrera_evidencia_html=<nowiki> <img src="boton_oferta.jpg" alt="Oferta especial verano"> </nowiki> |noa_barrera_explicacion=El ejemplo utiliza una imagen de mapa de bits (jpg, png) para representar texto informativo en lugar de utilizar texto real formatea…» |
Sin resumen de edición |
||
| Línea 5: | Línea 5: | ||
|curso_academico=2025-26 | |curso_academico=2025-26 | ||
|enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.5-A | |enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.5-A | ||
|noa_barrera_evidencia_img=2526UPSA1.4.5-A-001.png | |||
|noa_barrera_evidencia_url=https://www.lidl.es/l/folletos/folleto-alimentacion-26-01-26-01-26-01-02-26/view/flyer/page/1 | |||
|noa_barrera_evidencia_html=<nowiki> | |noa_barrera_evidencia_html=<nowiki> | ||
<img src=" | <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> | |||
</nowiki> | </nowiki> | ||
|noa_barrera_explicacion= | |noa_barrera_explicacion=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. | ||
|noa_barrera_usuarios=Personas afectadas: Principalmente personas con baja visión y usuarios con dificultades de lectura (dislexia) que necesitan personalizar la visualización del texto. | |noa_barrera_usuarios=Personas afectadas: Principalmente personas con baja visión y usuarios con dificultades de lectura (dislexia) que necesitan personalizar la visualización del texto. | ||
| Línea 16: | Línea 26: | ||
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. | 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. | ||
|acc_barrera_evidencia_img=2526UPSA1.4.5-A-0012.png | |||
|acc_barrera_evidencia_html=<nowiki> | |acc_barrera_evidencia_html=<nowiki> | ||
< | <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> | |||
</nowiki> | </nowiki> | ||
|acc_barrera_explicacion=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). | |acc_barrera_explicacion=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). | ||
Revisión del 20:58 21 ene 2026
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
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
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 .
