Using label for on radio buttons

Question

When using the  label for  parameter on radio buttons  to be 508 compliant   is the following correct     lt label for  button one  gt  lt input type  radio  name  group1  id  r1  value  1    gt  button one lt  label gt     or is this     lt input type  radio  name  group1  id  r1  value  1    gt  lt label for  button one  gt  button one lt  label gt    Reason I ask is that in the second example   label  is only encompassing the text and not the actual radio button       Section 508 of the Rehabilitation Act of 1973 requires federal agencies to provide software and website accessibility to people with disabilities

User · Accepted Answer

You almost got it  It should be this    x000D   x000D   lt input type  radio  name  group1  id  r1  value  1    gt  x000D   lt label for  r1  gt  button one lt  label gt  x000D   x000D   x000D    The value in for should be the id of the element you are labeling

User · Answer

Either structure is valid and accessible  but the for attribute should be equal to the id of the input element    lt input type  radio      id  r1    gt  lt label for  r1  gt button text lt  label gt    or   lt label for  r1  gt  lt input type  radio      id  r1    gt button text lt  label gt    The for attribute is optional in the second version  label containing input   but IIRC there were some older browsers that didn t make the label text clickable unless you included it  The first version  label after input  is easier to style with CSS using the adjacent sibling selector     input type  radio   checked label  font-weight bold

User · Answer

Firstly read the other answers which has explained the for in the  lt label gt  lt  label gt  tags  Well  both the tops answers are correct  but for my challenge  it was when you have several radio boxes  you should select for them a common name like name  r1  but with different ids  id  r1 1      id  r1 2   So this way the answer is more clear and removes the conflicts between name and ids as well    You need different ids for different options of the radio box     x000D   x000D   lt input type  radio  name  r1  id  r1 1    gt  x000D   x000D          lt label for  r1 1  gt button text one lt  label gt  x000D          lt br  gt  x000D          lt input type  radio  name  r1  id  r1 2    gt  x000D   x000D          lt label for  r1 2  gt button text two lt  label gt  x000D          lt br  gt  x000D          lt input type  radio  name  r1  id  r1 3    gt  x000D   x000D          lt label for  r1 3  gt button text three lt  label gt  x000D   x000D   x000D

[html] Using "label for" on radio buttons

Examples related to html

Examples related to radio-button

Examples related to label

Examples related to section508