Using Tables
Tables are a structured set of data and should be used to display tabular data in a logical way. They should never be used to create page layouts or used to present other types of information, even if you think it looks better. People using assistive technology, such as screen readers, will find it very difficult to navigate content on your page if tables are used for the wrong purpose.
Keep Tables Simple
Before adding a table to a web page, please consider if it is the best way to present your information. Tables presenting simple, tabular data should not have any more than one row header and one column header, and not contain any merged cells, so it is important to review and structure the data that your table will contain. Simple tables are more accessible than complex tables because they are more easily interpreted by a screen reader.
To create a simple and accessible table, you need to ensure that it contains a table caption, and that row and column headings are using the 'scope' attribute. An example of an accessible table can be seen below:
| Month | Amount Earned | Amount Spent | Amount Saved |
|---|---|---|---|
| January | £2,500 | £1,500 | £500 |
| February | £2,700 | £1,500 | £700 |
The good news is that when you insert a table within the HTML Editor, the 'scope' attribute is automatically generated within the markup for each defined row header and column header.
Creating an Accessible Table Within the Content Management System (CMS)
The short video below demonstrates how an accessible table can be added via the CMS.