Opened 10 years ago

Last modified 6 years ago

#5210 open feature

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)

button_a11y_enhancements.txt (8.8 KB) - added by hhillen 10 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 10 years ago by hhillen

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.

comment:2 Changed 10 years ago by hhillen

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 10 years ago by hhillen

comment:3 Changed 10 years ago by Scott González

Priority: minormajor

comment:4 Changed 10 years ago by Jörn Zaefferer

Priority: majorcritical

Closed #5199 as a duplicate.

comment:5 Changed 9 years ago by Scott González

Priority: criticalmajor

comment:6 Changed 8 years ago by Scott González

Keywords: a11y added; accessibility removed

comment:7 Changed 8 years ago by Jörn Zaefferer

Milestone: 1.91.next
Status: newopen

Need to apply this when rewriting button.

comment:8 Changed 7 years ago by Scott González

Type: enhancementfeature

comment:9 Changed 7 years ago by Scott González

Milestone: 1.next1.11.0

comment:10 Changed 6 years ago by Scott González

Milestone: 1.11.0none
Note: See TracTickets for help on using tickets.