Radiogroup Examples

Example 1: aria-labelledby & role radiogroup on ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, Yes, Yes (radiogroup), No - no count

  Show all charges, selected, radio button, Charge Settings, radiogroup

• ChromeVox & Chrome: Yes, Yes, Yes, Yes (radiogroup and list), Yes.

  Charge Settings, radiogroup with 3 items, Show all charges, radio button, selected

• NVDA & FF:
• JAWS & FF:

BASE

Area Model

Example 2: No aria-labelledby & no explicit role

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, No, Yes (list), Yes - accurate count

  Show all charges, selected, radiobutton list 3 items

• ChromeVox & Chrom: Yes, Yes, No, Yes (list), Yes - accurate count

  List with 3 items, list item, Show all charges, radio button, selected

• NVDA & FF:
• JAWS & FF:

Example 4: fieldset & legend with ul (BEST)

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, Yes, Yes (list), Yes - accurate count

  Show all charges, selected, radio button, Charge Settings list 3 items

• ChromeVox & Chrome: Yes, Yes, Yes, Yes (radiogroup and list), Yes.

  Charge Settings, Radio button group, list with 3 itesm, list item, Show all charges, radio button, selected

• NVDA & FF:
• JAWS & FF:

BASE

Area Model Scene Selection Buttons

Example 5: fieldset & legend, but no ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, Yes X2, Yes (radiogroup), No - no count.

  Show all charges, selected, radio button, Charge Settings, Charge Settings, radiogroup

• ChromeVox & Chrome: Yes, Yes, Yes, Yes, No - no count

  Charge Settings, radio buttong roup, Show all charges, radio button, selected

• NVDA & FF:
• JAWS & FF:

Example 7: aria-labelledby & role radiogroup on div button wrapper, i.e., no ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, Yes, Yes (radiogroup), No - no count

  Show all charges, selected, radio button, Charge Settings, radiogroup

• ChromeVox & Chrome: Yes, Yes, Yes, Yes, No - no count

  Charge Settings, radio buttong roup, Show all charges, radio button, selected

• NVDA & FF:
• JAWS & FF:

Example 10: fieldset with role radiogroup, h3 & ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, No, Yes (list), Yes - accurate count.

  10 by 10, selected, radio button, list 2 items

  Add aria-labelledby to fieldset

  10 by 10, selected, radio button, Area Grid Size list 3 items

• ChromeVox & Chrome: Yes, Yes, No, Yes, Yes - accurate count.

  Radio button group, list with 2 items, list item, 10 by 10, radio button, selected

• NVDA & FF:
• JAWS & FF:

Example 11 - aria-labelledby on both parent div and ul parent (BEST OPTION)

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, Yes, Yes for list, Yes - accurate count.

  Show all charges, selected, radio button list Charge Settings 3 items

• ChromeVox & Chrome: Yes, Yes, Yes, Yes for radiogroup and list, Yes - accurate count.

  Charge Settings, radio button group, list with 3 items, list item, Show all charges, radio button selected

• NVDA & FF:
• JAWS & FF:

Example 12: radiogroup on parent div, but aria-labelledby on ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Yes, Yes, Yes, Yes (list), Yes - accurate count.

  Show all charges, selected, radio button list Charge Settings 3 items

• ChromeVox & Chrome: Yes, Yes, No, Yes for radiogroup and list, Yes - accurate count.

  Radio button group, list with 3 items, list item, Show all charges, radio button selected

• NVDA & FF:
• JAWS & FF:

Example 13: radiogroup & aria-labelledby on parent div, & nothing explicit on ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Different from example 11: Yes, Yes, No, Yes for list, Yes - accurate.

  Show all charges, selected, radio button list 3 items

• ChromeVox & Chrome: Yes, Yes, Yes, Yes (radiogroup and list), Yes - accurate count.

  Charge Settings, Radio button group, list with 3 items, list item, Show all charges, radio button selected

• NVDA & FF:
• JAWS & FF:

Example 14: radiogroup & aria-label on parent div & no h3

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Different from example 11: Yes, Yes, No, Yes for list, Yes - accurate.

  Show all charges, selected, radio button list 3 items

• ChromeVox & Chrome: Yes, Yes, Yes, Yes (radiogroup and list), Yes - accurate count.

  Charge Settings, Radio button group, list with 3 items, list item, Show all charges, radio button selected

• NVDA & FF:
• JAWS & FF:

Note: aria-controls="rgroup-14" on radiogroup parent has no effect in VO and CVox effect when aria-label is on the radiogroup parent.

Example 15: added aria-controls, radiogroup on parent div, no h3, but aria-label on ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Different from example 11: Yes, Yes, Yes, Yes for list, Yes - accurate.

  Show all charges, selected, radio button list Charge Settings 3 items

• ChromeVox & Chrome: Yes, Yes, No, Yes (radiogroup and list), Yes - accurate count.

  Radio button group, list with 3 items, list item, Show all charges, radio button selected

• NVDA & FF:
• JAWS & FF:

Example 16: fieldset with radiogroup and aria-labelledby, h3 and ul

Do I hear: button name, button state, group name, group role (radiogroup/list), and count?

• VoiceOver & Safari: Different from example 11: Yes, Yes, Yes, Yes for list, Yes - accurate.

  Show all charges, selected, radio button, Charge Settings list 3 items

• ChromeVox & Chrome: Yes, Yes, No, Yes (radiogroup and list), Yes - accurate count.

  Charge Settings, Radio button group, list with 3 items, list item, Show all charges, radio button selected

• NVDA & FF:
• JAWS & FF:

BASE

Area Model Scene Selection Buttons