Skip to content

Creating accessible radio and checkbox inputs

Joel Meador edited this page Jun 5, 2026 · 1 revision

How do I properly code a common group of radio or checkbox inputs to make sure they are accessible?

Radio and checkbox groups need the following to be full accessible.

  • They must be within a <form>
  • The group of like items must be wrapped in a <fieldset>. This is the key for letting the screen reader know it’s a "like grouping".
  • There should be a <legend> that describes the grouping. This provides the context for the items and is like a label for the group.
  • Each input should be <input> then <label> and wrapped in a <div> so the label itself when clicked either selects or deselects the option.

Example:

<form>
  <fieldset>
    <legend>This is a description of the group</legend>
    <div>
      <input id=“item-number-1” type="checkbox" name=“same-for-all-items” value=“option”1>
      <label for="item-number-1">Item 1</label>
    </div>
    <div>
      <input id="item-number-2” type="checkbox" name=“same-for-all-items” value=“option 2”>
      <label for="item-number-2”>Item 2</label>
    </div>
  </fieldset>
</form>

Home

TODO: can we recreate the tag system here roughly with sections about certain subjects?

Clone this wiki locally