Search and Top Navigation
#5210 open feature ()
Opened February 22, 2010 04:03AM UTC
Last modified April 01, 2014 06:01PM UTC
Accessibility Improvements Radio buttons
Reported by: | hhillen | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | none |
Component: | ui.button | Version: | 1.8rc2 |
Keywords: | a11y | Cc: | |
Blocked by: | Blocking: |
Description
I want to apply the following changes for radio buttons:
- Use role="radio" rather than button" and aria-checked="true/false" rather than aria-pressed
- The buttons must either be contained by an element with role="radiogroup", or this element must reference each radio button through aria-owns (in this case the element could be a hidden div). The radiogroup element must specify an accessible name for the group, using an "aria-labelledby", "aria-label" or "title" attribute.
- Only the selected radio button must be part of the tab order (currently none are in the tab order or keyboard accessible).
- The selected button can be changed using the keyboard's arrow keys.
Attachments (1)
Change History (10)
Changed February 22, 2010 02:14PM UTC by comment:1
Changed February 23, 2010 07:23AM UTC by comment:2
I've updated the patch.
It now correctly places only the checked radio button in the tab order. If no radiobutton was checked initially, the first button in the group is placed in the tab order.
It is up to the developer to wrap the radio buttons in an element representing the group, with a meaningful name specified as either a "title", "aria-label", or "aria-labelledby" attribute. This can be any element (e.g. <span title="repeat options" />) as long as it's a direct part of the radio buttons, and a child of the element being turned into a buttonset. The buttonset widget will automatically add role="radiogroup" to these group elements in the buttonset. The patch also contains updates for two demo files (radio.html and toolbar.html) that demonstrate this markup.
In accordance with the DHTML styleguide, this patch enables the following keyboard support:
Only a single radio button in the group is part of the tab order at a time. The arrow keys can be used to change the selected radiobutton. If the Ctrl key is held down, the adjacent radio button is focused, but not selected. The space key can be used to select a focused radio button.
Note that this patch also fixes a problem where buttons built from checkbox elements were not keyboard accessible.
Changed March 10, 2010 05:10PM UTC by comment:3
priority: | minor → major |
---|
Changed March 24, 2010 10:11PM UTC by comment:4
priority: | major → critical |
---|
Closed #5199 as a duplicate.
Changed October 19, 2010 04:02PM UTC by comment:5
priority: | critical → major |
---|
Changed November 09, 2011 01:31PM UTC by comment:6
keywords: | accessibility → a11y |
---|
Changed February 27, 2012 11:55AM UTC by comment:7
milestone: | 1.9 → 1.next |
---|---|
status: | new → open |
Need to apply this when rewriting button.
Changed June 26, 2012 01:22AM UTC by comment:8
type: | enhancement → feature |
---|
Changed October 03, 2012 03:44PM UTC by comment:9
milestone: | 1.next → 1.11.0 |
---|
Changed April 01, 2014 06:01PM UTC by comment:10
milestone: | 1.11.0 → none |
---|
I've attached a first patch that fixes the keyboard navigation. It doesn't yet add the radiogroup element, and currently places each button in the tab order.