Accessibility Checklist

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

NYSDS Table accessibility status
Total tests	Passes	Fails	To do
20	20	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 the tab key to move focus into a sortable table from before the table

THEN I see focus is strongly visually indicated on the first sortable column header
THEN I see a bi-directional graphic visually indicates that the column is sortable

WHEN focus is on a sortable column header and I activate spacebar or tab

THEN I see selection is strongly visually indicated on the header
THEN I see the directional graphic points in the direction of sorting
THEN I see the table rows are re-ordered correctly

WHEN focus is on a sortable column header and I activate tab

THEN I see focus is strongly visually indicated on the next sortable column header

WHEN focus is on the last sortable column header and I activate tab

If any table cells contain focusable elements
THEN I see focus moves to the first focusable element in table content
If no table cells contain focusable elements
THEN I see focus moves to the first focusable element after the table in page content

WHEN I use the tab key to move focus into a sortable table from after the table

If any table cells contain focusable elements
THEN I see focus moves to the last focusable element in table content
If no table cells contain focusable elements
THEN I see focus moves to the last sortable column header

Mouse

A two-button mouse with scroll wheel is assumed.

WHEN I use a mouse and hover over a sortable table column header

THEN I see a hover effect is strongly visually indicated on the column header
THEN I see my cursor changes to a pointer

WHEN I click a sortable column header

THEN I see selection is strongly visually indicated on the header
THEN I see the directional graphic points in the direction of sorting
THEN I see the table rows are re-ordered correctly

WHEN I give focus to a sortable table header without activating it (mouse down, slide off, mouse up)

THEN I see the focus is strongly visually indicated on that header but the sortable state is not changed

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 enter the table from a position on the page before it, navigating by button, by form element, or by tab

THEN I hear a title or description of purpose
THEN I hear a usage hint that column headers with buttons are sortable
THEN I hear I am within a table with explicit numbers of rows and columns
THEN I hear my current row-column position
THEN I hear a column header name and that it is a button
And if the table was already sorted by this column
THEN I hear the column is sorted and whether the direction is ascending or descending

WHEN I enter the table from a position on the page before it, navigating by arrow

THEN I hear a title or description of purpose
THEN I hear a usage hint that column headers with buttons are sortable
THEN I hear I am within a table with explicit numbers of rows and columns
And if I proceed by arrow
THEN I hear a new row-column position
THEN I hear a new column header name and that it is a button
And if the table was already sorted by this column
THEN I hear the column is sorted and whether the direction is ascending or descending

WHEN my cursor or focus is on a column header and I activate either enter, or spacebar, or my screen reader's dedicated key shortcut for button activation

And if I am using Windows NVDA or JAWS
THEN I hear the column is sorted and whether the new direction is ascending or descending
And if I am using macOS VoiceOver and activate the key chord ctrl alt + C
THEN I hear the column is sorted and whether the new direction is ascending or descending

WHEN my cursor or focus is on a column header and I navigate to an adjacent header with arrow or tab

THEN I hear a new column position
THEN I hear a new column header name and that it is a button
And if the table was already sorted by this column
THEN I hear the column is sorted and whether the direction is ascending or descending

WHEN my cursor or focus is within a table and I use the dedicated keyboard interface that my screen reader provides for navigating HTML tables

And if I navigate between columns
THEN I hear the new column name
THEN I hear the new column number
THEN I hear the new cell text content
And if I navigate between rows
THEN I hear the new row number
THEN I hear the new cell text content

WHEN I enter the table from a position on the page after it, navigating backwards by button, by form element, or by tab

THEN I hear the table has a title or description of purpose
THEN I hear a usage hint that column headers with buttons are sortable
THEN I hear I am within a table with explicit numbers of rows and columns
THEN I hear my current row-column position
If there is a focusable element within the table body
THEN I hear the name of the focused element
And if there is no focusable element within the table body
THEN I hear the name of the last column header and that it is a button
And if the table was already sorted by this column
THEN I hear the column is sorted and whether the direction is ascending or descending

WHEN I enter the table from a position on the page after it, navigating backward by arrow

THEN I hear I am within a table with explicit numbers of rows and columns
THEN I hear my current row and column position
THEN I hear a column header name
THEN I hear the cell text content

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 swipe left to enter a table with a caption that includes a visually hidden usage hint

THEN I hear the table has a title or description of purpose
THEN I hear the usage hint
THEN I hear I am within a table
THEN I hear the number of rows and columns

WHEN I am on a table caption and I swipe right to focus on the first table column header

THEN I hear the cell name or text content
THEN I hear I am on a column header
THEN I hear which row and column I am on
And if the column header content is a button
THEN I hear that I am on a button
And if the table was already sorted by this column
THEN I hear the column has a sort state of either ascending or descending

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 table column header label"

And if that label is recognized as unique, or identified via a multiple match workflow
THEN I see selection is strongly visually indicated on the header
THEN I see the directional graphic points in the direction of sorting
THEN I see the table rows are re-ordered correctly

Zoom

Test Text Resize by modifying browser settings.

In Chrome-based browsers, go to Settings → Appearance → Font size. Select "very large."
In FireFox, go to Settings → Accessibility → Default zoom. Select "200%" and mark the checkbox "Zoom text only."

Test Reflow with browser devtools.

In Firefox, open the toolbar menu button → More tools → Web Developer tools or Ctrl /on windows or on mac Cmd + Shift + I → Responsive Design Mode or Ctrl /on windows or on mac Cmd + Shift + M.
In Chrome-based browsers, open the toolbar menu button → More tools → Developer tools or Ctrl /on windows or on mac Cmd + Shift + I → Toggle Device Toolbar or Ctrl /on windows or on mac Cmd + Shift + M.
Finally, set dimensions to "responsive," "320 width by 256 height," and "landscape" orientation.

GIVEN the browser is configured to test Text Resize; WHEN a table is in view

THEN I see all text adapts to the font size
THEN I see all text is visible without clipping or truncation
THEN I see no text overlaps other text, or overlaps any other user interface element

GIVEN the browser is configured to test Reflow; WHEN a table is in view

THEN I see there is no loss of information, meaning, or functionality
THEN I see when scrolling is required, it is primarily in one dimension (preferably vertical)
THEN I see when scrolling is required in two dimensions, the table contains only content that meets exceptions for reflow
And understanding that while most data tables have an exception for reflow, this does not extend to non-excepted content adjacent to the table
THEN I see when scrolling of the table is required in either one or two dimensions, content above and below the table reflows independently