Hola a todos.
Tengo una duda, y es que no se qué pautas seguir para crear un formulario lo más accesible y usable a la vez que mantenible.
Esta es la forma en la que yo lo vengo haciendo habitualmente
Código HTML:
<form>
<p><label for="id1">Texto 1 <input id="id1" /></label></p>
<p><label for="id2">Texto 2 <input id="id2" /></label></p>
</form> Pero me parece totalmente incorrecta, porque meter el input dentro del label es algo totalmente ilógico. Lo hago así porque al parecer existen lectores de pantalla que tienen problemas con la forma que yo creo correcta, que sería
Código HTML:
<form>
<p><label for="id1">Texto 1</label> <input id="id1" /></p>
<p><label for="id2">Texto 2</label> <input id="id2" /></p>
</form> Y, recientemente, estudiando cómo lo hacen en WordPress, me encuentro con la siguiente forma:
Código HTML:
<form>
<fieldset>
<legend>Texto 1</legend>
<p><input /></p> <!-- p, div, o supongo que también valdría span -->
</fieldset>
<fieldset>
<legend>Texto 2</legend>
<p><input /></p>
</fieldset>
<form> La cual a nivel de código parece mucho más mantenible, por su simplicidad. Además, al parecer los lectores de pantalla leen el legend del fieldset antes de cada uno de sus inputs, por lo que no debería haber problema por no tener un label (esto, dependiendo del tipo de formulario... si fuese algo complejo, creo que convendría el modelo que expongo a continuación).
Y este es el modelo que veo más completo, pero también más cargado (tanto visualmente, aunque eso se puede arreglar con CSS, como sonoramente, ya que según tengo entendido el lector de pantalla leería el legend del fieldset y el label del input antes de cada uno de ellos, algo útil para un formulario complejo pero creo que bastante
cargante para uno simple)
Código HTML:
<form>
<fieldset>
<legend>Leyenda 1</legend>
<p><label for="">Texto 1</label> <input id="" /></p> <!-- p, div, o supongo que también valdría span -->
</fieldset>
<fieldset>
<legend>Leyenda 2</legend>
<p><label for="">Texto 2</label> <input id="" /></p>
</fieldset>
<form> Por lo que creo que este último sólo debería usarlo para formularios complejos... y dejar el anterior para los que sean más sencillos. Pero, como yo no soy ni mucho menos un experto en Usabilidad/Accesibilidad, os pregunto:
¿Qué opináis?
Gracias por vuestro tiempo