Radiogroup Examples

Example 1

• Structure: heading, un-ordered list
• Elements: h3, ul, li, input type="radio", label
• Naming: heading associated to list with aria-labelledby
• Explicit roles: radiogroup role on un-ordered list element

Example 2 Nested inputs (not possible in Scenery)

• Structure: heading, un-ordered list, and input elements wrap the input elements
• Elements: h3, ul, li, input type="radio", label
• Naming: heading associated to list with aria-labelledby
• Explicit roles: radiogroup role on un-ordered list element

Charge Settings

• Show all charges
• Show no charges
• Show charge differences

Example 3: Role group

• Structure: heading, un-ordered list
• Elements: h3, ul, li, input type="radio", label
• Naming: heading associated to list with aria-labelledby
• Explicit roles: group role on un-ordered list element

Charge Settings

• Show all charges
• Show no charges
• Show charge differences

Question: Can I use arrow keys?

Example 4: Fieldset with list

• Structure: fieldset, legend, un-ordered list
• Elements: fieldset, legend, ul, li, input type="radio", label
• Naming: legend auto-names fieldset
• Explicit roles: radiogroup role on fieldset element

Question: Do I get a count?

Example 5: Fieldset without list

• Structure: fieldset, legend
• Elements: fieldset, legend, div wrappers, input type="radio", label
• Naming: legend auto-names fieldset
• Explicit roles: radiogroup role on fieldset element

Example 7

• Structure: heading, div wrapper, no list
• Elements: h3, ul, li, input type="radio", label
• Naming: heading associated to list with aria-labelledby
• Explicit roles: radiogroup role on un-ordered list element

Example 8

Example 9: Area Model Scene Selection Radios