HTMHell supports Black Lives Matter. ✊🏾 Code is always political.

#12 accessible poll yes/no

submitted on by Erik

Bad code Bad code

<form role="form">
  <h2>Poll title</h2>
  <div id="pollQuestion">Is this accessible?</div>
  <div name="pollGroup" role="radiogroup">
    <div role="radiogroup" aria-label="Poll title">
      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Yes</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>No</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Maybe</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Can you repeat the question?</span>
    </div>

    <button type="submit">Vote</button>
  </div>
</form>

Issues and how to fix them Issues and how to fix them

  1. Setting form semantics explicitly using the role attribute isn’t necessary, the semantics are implied in the element.
  2. A form is a landmark. An aria-labelledby referring to the h2 gives the landmark an accessible name. This makes it more useful for navigation.
  3. Setting role="radiogroup" isn’t necessary, and certainly not twice. If you want to group the element, use a fieldset instead.
  4. Don’t use aria-labelledby to create a relationship between a radiobutton and the poll question. aria-labelledby is for setting the accessible name. Use a legend instead.
  5. To give radiobutton an accessible name, put the span content in a label, and use for to create a relationship with the radiobutton.
  6. The button is inside the fieldset to create one logical grouping.

Good code Good code

<form aria-labelledby="poll-title">
  <h2 id="poll-title">Poll title</h2>
  <fieldset>
    <legend>Is this accessible?</legend>

    <input type="radio" id="radio1" name="poll" value="yes">
    <label for="radio1">Yes</label>

    <input type="radio" id="radio2" name="poll" value="no">
    <label for="radio2">No</label>

    <input type="radio" id="radio3" name="poll" value="maybe">
    <label for="radio3">Maybe</label>

    <input type="radio" id="radio4" name="poll" value="repeat">
    <label for="radio4">Can you repeat the question?</label>

    <button type="submit">Vote</button>
  </fieldset>
</form>