Quale è la forma "ufficiale" e più accessibile per forms?(Label + Input)

[Luca_pluatrco]

Ciao,

lavoro per un'azienda svizzera al Layout di un portale CMS. Come direttiva mi è stato detto che il codice CSS deve essere "Full Compliant", ovvero essere validato secondo l'ADA e la section 508.

Ho un paio di quesiti e li espongo per punti per essere più chiaro:

[1] Riguardo le form in particolare quale delle due è la forma "ufficiale" e più accessibile?

Versione 1 (presentata così anche dal W3C )

<label for="user">  Name  </label>
<input type="text" id="user" value="" />

Versione 2

<label for="user">   Name
       <input type="text" id="user" value="" />
</label>

Avevo letto che ai fini dell'accessibilità, l'importante è l'attributo for riferito all'elemento figlio, mentre includere o meno il contenuto all'interno della label permetteva solamente di avere maggiore controllo (a livello di CSS rules) sul contenuto.

[1a] Se l'elemento child o sibling è un <div> il for della label a chi si riferisce?
Le mie form sono strutturate nel seguente modo:

<label for="???">Nome:</label>
<div class="ElementContainer">
         /*Qui può esserci qualsiasi elemento...*/
</div>

All'interno dell'ElementContainer può esserci un qualsiasi componente: asp.net, una comboBox, ... ed in qualsiasi numero e combinazione.
Costituisce una sorta di spazio dove è possibile inserire qualunque cosa.

In tal caso il for a cosa si deve riferire?


Grazie in anticipo!!

[Mich_]

Anzitutto ecco alcuni link che trattano di form accessibili:
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Form fluidi con i css
Styling form controls with CSS
Bottoni con rollover
Fieldsets, Legends and Screen Readers

Poi riguardo il punto 1, non credo ci siano differenze riguardo all'accessibilita`, dove l'attributo for del tag label e` sufficiente per associare la label al campo.

Invece non sono d'accordo sul punto 1a.
Ho l'impressione che confondi i tag dei form.
Io la cosa che dici (se ho capito bene) la realizzerei cosi:

<fieldset>
  <legend>Nome:</legend>
  ... qui puo` esserci qualsiasi cosa ...
</fieldset>

Dove la sottodivisione di un form e` realizzata con <fieldset> (al posto del <div>) e il suo titolo e` creato con il <legend>. Con i CSS poi puoi definire come visualizzare il filedset (di default credo che sia un bordo di 1 px tutt'attorno)

[Luca_pluatrco]

Io la cosa che dici (se ho capito bene) la realizzerei cosi: codice:

<fieldset>
<legend>Nome:</legend>
... qui puo` esserci qualsiasi cosa ...
</fieldset>


Dove la sottodivisione di un form e` realizzata con <fieldset> (al posto del <div> ) e il suo titolo e` creato con il <legend>. Con i CSS poi puoi definire come visualizzare il filedset (di default credo che sia un bordo di 1 px tutt'attorno)

Al momento la struttura usata comprende già fieldset:

<fieldset class="FormGroupContainer">
   
	  <div class="FormFieldRow">
	     <div class="FormFieldLabelContainer">
		<label class="FormFieldLabel"> Name label:</label>
		<label class="FormFieldDescription">The name of the command </label>    
	     </div>      
	     <div class="FormFieldControl">
		  <input type="text"></input>
		  <button>Click</button>
	     </div>
	  </div>

	  <div class="FormFieldRow">	
	   <div class="FormFieldLabelContainer">
		<label class="FormFieldLabel">Change user name:</label>
		<label class="FormFieldDescription">Change the username</label>    
	   </div>      
	   <div class="FormFieldControl">
				/*ASP.NET control eventualmente */
	   </div>	   
	  </div>

L'output (vedere allegato) rispecchia i requisiti (è l'output attuale). Mi avvalgo della classe "FormFieldLabel" per intervenire sulla label del titolo e "FormFieldLabelContainer" per mantenere titolo e descrizione allineate e distanziate allo stesso modo dal div "FormFieldControl".

Il capo ai fini del "Full Compliant" vuole inserire il "for" per ogni label o, se possibile, una struttura del tipo (in modo da non dover usare il for):

<label>
      <INPUT ...>
</label>

Potrei eventualmente modificare in mio codice in:

 <div class="FormFieldRow">
     <label class="FormFieldLabel"> Name label:
	   <label class="FormFieldDescription">The name of command</label>    	
	   
	   <div class="FormFieldControl">
  		  [img]cms.gif[/img]
		  <input type="text"></input>	
		  <button>Click</button>
	   </div>
     </label>
 </div>

Dove con .FormFieldRow label {} posso intervenire su descrizione e titolo (anche se un po' meno facilmente).

In questo caso il browser a quale elemento assocerebbe i label?

Grazie di nuovo

[Mich_]

Una label senza contenuto e senza for non ha significato per chi non vede la parte grafica del form (vedi ad esempio http://w3schools.com/tags/tag_label.asp ), quindi e` contrario all'accessibilita`.

I fieldset si possono innestare: a mio parere dentro i form e` piu` corretto usare i filedset, anziche` i div, ma questa e` la mia idea: altri usano correntemente anche i div.

Attenzione che ci sono errori di sintassi: il campo input non ha tag di chiusura, quindi il tuo
<input type="text"></input>
va scritto
<input type="text" />

Inoltre il tag <button> senza eventi JS e` inutile (mentre se usi JS la cosa non e` accessibile): se vuoi fare una cosa accessibile usa invece il tag <input type="submit" ...> (oppure type="image") che si puo` usare anche senza JS.
Oppure puoi inserire un <input type="submit"> dentro un'area <noscript>

[Luca_pluatrco]

<input type="text"></input>
va scritto
<input type="text" />

Inoltre il tag <button> senza eventi JS e` inutile

Questi elementi li avevo messi cosi' al volo per esempio, ma grazie ad ogni modo delle info, dato che nn ne ero a conoscenza.

Tali elementi saranno sempre (o almeno al 99% dei casi) controllo asp.net, che quindi dovrebbero venire (spero) interpretati correttamente quali: <input type="text" /> e <input type="submit" /> per la TextField e i Button rispettivamente.

Grazie mille per i consigli!!