#12 accessible poll yes/no

submitted on by Erik

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

  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

<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>