Uso de "etiqueta para" en los botones de opción

Question

Cuando se utiliza el parámetro "etiqueta para" en los botones de opción, para ser 508 compliant *, ¿es correcto el siguiente?

<label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label> 

¿o es esto?

<input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label> 

razón que pido es que en el segundo ejemplo, "etiqueta" sólo se abarca el el botón de opción real de texto y no.

* La Sección 508 de la Ley de Rehabilitación de 1973 requiere que las agencias federales brinden acceso a software y sitios web a las personas con discapacidades.

Answer 1

Casi lo tienes. Debe ser la siguiente:

<input type="radio" name="group1" id="r1" value="1" /><label for="r1"> button one</label> 

El valor en for debería ser el id del elemento que está etiquetando.

Answer 2

Con el uso de un identificador correcto y para (como se indica por Marc W en otra respuesta) en realidad AMBOS son conformes a 508. He aquí un example using labels in different ways, afirmando que es de hecho compatible.

Answer 3

estructura O es válida y accesible, pero el atributo for debe ser igual a la id del elemento de entrada:

<input type="radio" ... id="r1" /><label for="r1">button text</label> 

o

<label for="r1"><input type="radio" ... id="r1" />button text</label> 

El atributo for es opcional en la segunda versión (etiqueta que contiene la entrada), pero IIRC había algunos navegadores más antiguos que no hacían clic en el texto de la etiqueta a menos que lo incluyera. La primera versión (etiqueta después de la entrada) es más fácil de peinar con CSS usando el selector de hermanos adyacentes +:

input[type="radio"]:checked+label {font-weight:bold;}