Radio group with list

← Return to main list

This is a test case designed to determine how the <fieldset> and <legend> elements are announced in relation to a radio group by various screen readers.

Example

Code

<fieldset>
  <legend>Do you like boats?</legend>
  <ul>
    <li>
      <input type="radio" id="boats-y" name="boats">
      <label for="boats-y">Yes</label>
    </li>
    <li>
      <input type="radio" id="boats-n" name="boats">
      <label for="boats-n">No</label>
    </li>
  </ul>
</fieldset>

Assistive technologies

VoiceOver

Chrome: Yes. Radio button. 1 of 2. 2 items. [Role and legend not announced]
Firefox: Yes. Radio button. 1 of 2. 2 item. [Role and legend not announced]
Safari: Yes. Radio button. 1 of 2. Do you like boats? Do you like boats? Group. [Legend announced twice]

NVDA

Chrome: Do you like boats? Grouping. List. Yes. Radio button. Not checked. 1 of 2.
Firefox: Do you like boats? Grouping. List. Yes. Radio button. Not checked. 1 of 2.
Edge: Do you like boats? Grouping. List. Yes. Radio button. Not checked. 1 of 2.

JAWS

Chrome: Do you like boats? Group. List with 2 items. Yes. Radio button. Not checked. 1 of 2.
Firefox: To change the selection use the up or down arrow. Do you like boats? Yes. Radio button. Not checked. Yes. Radio button. Not checked. 1 of 2.
Edge: Do you like boats? Group. List with 2 items. Yes. Radio button. Not checked. 1 of 2.

← Return to main list