2526UFV1.4.1-B-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.1_-_Uso_del_color_-_Nivel:_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:
<p>
For more information about the application process, visit our
<span style="color:black;">admissions page</span>
to check deadlines and requirements.
</p>
<p>
You can also read the
<span style="color:black;">privacy policy</span>
before submitting your data.
</p>
Explicación del problema detectado:
In this example, links are presented using the same visual appearance as the surrounding text. They are not visually distinguished through color, decoration, or any other non-color cue. As a result, users cannot easily identify which parts of the text are interactive and which are plain content. This fails criterion 1.4.1-B because links are differentiated only by context and not by clear visual indicators.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Users with visual impairments, color vision deficiencies, or cognitive disabilities may not be able to identify links within the text. This can cause confusion and make navigation more difficult, as users may miss important actions or information. Additionally, users who rely on visual scanning to find interactive elements may not realize that certain text can be clicked, reducing usability and accessibility.
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:
<p>
For more information about the application process, visit our
<a href="#" style="color:blue; text-decoration:underline;">
admissions page
</a>
to check deadlines and requirements.
</p>
<p>
You can also read the
<a href="#" style="color:blue; text-decoration:underline;">
privacy policy
</a>
before submitting your data.
</p>
Explicación de la solución aplicada:
In the accessible version, links are visually distinguishable from the surrounding text using clear visual indicators. This allows users to immediately recognize which elements are interactive without relying solely on color perception or contextual clues. By making links clearly identifiable, the content becomes easier to understand and navigate for all users, fulfilling the requirements of criterion 1.4.1-B.
