DES 6.1 Data tables: simplify and mark up with special HTML
Data tables should appear in the simplest form possible - this makes it easier for all people to understand, but particularly for those using adaptive technology (e.g. Screen reader users).
Special HTML code also assists the accessibility of tables - you need to specify certain things so that the developer can insert this code.
- Use the most simple data table possible:
- Split single, large, complex data tables into multiple smaller simple ones:
- The vast majority of complex tables can be made into simple tables;
- If possible, design so that the table reads out logically row by row and the data values themselves are indicative of their values (see the 'important birthdays' example);
- Avoid unnecessary rowspan and colspan if possible:
- Some screen readers have problems with these although modern ones can now cope.
- Split single, large, complex data tables into multiple smaller simple ones:
- Specify additional information that the developer will code for added accessibility:
- Identify header rows and columns:
- The developer will code these specially (using a <th> tag),
- Some screen readers (most modern ones) can use this information to read out the header rows and columns before the data - this helps avoid people getting lost in long tables;
- Specify a caption to describe the nature (title) of the table;
- Write a Summary - to explain the contents of the table and provide orientation to people who listen to the table:
- The developer will code this into the table - it will only appear by request and not be visible by default.
- Identify header rows and columns:
Note: You need to specify this information on the design specification that you pass to the developer - only you know the exact purpose and, therefore, appropriate headings, title (caption) and description (summary) for the table.
Example summary and caption for the simple table shown below
summary="Important childrens' birthdays to remember. First column: child's name, second: child's age, third: date of birthday"
caption="Important Birthdays" - this is shown by default above the table - but can be moved.
