2526UPSA2.5.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_2/2.5_Modalidades_de_los_input/2.5.3-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.renfe.com/es/es
2.1.2. Código HTML:
Viajero 1: Pasajero 1
<input id="emailPassbook_1" class="col-md-8" type="email" placeholder="Introduce el email del viajero 1">
<button type="submit" id="enviarPassbook_1">Enviar</button>
Viajero 2: Pasajero 2
<input id="emailPassbook_2" class="col-md-8" type="email" placeholder="Introduce el email del viajero 2">
<button type="submit" id="enviarPassbook_2">Enviar</button>
Explicación del problema detectado:
El problema detectado es que algunos botones o campos de formulario, muestran una etiqueta visible que no coincide o no forma parte de su nombre accesible, por lo que los lectores de pantalla no anuncian correctamente el propósito del elemento. En este caso concreto solamente indica el envío de la confirmación al usuario, pero no a cuál de todos, ni tampoco incluyen las etiquetas "aria" correspondientes. Esto provoca que los usuarios que dependen de tecnologías de asistencia no puedan identificar con claridad la función del botón o campo, generando confusión y dificultando la interacción, ya que el texto que sirve para reconocer visualmente el elemento no es el mismo que el que se expone a nivel accesible.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta principalmente a personas con discapacidad visual que utilizan lectores de pantalla y a usuarios que emplean tecnologías de asistencia por voz, ya que el nombre accesible del componente no incluye la etiqueta visible que se muestra en pantalla.
La barrera que se genera es de comprensión e identificación, porque el usuario escucha un nombre distinto o incompleto al que ve una persona sin discapacidad, lo que provoca confusión, errores al interactuar con el formulario y dificulta completar la acción de forma autónoma.
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 class="container col-md-6 alin-text-viajero lstViajeros">
<p>Viajero 1: <span>Pasajero 1</span></p>
<input id="emailPassbook_1" class="col-md-8" type="email" placeholder="Introduce el email del viajero 1">
<button type="submit" id="enviarPassbook_1" aria-label="Enviar Passbook para Pasajero 1">Enviar</button>
</div>
<div class="container col-md-6 alin-text-viajero lstViajeros">
<p>Viajero 2: <span>Pasajero 2</span></p>
<input id="emailPassbook_2" class="col-md-8" type="email" placeholder="Introduce el email del viajero 2">
<button type="submit" id="enviarPassbook_2" aria-label="Enviar Passbook para Pasajero 2">Enviar</button>
</div>
<!-- Corrección: cada botón ahora incluye aria-label que menciona explícitamente a qué pasajero se refiere -->
Explicación de la solución aplicada:
En esta solución los elementos son accesibles porque el nombre accesible de cada botón incluye explícitamente la información que el usuario ve en pantalla, indicando a qué pasajero corresponde la acción. El uso de aria-label garantiza que los lectores de pantalla anuncien correctamente "Enviar Passbook para Pasajero 1" o "Enviar Passbook para Pasajero 2", evitando ambigüedades entre botones con el mismo texto visible y asegurando que la etiqueta visual forme parte del nombre accesible, cumpliendo así el criterio 2.5.3 y convirtiendo la evidencia en un ejemplo accesible.
