Skip to main content

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:

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 hhillen comment:1

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.

Changed February 23, 2010 07:23AM UTC by hhillen 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 scottgonzalez comment:3

priority: minormajor

Changed March 24, 2010 10:11PM UTC by jzaefferer comment:4

priority: majorcritical

Closed #5199 as a duplicate.

Changed October 19, 2010 04:02PM UTC by scottgonzalez comment:5

priority: criticalmajor

Changed November 09, 2011 01:31PM UTC by scottgonzalez comment:6

keywords: accessibilitya11y

Changed February 27, 2012 11:55AM UTC by jzaefferer comment:7

status: newopen

Need to apply this when rewriting button.

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:8

type: enhancementfeature

Changed October 03, 2012 03:44PM UTC by scottgonzalez comment:9

milestone: 1.next1.11.0

Changed April 01, 2014 06:01PM UTC by scottgonzalez comment:10

milestone: 1.11.0none