Radio buttons

Do

  • Place radio buttons underneath each other for scannability if more than 2 options.
  • Use radio buttons when a user can select only one option out of a set of mutually exclusive choices.
  • The custom radio buttons here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.
  • Group related radio buttons together with "fieldset" and describe the group with "legend".
  • Each radio button should have a "label". Associate the two by matching the "label’s" for attribute to the "input’s" id attribute.
  • The title attribute can replace "label".
  • If providing hint text with your radio buttons add the aria-describedby= tag to the fieldset and place the hint text below the legend.

Don't

  • Don’t place 3 or more radio buttons in a horizontal list. Horizontal listings can make it difficult to tell which label pertains to which radio button.
  • Don't use radio buttons when more than 7 options available. For more than 7 options use a select (dropdown) instead.

Example

Which is your favourite Lifestyles centre?
Back
Select options
Next
Check boxes