2526UdL1.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:
https://wordpress.org/support/topic/accessibility-lists-field-in-forms-missing-fieldset-and-legend/
2.1.2. Código HTML:
<label class="es-field-label">
What type of posts would you like to get notified about? (Required)
</label>
<div class="es-list">
<div>
<label><input type="checkbox" name="esfpx_lists[]" value="ac95f3d9ac71">
<span>WordPress</span>
</label>
</div>
<div>
<label><input type="checkbox" name="esfpx_lists[]" value="c4dfe0f151fc">
<span>Business</span>
</label>
</div>
<div>
<label><input type="checkbox" name="esfpx_lists[]" value="c1e876a12681">
<span>Life/Personal</span>
</label>
</div>
</div>
Explicación del problema detectado:
Para una persona que ve la pantalla, eso puede parecer un grupo, pero en el caso de tratarse de una tecnología de apoyo, no necesariamente se interpreta así. Puede ser simplemente “una lista de checkboxes” sin un contenedor semántico que indique que comparten un mismo propósito.
No hay un contenedor semántico de agrupación, de forma que al no usar <fieldset>, el navegador no expone ese conjunto como un “grupo” con identidad propia. Eso afecta a cómo se anuncia y se navega el formulario a través de un lector de pantalla. También a cómo se entiende el bloque si se recorre con teclado o ayudas técnicas.
Falta un “nombre del grupo” asociado programáticamente, si no tiene <legend>, el “título” del bloque no queda unido al conjunto como etiqueta estructural. Una persona que navega por “controles” puede escuchar una gran variedad de opciones (WordPress / Business / Life/ Personal) sin tener siempre la certeza de a qué pregunta responden, especialmente en casos donde el formulario es extenso o
si se navega campo a campo.
El formulario obliga al usuario a deducir la relación entre campos basándose en disposición visual, cuando el criterio exige que esa relación sea determinable por software, es decir, programáticamente.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Discapacidad visual total (lectores de pantalla): La barrera principal es la pérdida de contexto. Al moverse por los checkboxes, puede ser que el usuario no perciba de forma consistente la “pregunta” o el marco que da sentido a esas opciones. Esto ocasiona un aumento significativo de errores (marcar cosas que no se pretenden) y hace la interacción más lenta, llegando a causar saturación e incluso abandono de la acción, ya que el usuario debe reconstruir constantemente de forma mental la estructura.
Sordoceguera (línea braille / salida táctil): La navegación suele ser muy lineal, depende siempre de una estructura clara y de fácil interpretación. Si el grupo no está marcado semánticamente, la persona no tiene señales estructurales fiables de “inicio de grupo / fin de grupo / nombre del grupo”, lo que vuelve la exploración más costosa y propensa a confusión. Derivando en consecuencias similares a las mencionadas en el punto anterior.
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:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
2.2.2 Código HTML:
<form>
<fieldset>
<legend>Choose your preferred contact method</legend>
<label>
<input type="radio" name="contact" value="email">
Email
</label>
<label>
<input type="radio" name="contact" value="phone">
Phone
</label>
<label>
<input type="radio" name="contact" value="mail">
Postal Mail
</label>
</fieldset>
</form>
Explicación de la solución aplicada:
Agrupa programáticamente los controles relacionados, el elemento <fieldset> contiene todos los botones de opción que forman parte de la misma pregunta. Esto indica al navegador y a las tecnologías de asistencia que estos controles no son independientes, sino que forman parte de un mismo “conjunto lógico”.
El <legend> define claramente el propósito del conjunto (“Choose your preferred contact method”), convirtiendo este texto en la etiqueta del grupo, anunciandolo a través de los lectores de pantalla antes de enumerar las opciones disponibles.
Garantiza que la relación sea determinable por software, es decir, la estructura no depende únicamente del diseño visual. (Aunque visualmente el grupo podría estar separado con espacios o estilos CSS)
Personas con discapacidad visual (lector de pantalla) Cuando el usuario navega por el formulario, el lector de pantalla proporciona contexto inmediato antes de escuchar las opciones individuales. El usuario entiende qué está seleccionando y reduce la posibilidad de error o saturación.
Personas con sordoceguera (línea braille) El <fieldset> delimita el bloque de controles, y el <legend> funciona como encabezado del grupo, permitiendo que la persona identifique claramente el inicio del grupo, su propósito y las opciones que lo componen.
