Components

Accordion accessibility tests

Any USWDS accordion should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Accordion accessibility status

The USWDS team did 23 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
23	21	0	2	0

Overview of recent accessibility test results:

• Passed: 21
• Passed with exceptions: 0
• Conditional: 2
• Failed: 0

Test the accordion in your project

USWDS tests components in isolation. You need to test the accordion component in the context of your own site to ensure compliance with Section 508 accessibility standards.

Use the checklist below.

Follow the "how to test" instructions for each type of assistive technology.

Anyone can test for accessibility.

These quick manual tests don't require special equipment.

Accordion accessibility checklist

• Zoom magnification tests
• Keyboard navigation tests
• Screen reader tests

Zoom magnification tests

USWDS performed these tests to check accordion accessibility and usability for zoom magnification. For help performing your own zoom magnification tests, check out the resources in the expandable section below.

Select passing tests

No need to scroll horizontally when screen is magnified. When you zoom to 200%, accordion panels do not require horizontal scrolling.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus indicator is clear when screen is magnified. When you zoom to 200% and navigate through items with the tab key, each item has a focus highlight that is clear and visible.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Content does not get cut off when screen is magnified. When you zoom to 200%, no content is cut off.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Content does not overlap when screen is magnified. When you zoom to 200%, no text or images in the content overlap.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Content is not obscured by page elements when screen is magnified. When you zoom to 200%, the accordion panels are not obscured by any other page elements (like pop-ups or images).

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Keyboard navigation tests

USWDS performed these tests to check accordion accessibility and usability for keyboard navigation. For help performing your own keyboard navigation tests, check out the resources in the expandable section below.

Select passing tests

Interactive elements work after tabbing. When you use the tab key to navigate into an open accordion panel, each interactive item inside that panel (like a link) is selectable.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Accordion panel opens with keyboard interaction. When you use the enter key or the spacebar on a closed panel, the panel opens (expands).

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Accordion panel closes with keyboard interaction. When you use the enter key or the spacebar on an open panel, the panel closes (collapses).

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Accordion panel does not toggle on hover. When you hover or focus on any accordion panel, the panel neither opens nor closes.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus moves out of the accordion without closing the panel. When you navigate out of the accordion, it does not close.

• WCAG A
• 2.1.2 No keyboard trap
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus moves forward with keyboard interaction. When you navigate through items with the tab key, the order in which the visible focus proceeds from item to item is logical. (For example, the focus doesn’t skip a link or accordion heading.)

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus moves backwards with keyboard interaction. When you navigate through items with shift + tab, the visible focus moves to the previous focusable elements without skipping any items.

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus stays on the panel header. When you use the enter key or the spacebar on a closed panel, the focus highlight stays on the panel header.

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus indicator is clear on the accordion panel. When you tab onto an accordion panel, the focus highlight is clear and visible.

• WCAG AA
• 2.4.7 Focus visible
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus indicator is clear on interactive items. When you navigate through interactive content items (like links) with the tab key, each item has a focus highlight that is clear and visible.

• WCAG AA
• 2.4.7 Focus visible
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Screen reader tests

USWDS performed these tests to check accordion accessibility and usability for screen readers. For help performing your own screen reader tests, check out the resources in the expandable section below.

Select passing tests

Focus moves in a logical order when using a screen reader. When you use a screen reader and navigate between accordion panels, the order in which the focus proceeds from item to item is logical. (For example, the focus doesn’t skip a link or accordion heading.)

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Focus indicator is visible when using a screen reader. When you use a screen reader and navigate between accordion panels, the virtual cursor (or JAWS focus) moves from one header to the next.

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Heading levels are logical. When you use a screen reader and navigate through the accordion panel headings, the heading levels are the correct level for the page outline.

This can only be tested in the context of your page. Be sure to test this in your project.

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Conditional
• Last test: v3.5.0

• USWDS test status:
  Conditional
• Last test: v3.5.0

Heading levels are consistent. When you use a screen reader and navigate through the accordion panel headings, each accordion panel’s heading level is the same. (Typically this is a heading level 2 or 3.)

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Conditional
• Last test: v3.5.0

• USWDS test status:
  Conditional
• Last test: v3.5.0

Screen reader announces “collapsed” state. When you use a screen reader and navigate to a closed panel, the screen reader announces that the content is “collapsed.”

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Passed
• Last test: v3.8.0

• USWDS test status:
  Passed
• Last test: v3.8.0

Screen reader announces “expanded” state. When you use a screen reader and navigate to an open panel, the screen reader announces that the content is “expanded.”

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Passed
• Last test: v3.8.0

• USWDS test status:
  Passed
• Last test: v3.8.0

Screen reader announces “expanded” state with expected keys. When you use a screen reader and use the enter key or the spacebar on a closed panel, the screen reader announces that the content is “expanded.”

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Screen reader announces “collapsed” state with expected keys. When you use a screen reader and use the enter key or the spacebar on an open panel, the screen reader announces that the content is “collapsed.”

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Passed
• Last test: v3.5.0

• USWDS test status:
  Passed
• Last test: v3.5.0

Share your feedback

• Propose a new test
• Report an error

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-03-29	N/A	Guidance	No	Updated the test status for announcing the “collapsed” and “expanded” states from “Passed with exceptions” to “Passed”. We determined that the flagged issue was isolated to our documentation site and fixed the issue. More information: uswds-site#2557
2024-01-17	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2138