2526UPSA1.1.1-G-000
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.1_Texto_Alternativo/1.1.1-G
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.aytosalamanca.es/
2.1.2. Código HTML:
<img alt="Icono de Movilidad y urbanismo" style="height:auto;" class="salamanca-object" src="https://www.aytosalamanca.es/documents/32601/44870/movilidad-icono.png/ce25e3e3-9b60-f221-c385-5b8ab71c0410?version=1.0&t=1705058992278" aria-hidden="true" tabindex="-1">
Explicación del problema detectado:
Aunque el desarrollador puso un texto alternativo (alt="Icono de Movilidad y urbanismo"), cometió un error grave al añadir el atributo aria-hidden="true" ignorando así este elemento y todo lo que haya dentro de él, además no identifica su función o destino.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Para un usuario ciego, ese icono simplemente no existe, ya que el lector de pantalla no leerá el texto del alt.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.apple.com/es/iphone/
2.2.2 Código HTML:
<img src="/v/iphone/home/cg/images/overview/select/iphone_17pro__0s6piftg70ym_large.jpg" onload="window.__lp?.(event)" alt="iPhone 17 Pro en acabado naranja cósmico, parte delantera que muestra parcialmente la pantalla, parte lateral que muestra el botón Acción, los botones de volumen y el botón lateral, parte trasera que muestra el sistema de cámaras Pro en la esquina superior izquierda.">
Explicación de la solución aplicada:
Aquí, el propósito es vender el diseño del teléfono. Un usuario ciego recibe la misma información estética que un usuario sin discapacidad visual.
