- Keep it simple.
- Clearly define the table header and table body.
- Ensure rows are the same height and that columns are the same width.
- Place the comparison points in the header as users typically scan left to right, top to bottom.
- Use zebra shading to help users scan data across rows and reduce tracking errors.
- For responsive views, consider placing the key comparison point in a fixed left-hand column and allow the remaining cells to scroll underneath this column.
- Allow the data table to extend beyond the view width, rather than resizing to make it all fit. Sizing will squish the table and make it hard to read the data. Using horizontal scrolling will allow the table to maintain its proper aspect ratio and allow the user to have a seamless comparison experience.
A critical step toward creating an accessible data table is to designate row and/or column headers. In the markup, the
<td> element is used for table data cells and the
<th> element is used for table header cells.
Table headers should never be empty. This is particularly of concern for the top-left cell of some tables
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.
|Date/Time of Change||Who Made the Change||Change Details|
|May. 03 2017 9:27pm||Initial content entry|