Skip to main content

Inputs

Accessible (a11y) inputs are essential for ensuring that all users, including those using assistive technologies, can interact with forms and controls. Proper labeling, roles, states, and keyboard support help make inputs usable and understandable for everyone.

Examples​

Checkbox​

✅ Correct

<input type="checkbox" id="chk1-label" name="RememberPreferences" />
<label for="chk1-label">Remember my preferences</label>

Radio​

✅ Correct

<fieldset>
  <legend>Reply with true or false</legend>
  <div>
    <input type="radio" value="True" id="q25_radio1" name="q25" />
    <label for="q25_radio1">True</label>
  </div>
  <div>
    <input type="radio" value="False" id="q25_radio2" name="q25" />
    <label for="q25_radio2">False</label>
  </div>
  <div>
    <input type="radio" value="huh?" id="q25_radio3" name="q25" checked />
    <label for="q25_radio3">I can't read</label>
  </div>
</fieldset>

Text​

✅ Correct

<label for="txtbox">Enter your five-digit zip code</label>
<input type="text" placeholder="5-digit zip code" id="txtbox" />

<!-- Multi-line text area -->
<label for="txtboxMultiline">Enter the tags for the article</label>
<textarea id="txtboxMultiline" required></textarea>

👍 Do's​

  • Prefer using a input element with type=”checkbox” for checkboxes
  • Prefer using a input element with type=”radio” for radios
  • Prefer using a input element with type=”text” for text input
  • Provide a <label> element for the inputs

👎 Don'ts​

  • Avoid using non-input elements for inputs
  • Don't use the value mixed for aria-checked property for radio elements