Использование "метки для" на переключателях

При использовании параметра "label for" на переключателях, 508 совместимый *, является правильным:

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

или это?

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

Причина, которую я задаю, заключается в том, что во втором примере "метка" охватывает только текст, а не фактический переключатель.

* Раздел 508 Закона о реабилитации 1973 года требует, чтобы федеральные агентства предоставляли доступ к программному обеспечению и веб-сайтам для людей с ограниченными возможностями.

Ответы

Ответ 1

Ты почти понял. Это должно быть так:

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

Значение в for должно быть идентификатором элемента, который вы маркируете.

Ответ 2

Любая структура действительна и доступна, но атрибут for должен быть равен id входного элемента:

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

или

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

Атрибут for является необязательным во второй версии (метка, содержащая ввод), но у IIRC были несколько старых браузеров, которые не делали текст ярлыка нажатым, если вы его не включили. Первая версия (метка после ввода) проще стирать с помощью CSS с помощью смежного селектора sibling +:

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