Search and Top Navigation
#9628 open bug ()
Opened October 27, 2013 03:57PM UTC
Last modified October 29, 2013 12:31AM UTC
Button: radios are not screen reader and keyboard accessible
| Reported by: | dylanb | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | none |
| Component: | ui.button | Version: | 1.10.3 |
| Keywords: | a11y | Cc: | |
| Blocked by: | Blocking: |
Description
The radio button implementation (see demo) is not screen reader accessible due to a number of issues.
- 1) Using role=button instead of role=radio
- 2) The hidden radio button elements are still visible to the screen reader and so you get duplicated announcements
- 3) The hidden radio button elements are keyboard accessible and so the keyboard focus disappears for keyboard only users
- 4) The buttons themselves are not keyboard accessible because of missing tabindex
Attachments (0)
Change History (3)
Changed October 28, 2013 12:48PM UTC by comment:1
| description: | The radio button implementation (see demo) is not screen reader accessible due to a number of issues. \ \ 1) Using role=button instead of role=radio \ 2) The hidden radio button elements are still visible to the screen reader and so you get duplicated announcements \ 3) The hidden radio button elements are keyboard accessible and so the keyboard focus disappears for keyboard only users \ 4) The buttons themselves are not keyboard accessible because of missing tabindex \ \ → The radio button implementation (see demo) is not screen reader accessible due to a number of issues. \ \ * 1) Using role=button instead of role=radio \ * 2) The hidden radio button elements are still visible to the screen reader and so you get duplicated announcements \ * 3) The hidden radio button elements are keyboard accessible and so the keyboard focus disappears for keyboard only users \ * 4) The buttons themselves are not keyboard accessible because of missing tabindex \ \ |
|---|---|
| keywords: | → a11y |
| status: | new → open |
| summary: | UI button - radios are not screen reader and keyboard accessible → Button: radios are not screen reader and keyboard accessible |
Changed October 28, 2013 12:52PM UTC by comment:2
Never mind about the duplicate information question, I was just able to recreate that with VoiceOver.
Changed October 29, 2013 12:31AM UTC by comment:3
What I meant with the last point is that even though you have button roles, you cannot interact with these elements, you actually end up interacting with the offscreen radio elements - which makes these roles redundant altogether.
You either have to choose to hide the input elements and allow the user to interact with the label (turned into a radio with role=radio and associated attributes) or you have to just use the labels for presentation and ensure that they appear focussed when the underlying input element has focus.
Hi dylanb,
Seems sensical and easy enough.
What screen reader are you seeing this in? I cannot recreate this in VoiceOver.
This seems valid, we should probably try to preserve the default outline.
I'm confused about this because you can absolutely interact with the radio buttons with the keyboard. Could you give more details here?