2526UPSA1.1.1-E-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-E
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:
<div>
<p>Ejemplo con arte ASCII, emoticono y leetspeak (sin alternativa textual):</p>
<pre>
@@@@
@....@
@.@@.@
@....@
@@@@
</pre>
<p>Qué bien :D</p>
<p>H0L4, ¿q t4l?</p>
</div>
Explicación del problema detectado:
El ejemplo incluye arte ASCII, un emoticono “:D” y texto en leetspeak (“H0L4”) sin una alternativa textual cercana. Un lector de pantalla puede leer los caracteres de forma literal o confusa y el significado (cara feliz / “HOLA”) no queda claro, lo que impide comprender el contenido y el tono del mensaje.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas afectadas: usuarios con discapacidad visual (ceguera total) que usan lectores de pantalla y usuarios con dificultades cognitivas.
Barrera: el lector de pantalla puede anunciar caracteres y símbolos sin transmitir el significado del dibujo, del emoticono o del leetspeak. Esto genera confusión, pérdida de información (tono/emoción) y dificulta entender el mensaje.
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:
<div>
<p>Ejemplo accesible con alternativa textual cercana:</p>
<pre aria-hidden="true">
@@@@
@....@
@.@@.@
@....@
@@@@
</pre>
<p><span class="sr-only">Dibujo ASCII: un cuadrado con un patrón interno.</span></p>
<p><span role="img" aria-label="Emoticono de cara muy feliz">😀</span></p>
<p><span aria-label="HOLA">H0L4</span></p>
</div>
Explicación de la solución aplicada:
Se añade una alternativa textual cercana para el contenido no estándar: el arte ASCII se acompaña de una descripción (“Dibujo ASCII…”), el emoticono se marca con role="img" y aria-label para que el lector de pantalla anuncie su significado, y el leetspeak “H0L4” incluye un aria-label="HOLA". Así, la información se transmite de forma comprensible para tecnologías de apoyo y usuarios con dificultades cognitivas.
