Accessibility Checklist

Any Accordion used in a New York State website should pass these tests and checklists. Also follow this acceptance criteria when building and testing a custom Accordion and when evaluating third-party open source or licensed component libraries.

NYSDS Accordion accessibility status
Total tests	Passes	Fails	To do
10	10	0	0

Accessibility tests

Anyone can run these accessibility tests, no special tools needed.

Each passing test removes a real barrier for New Yorkers who navigate by keyboard, screen reader, or voice control.

Find what you need

All of these tests can be run from your browser. Each section tells you what to use and where to get it.

Follow the checklists

Each checkbox tells you exactly what to do and what a passing result looks or sounds like.

Track and share results

Run each test, record what passes and what needs work, and print your results to share with your team.

Limit interaction with the component to only the Tab, Enter, and Spacebar keys. While testing keyboard navigation do not use a mouse whatsoever.

WHEN I use Tab to move focus to an accordion

THEN I see focus is strongly visually indicated on the header by outline and background color.

WHEN I use Spacebar or Enter to activate the header

THEN I see that focus remains on the header.
THEN I see the visibility state has toggled.

Test with at least two out of the three most common screen readers. NVDA runs under Windows and is a free download. JAWS runs under Windows and is a commercial product. VoiceOver is built into macOS. While using a screen reader do not use a mouse whatsoever.

WHEN I use a desktop screen reader and I use either Tab or an Arrow to move focus to the header

THEN I hear its purpose is clear (name).
THEN I hear it identifies its role of button or summary.
THEN I hear it expresses its state (expanded/collapsed).

WHEN I use Spacebar or Enter to activate the header

THEN I hear the state has toggled.
THEN I hear that focus remains on the header.

Test with at least one, ideally both, of the primary mobile screen readers. VoiceOver is part of iOS and TalkBack is included with most Android devices.

WHEN I use a screen reader AND I swipe to focus on a button

THEN I hear its purpose is clear (name).
THEN I hear it identifies its role of button or summary.
THEN I hear it expresses its state (expanded/collapsed).

WHEN I double-tap with the button in focus

THEN I hear the intended action occurs.

Voice

Voice Access is part of the Windows OS, and Voice Control is part of macOS.

WHEN I use a voice control system and I command, Click header text

If header text is recognized as unique, or identified via a multiple match workflow
THEN I see focus is strongly visually indicated on the header.
THEN I see the visibility state has toggled.

Zoom

All tests in this section require the browser to be zoomed to 200%. On Windows press Ctrl + plus and on macOS press Cmd + plus.

WHEN a closed accordion is in view at the top and start reading order of my browser, and I use various means to magnify the screen to 200%

THEN I see a graphic (adjacent to the header text) that indicates the component discloses content.
THEN I see the entire header text without horizontal scrolling.

WHEN the header has focus