ARIA Accordion

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

Web Accessibility

Structure

Forms

Color and Contrast

Search

Mobile Accessibility

PDF Accessibility

Inaccessibility

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.

mac OS voiceOver

When a button is activated, the new state is announced as expected. If a button is expanded, when VO+RIGHT ARROW is pressed, the focus is set to the top of the page. If the tab key is used then the focus goes to the region (new content) as expected.