2526UPSA1.3.3-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.3_Adaptable/1.3.3-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>Para guardar los cambios, pulsa el botón verde de la derecha.</p>
<p>Si quieres cancelar, pulsa el cuadrado rojo.</p>
<button style="background-color:green; color:white;">Guardar</button>
<button style="background-color:red; color:white;">Cancelar</button>
Explicación del problema detectado:
Las instrucciones para operar la interfaz dependen únicamente de características sensoriales como el color ("verde", "rojo") y la forma/posición ("derecha", "cuadrado"). No se hace referencia al texto o función del botón.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas ciegas que usan lectores de pantalla no saben qué botón es "el verde" o cuál está "a la derecha", ya que el lector solo les lee el texto del botón. Además, las personas con daltonismo pueden no distinguir qué botón es el rojo y cuál el verde.
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>Para guardar los cambios, pulsa el botón "Guardar".</p>
<p>Si quieres cancelar, pulsa el botón "Cancelar".</p>
<button style="background-color:green; color:white;">Guardar</button>
<button style="background-color:red; color:white;">Cancelar</button>
Explicación de la solución aplicada:
Las instrucciones identifican los controles por su etiqueta de texto ("Guardar" y "Cancelar"). Aunque los botones siguen teniendo color, la instrucción no depende solo de verlo, sino que nombra explícitamente la función, lo cual es comprensible para todos los usuarios, incluidos los que usan lectores de pantalla.
