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
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<img src="boton_oferta.jpg" alt="Oferta especial verano">
Explicación del problema detectado:
El ejemplo utiliza una imagen de mapa de bits (jpg, png) para representar texto informativo en lugar de utilizar texto real formateado con CSS. El texto está "incrustado" en los píxeles de la imagen. Aunque visualmente se lea el mensaje, el navegador no lo reconoce como caracteres de texto, sino como un objeto gráfico .
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
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:
<button style="background-color: #0056b3; color: white; font-size: 1.2em; padding: 10px 20px; border: none;">
Oferta especial verano
</button>
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 .
