Clarity: There is no “label for” property for visual instructions

[mathisscott]

URL: http://clarity-ks.surge.sh/radios

Tools: Web Accessibility Toolbar (WAT2.0) / ARIA Markup

Reproduced Steps:

1. Login Clarity Kitchen Sink with web browser.
2. Go to Radios tab.
3. Check the markup in Radios tab.

Actual Results:
There are no labels associating "Radio Buttons" text, “Default/Stacked radio button group” text, “Inline radio button group” text and “These are disabled radio buttons” text.
For more details, please refer to "Radios-NoMarkup.zip".

Expected Results:
Set “label for” property for "Radio Buttons" text, “Default/Stacked radio button group” text, “Inline radio button group” text and “These are disabled radio buttons” text.

Note:
This issue occurs on other tabs, such as Progress tab, Radios tab, Wizards tab.

Violation of Section 508 Standards:
Section 1194.22 (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

User Impact: Blind.

Screen shot:

1. Radios-NoMarkup.png

1. LabelForAndID'sMarkup.png

NOTE: this may also be a problem on the website

[Jinnie]

As we're not using fieldsets, which is an _option to consider_, I've added role="radiogroup" aria-labelledby="label_id" to the form-group divs.
It works well with screen readers, the group label is read when changing between radio groups.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.