ARIA Accordion

From Level Access Web Labs
Jump to: navigation, search

This accordion uses buttons for the accordion headers with aria-expanded and aria-controls. Panels use the role of region with aria-labelledby referencing the accordion headers. The tab, tablist, or tabpanel roles are not used. There is no accordion role in ARIA. The last button ("Inaccessibility") is incorrectly formed, and contains the accordion's content inside the tag with role button. This was created to test behavior on iOS and Android devices with Voiceover and Talkback respectively.
Reference: WAI Description, Keyboard Interaction , States and Properties of Accordion: http://www.w3.org/TR/wai-aria-practices-1.1/#accordion
Accordion

Results

JAWS

JAWS 18 The expanded or collapsed STATE of the buttons is announced when the TAB or ARROW keys are used as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.

NVDA

NVDA 2017.2 The expanded or collapsed STATE of the buttons is announced when the TAB or ARROW keys are used as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.

iOS

VoiceOver iOS 10.3.2 The expanded or collapsed STATE of the buttons is announced as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.