Table
Fixed grid that organizes information or data using columns and rows.
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.
- If headers don’t provide any functionality, they will not be focusable. Screen readers will be aware of headers by announcing them during navigation. They are also navigable during screen reader’s reading or browsing mode.
Table structure
- Ensure every table has a
, which is visually hidden in this library using our screen reader class. - Ensure the
adds meaning to the table heading by giving additional information about the columns or contents. - Ensure tables have both
and elements. - Add
to the elements for tables with many columns so screen readers will announce the column label along with the column contents. - Use
, , and attributes if there are multiple rows of headers to associate them with the table cells.
Table content
- Ensure that each form element ID is unique, which can be easy to forget when generating rows in a loop.
- Ensure links or buttons use aria-labels to clarify where they lead if the visible text is repeated. For example, if every row has a “Details” link, use “Details of <unique row item>”.
Dynamic features
- Sortable columns’
elements should have an attribute with the dynamic value of the state. The header should have a focusable control to trigger the sort. - Ensure checkboxes used to select a row are programmatically labeled with unique and meaningful text. They can use
or to connect them to the id of content in another column. - Inform users in the table’s
if there’s a control to hide columns. - Use visible or hidden labels to clarify when external controls (such as search) interact with the table.