Tables
|
Complexity |
For optimal accessibility |
|---|---|
|
When you have minimal data |
Have max. two rows of headers
Include the "scope" attribute with a value of "scope="col" for column headers and scope="row" for row headers. This helps you properly associate the header cells with their respective data cells. |
|
When you have complex data |
Assign a unique ID for each header and utilise the "headers" attribute for data cells to associate them with the corresponding header cells. |
Attributes
|
Values |
For optimal accessibility |
|---|---|
|
When you have titles & last-updated dates |
Include them in the <caption> tag inside of the <table> element. |
Functionalities
|
Sorting |
For optimal accessibility |
|---|---|
|
To set a default sort column and direction for a table |
Add the attribute aria-sort with the desired sort direction ("ascending" or "descending") to the corresponding sortable column header.
|
|
When you use column header sorting |
Avoid manually adding aria-label attributes to sortable column headers. When row sorting is enabled, JavaScript automatically adds aria-label attributes to the sortable column headers and their toggle sort buttons.
These labels are dynamically updated to reflect the current sort state of each column (ascending, descending, or unsorted) whenever there are changes in the sorting. |
|
When you use row sorting |
Include an aria-live region following the <table> element. This region will announce sort state changes to screen reader users.
Add the region to the HTML document before it loads to provide real-time updates and enhance the browsing experience for your screen reader users. |