2525UFV1.3.1-N-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.3_Adaptable/1.3.1-N
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 class="payment-section">
<p><strong>Seleccione su método de pago:</strong></p>
<input type="radio" id="visa" name="pago" value="visa">
<label for="visa">Tarjeta Visa</label><br>
<input type="radio" id="mastercard" name="pago" value="mastercard">
<label for="mastercard">MasterCard</label><br>
<input type="radio" id="paypal" name="pago" value="paypal">
<label for="paypal">PayPal</label>
</div>
Explicación del problema detectado:
No existe una conexión programática (código) entre la pregunta y las opciones.
Un usuario ciego que navega con el tabulador saltando de campo en campo, al llegar al primer botón escuchará únicamente: "Tarjeta Visa, botón de opción, no verificado". No sabrá a qué pregunta responde esa opción (¿Es "Tarjeta preferida"? ¿Es "Método de pago"? ¿Es "Tarjeta rechazada"?).
Se pierde el contexto.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con ceguera total (Visual total): Utilizan lectores de pantalla.
Personas con sordoceguera: Al utilizar líneas braille
Personas con baja visión (que usan magnificadores): Suelen ampliar mucho la pantalla
Pierden el contexto de la pregunta y solo escuchan las respuestas aisladas, lo que puede llevar a errores en el formulario o abandono del proceso.
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:
<form>
<fieldset>
<legend>Seleccione su método de pago:</legend>
<input type="radio" id="visa-acc" name="pago-acc" value="visa">
<label for="visa-acc">Tarjeta Visa</label><br>
<input type="radio" id="mastercard-acc" name="pago-acc" value="mastercard">
<label for="mastercard-acc">MasterCard</label><br>
<input type="radio" id="paypal-acc" name="pago-acc" value="paypal">
<label for="paypal-acc">PayPal</label>
</fieldset>
</form>
Explicación de la solución aplicada:
Cuando el usuario entra en este grupo de opciones usando un lector de pantalla, la herramienta anunciará primero el contenido del <legend>. Escuchará algo similar a: "Seleccione su método de pago, grupo. Tarjeta Visa, botón de opción, no verificado". El contexto se mantiene claro en todo momento.
