Grouping controls — WAI-ARIA & Non-Standard Form Controls

From Mozilla Developers Network:

The HTML  <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic JavaScript widget, using <div>s or <span>s. WAI-ARIA, the Accessible Rich Internet Applications specification from the W3C's Web Accessibility Initiative, provides the  aria-labelledby attribute for these cases.

When you come across a set of radio buttons that are properly labeled does a screen reader user know the purpose of these controls?

There is a way to logically and visually group non-standard form controls (radio buttons, check boxes, etc.)

• User ARIA 1.0:
  • [aria-checked]
  • [aria-labelledby]
  • [role="presentation"]
  • [role="radio"]
  • [role="radiogroup"]
• Ensure the javascript is device independent, and provides
  • mouse and keyboard bahaviors,
  • focus indicator,
  • check and uncheck buttons
• Use images for radio buttons

The example below shows a radio button group implemented using an unordered list. Note the  <li> element sets the  aria-labelledby attribute to "rg1_label," the id of the <h3> element, which is the label for the radio group.

The form below uses a radio group implemented using an unordered list (adapted from http://www.oaa-accessibility.org/examplep/radio1/)

The Form

The HTML

plus a bunch of JavaScript and CSS.