How to make web pages accessible
Tables
Government Digital Service (GDS) advice on tables says:
'Tables should only be used to present data. Do not use tables for cosmetic changes to layout, for example to present a list because you think it looks better that way'.
When you use a table to present data on a web page, you must make sure:
- It has a clear, logic layout
- It has at least one descriptive header row or header column, formatted using 'th' (table header) HTML elements
- Any merged or split cells are formatted using appropriate HTML
Why tables need to be accessible
Inaccessible tables are difficult for people using:
- A mobile or tablet - over 60% of www.norfolk.gov.uk users use these devices
- Screen readers - they need tables set out in a certain way to understand them
How to check tables
- Open the web page in a web browser, like Microsoft Edge or Google Chrome.
- Check that any tables have at least one header row or column with text that clearly describes the data in each row or column.
- View the table HTML by either:
- Installing and using the tables bookmarklet; or
- Opening the browser developer tools (devtools) and looking for the table elements (eg. 'table', 'tr', 'th' and 'td') in the HTML
- Check the table HTML is correct by following W3C's tables tutorial
How to edit or add tables
Most content management systems (CMS) allow web page editors to edit or add tables in at least one of the following ways:
- Manually edit or add table elements in the HTML
- Apply table 'styles' to tables using a formatting toolbar
For example, when editing a SharePoint site page, editors can apply header row and column formatting using the 'Table styles' button in the text formatting toolbar.
