2526UFV1.1.1-B-004
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-B
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>NOA – 1.1.1-B</title>
</head>
<body>
<h1>Ejemplo NO accesible – Texto alternativo no actualizado</h1>
<h2>Estado inicial (error)</h2>
<p>
El formulario contiene errores y se muestra un icono de error.
</p>
<img
src="error.svg"
alt="Error: el formulario contiene errores"
>
<h2>Estado posterior (éxito) – INCORRECTO</h2>
<p>
Visualmente el estado cambia a éxito, pero el texto alternativo se mantiene como si fuera un error.
</p>
<img
src="success.svg"
alt="Error: el formulario contiene errores"
>
</body>
</html>
Explicación del problema detectado:
En el estado posterior, el contenido no textual (en este caso, la imagen) cambia a un icono de éxito (success.svg).
Sin embargo, al atributo alt no se actualiza, y sigue indicando el error.
Esto provoca que la alternatica textual sea incoherente con lo que se muestra visualmente y transmite información incorrecta.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afecta a personas ciegas o con discapacidad visual que usan lectores de pantalla, que les comunica un estado de "Error" cuando en realidad es de "Éxito".
Afecta a personas con baja visión que combinan visión parcial con lector de pantalla, recibiendo mensajes contradictorios (ven éxito cuando oyen error), lo cual aumenta la confusión.
Afecta a personas con dificultades congniticas o de aprendizaje que dependen de ayudas auditicas o consistencia en la interfaz, identificando una inconsistencia entre estado visual y textual, lo que puede causar errores, desconfianza y abandono de la tarea.
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>ACC – 1.1.1-B</title>
</head>
<body>
<h1>Ejemplo accesible – Texto alternativo actualizado</h1>
<h2>Estado inicial (error)</h2>
<p>
El formulario contiene errores y se muestra un icono de error.
</p>
<img
src="error.svg"
alt="Error: el formulario contiene errores"
>
<h2>Estado posterior (éxito) – CORRECTO</h2>
<p>
El estado cambia a éxito y la alternativa textual se actualiza para describir correctamente el nuevo estado.
</p>
<img
src="success.svg"
alt="Éxito: el formulario se ha enviado correctamente"
>
</body>
</html>
Explicación de la solución aplicada:
Cuando el icono cambia a éxito (success.svg), el atributo alt también cambia y pasa a describir el nuevo estado de "Éxito".
Así, la alternativa textual se mantiene actualizada, es precisa y coherente con el contenido no textual.
Esto evita que los usuarios de tecnologías de apoyo reciban información desfasada o incorrecta.
