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

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.

  1. Navigate to a page on your website where the accordion component is used.
  2. Enlarge the view of your screen to 200%.
  3. Once zoomed, use a mouse to complete the tests in the checklist.

Use one of the following methods to control screen magnification in your browser:

  1. Windows OS: Click ctrl while using the scroll wheel on your mouse until you see "200%" appear in the top right of your screen. Or, click ctrl + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click ctrl + 0.)
  2. Mac OS: Click command + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click command + 0.)
  3. Browser settings: Customize your browser settings to display pages at 200%.
Select passing tests

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.

  1. Navigate to a page on your website where the accordion component is used.
  2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the accordion.
  3. Use the testing checklist to make sure all functionality works with keyboard navigation.

For instruction for using keyboard navigation, use this resource from WebAIM.

Select passing tests

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.

  1. Navigate to a page on your website where the accordion component is used.
  2. Open a dedicated screen reading app or your operating system screen reader.
  3. Test with both a keyboard and a mouse to complete the tests in the checklist.

Instructions for setting up the screen reader on your operating system:

  1. VoiceOver for Mac: Getting started guide
  2. Narrator for Windows: Complete guide to Narrator
Select passing tests

Share your feedback

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