Duda con fieldset, legend y label

[Sanva]

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

[kahlito]

Hola Sanva, mira estos ejemplos que quizás te puedan ayudar en algo:

http://www.webstandards.org/learn/tu...essible-forms/
http://www.websiteoptimization.com/speed/tweak/forms/
http://alistapart.com/articles/prettyaccessibleforms

[frijolerou]

Sanva:

Hay 2 formas correctas de asociar un LABEL con un INPUT. La primera es encerrar el INPUT dentro del LABEL (tal como mencionas en el primer ejemplo). La segunda forma es colocar el INPUT fuera del LABEL, y asociar la ID del INPUT con el atributo FOR del LABEL.

Y sí, según cuentan los expertos, algunos lectores de pantalla no interpretarían correctamente la segunda forma. Pero también debes tomar en cuenta tus necesidades de diagramación; si para el formulario vas a utilizar una tabla, para poner cada INPUT y cada LABEL en su propia celda lógicamente no te servirá la primera opción.

El ejemplo que pones de Wordpress no es del todo correcto, por 2 razones:

1º Hay controles de formulario que contienen de manera implícita un rótulo asociado (por ejemplo los input del tipo BUTTON, SUBMIT y RESET a través de su atributo VALUE), por lo que en estos casos no es necesario asociarlos a un elemento LABEL. Esto no ocurre con otros controles como los campos de texto, donde sí es necesario asociarles un rótulo mediante un elemento LABEL.

2º En ese ejemplo se está utilizando el elemento LEGEND para asignarle un rótulo al campo de texto. El elemento FIELDSET permite agrupar temáticamente y dentro de un mismo formulario, controles relacionados entre sí, y así facilitar al usuario comprender su propósito (especialmente cuando se trata de formularios complejos. Por ejemplo si tienes un formulario para que un usuario pueda ingresar su currículum, deberías utilizar un FIELDSET para sus datos de contacto, otro FIELDSET para su experiencia laboral, otro para sus estudios, etc; y cada uno de estos grupos lleva un título que se define mediante el elemento LEGEND.

Asi que, para un formulario sencillo los dos primeros ejemplos que pusiste serían correctos (bueno, tienes que pulir más los INPUT). Y para formularios más complejos (el ejemplo del currículum) con el último ejemplo que pusiste irías por el camino correcto.