...
Conversely, Figure 3 illustrates an example where each row of information could be presented individually and retain meaning. In this example, a list view component should be used (Guidelines for List Views).
Attachments
Name | Date modified | Type |
|---|---|---|
Stakeholder Presentation | 2023-05-30 | Microsoft PowerPoint Presentation |
Project Requirements | 2023-05-27 | Microsoft Word Document |
Annual Report 2022 | 2023-01-15 | PDF File |
Usage Data | 2022-12-09 | Microsoft Excel Macro |
...
Clip, truncate or obscure cell content
Nest tables within other tables - This will make it difficult for screen readers to read the information in the table aloud in a way that makes sense
Merge or split cells - Despite being standard markup for tables for many years, some screen readers still do not fully support complex tables with spanned or multiple levels of row and/or column headers
Have empty table cells - Blank cells may mislead someone using a screen reader into thinking that there is nothing more in the table
Use zebra striping when the table has interactive elements as users may have a difficult time effectively differentiating between disabled, hover, focused and active states
Use an inline scroll area within the body of the table – Scroll the content on the page instead
Tips
Get users involved in determining what information needs to be displayed and how they will use it
Test tables using real content in English and French – Placeholder content may not surface issues with clipping or truncation
...
If the table will scroll horizontally on smaller viewports, ensure that it is clearly indicated to the user that horizontal scrolling is needed so that they do not miss information
Ensure that columns and table cells are large enough to be legible – There should not be scrolling within individual table cells
Follow the recommendations listed in the Best Practices section
...
Resources
Government of Canada resources
...