Dynamic table
Accessibility guidance for Dynamic table patterns including best practices, ARIA attributes, and VGAR requirements.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Follow general best practice guidance to create accessible experiences for users of all abilities.
- Ensure focus is not lost when table data is updated dynamically, such as during sorting, filtering, or pagination actions.
- If a table has no interactive elements, ensure that screen readers can still navigate the table structure effectively. This may involve using tabIndex to put focus on the table element itself.
Table structure
- Follow Table accessibility guidelines for multi-select implementations.
- Use proper table markup with
, , , , and elements to ensure screen readers can correctly interpret the table structure. - Apply
to all column headers ( ) to explicitly associate them with their respective columns. - Apply
to the cell within each row that best serves as a name or identifier for the entire row. This is typically the first column in the row and helps screen reader users understand the row’s context.
ARIA labels and descriptions
- When using
on cells, avoid including role names such as “row”, “table”, “column”, or “cell” in the label text. Screen readers will already announce the element’s role, so including it again creates redundant information. - Ensure any row-wide
attributes or references point to the cell with (the row header) to provide consistent context across the row. - Use
to associate additional descriptive information with cells when needed, such as error messages or supplementary details.
Sorting
- Add
to column headers that are actively sorted, using the appropriate value: or . This helps screen reader users understand the current sort order. - Ensure sort buttons have clear
attributes that describe both the column name and the action, such as “Sort by Status, ascending” or “Sort by Date, descending”. - Provide visual and programmatic feedback when sort order changes to keep all users informed of the current state.
Selectable rows
- Follow Checkbox accessibility guidelines for multi-select implementations.
Expandable rows
- Follow Accordion accessibility guidelines for expandable row implementations.
Pagination
- Follow Pagination accessibility guidelines to ensure users can navigate between pages efficiently.
Loading states
- Use
or for loading indicators to announce when data is being fetched without interrupting the user’s current task. - Use
on the table element while data is loading to inform assistive technologies that the content is being updated.