Components

Table accessibility tests

Any USWDS table should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Table accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
11	10	1	0	0

Overview of recent accessibility test results:

• Passed: 10
• Passed with exceptions: 1
• Conditional: 0
• Failed: 0

Test the table in your project

USWDS tests components in isolation. You need to test the table 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.

Table accessibility checklist

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

General tests

Select passing tests

Color is not the only method used to convey meaning in a table. When viewing the table, you never have to rely on color alone to understand the table’s meaning.

• WCAG A
• 1.4.1 Use of color
• USWDS test status: Passed
• Last test: v3.7.1

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

Table content meets color contrast requirements. When you view the content in a table and use ANDI or a color contrast analyzer to look at the hex colors, contrast between the table background and text is at least 4.5:1.

• WCAG AA
• 1.4.3 Contrast (Minimum)
• USWDS test status: Passed
• Last test: v3.7.1

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

Zoom magnification tests

USWDS performed these tests to check table 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 table 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

Table content is visible and functional when screen is magnified. When you zoom to 200%, content in the table remains visible and does not overlap with other content.

• WCAG AA
• 1.4.10 Reflow
• USWDS test status: Passed
• Last test: v3.7.1

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

Keyboard navigation tests

USWDS performed these tests to check table 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 table component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the table.
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

Table elements can be navigated by keyboard without special cues. When using a keyboard to navigate a table, you can navigate using arrow keys or the tab key with no unexpected instruction.

The table component may not pass all elements of this test.

A scrollable table does not scroll with left and right arrow keystrokes in JAWS and NVDA. The offscreen table data is read aloud, but a user would need to use their mouse to follow along with the focus indicator.

We have logged this issue and are prioritizing it. Learn more about this issue on GitHub.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed with exceptions
• Last test: v3.7.1

• USWDS test status:
  Passed with exceptions
• Last test: v3.7.1

Table cells do not trap focus. When using a screen reader and keyboard keystrokes to navigate a table, you can easily navigate in and out of the table cells using only keystrokes.

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

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

Focus indicator is clear on interactive items in tables. When using a keyboard to navigate a table, a focus indicator appears around all interactive elements (e.g., arrows for sorting, links).

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

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

Screen reader tests

USWDS performed these tests to check table 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 table 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

Table cells are read one at a time and provide context for each cell. When using a screen reader to navigate a table, the screen reader speaks one cell at a time and explains where each cell is in the table. Tip: When using JAWS, press the ctrl + alt keys to navigate within the table.

• WCAG A
• 1.3.1 Info and relationships
• USWDS test status: Passed
• Last test: v3.7.1

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

Table cells are read in logical order. When using a screen reader to navigate a table, you hear the table cells for an entire row read in the correct order (e.g., from left to right for English) before moving down to the next row.

• WCAG A
• 1.3.2 Meaningful sequence
• USWDS test status: Passed
• Last test: v3.7.1

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

Merged table headers are correctly associated with table cells. When using a screen reader to navigate a table with merged header cells, you can understand which lower-level data is organized under merged header cells.

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

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

The table has a header, and it is associated with the correct table cells. When using a screen reader to navigate a table, you can clearly hear which column header the data falls under.

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

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

Table elements have the appropriate name, role, and state. When using a screen reader to navigate a table, the screen reader announces the name and role of interactive elements such as scrolling, sorting, and clicking. For sortable tables, you hear whether the column is sorted and how it is sorted.

• WCAG A
• 4.1.2 Name, role, value
• USWDS test status: Passed
• Last test: v3.7.1

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

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-20	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2538