2526UPSA1.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:
<form>
<h2>Formulario de registro</h2>
<!-- Campos relacionados sin fieldset/legend -->
<p>Método de contacto</p>
<label><input type="radio" name="contact" value="email"> Email</label><br>
<label><input type="radio" name="contact" value="phone"> Teléfono</label>
<br><br>
<!-- Otro grupo relacionado sin agrupación -->
<p>Dirección</p>
<label>Calle <input type="text" name="street"></label><br>
<label>Ciudad <input type="text" name="city"></label><br>
<label>Código postal <input type="text" name="zip"></label>
</form>
Explicación del problema detectado:
Los campos del formulario están relacionados (p. ej., “Método de contacto” y “Dirección”), pero no están agrupados de forma programática. Al no usar <fieldset> y <legend>, un lector de pantalla no recibe el contexto de grupo y la relación entre los controles queda ambigua, lo que aumenta la confusión y el riesgo de errores al completar el formulario.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas afectadas: usuarios con discapacidad visual que usan lectores de pantalla y usuarios con sordoceguera.
Barrera: al navegar por los controles, no se anuncia un “grupo” con un nombre (legend). Esto dificulta entender qué opciones pertenecen a la misma pregunta (por ejemplo, las opciones del método de contacto) y aumenta la carga cognitiva y los errores en formularios.
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>
<h2>Formulario de registro</h2>
<fieldset>
<legend>Método de contacto</legend>
<label><input type="radio" name="contact" value="email"> Email</label><br>
<label><input type="radio" name="contact" value="phone"> Teléfono</label>
</fieldset>
<br>
<fieldset>
<legend>Dirección</legend>
<label for="street">Calle</label>
<input id="street" type="text" name="street"><br>
<label for="city">Ciudad</label>
<input id="city" type="text" name="city"><br>
<label for="zip">Código postal</label>
<input id="zip" type="text" name="zip">
</fieldset>
</form>
Explicación de la solución aplicada:
En el ejemplo accesible, los campos relacionados se agrupan con <fieldset> y se describen con un <legend> claro (“Método de contacto” y “Dirección”). Esto comunica programáticamente la relación entre controles, de modo que las tecnologías de apoyo anuncian el nombre del grupo y el usuario entiende el contexto antes de interactuar con cada campo, reduciendo errores.
