How to make web pages accessible

Use an accessible table to present simple data or information that can be organised in a structured way. 

On this page

• What a table is and when to use it
• Making a table accessible
• How to add or edit tables
• How to check a table
• Related resources 

What a table is and when to use it

A table is used to present simple data or information that can be organised in a structured way. A table can make it easier to:

• understand the relationship between different types of data
• examine a range of possibilities at a glance

When to use it

Avoid using tables in content unless there is a real user need. Tables, especially complex ones, can be harder to make accessible. They are also harder to view on mobile devices. 

We use tables on our website in two ways:

• for simple data that cannot be laid out as normal text
• as a searchable table of information (typically added by a website developer)

Do not use tables to create web page layouts or when normal page structure can be used instead, like headers or lists 

Make sure a table: 

• has one row header (or one row and one column header), otherwise break it down into smaller tables
• is a minimum 2 columns and 3 rows, including the column header (table content this small may be better as normal text)

You should avoid:

• publishing complex or nested tables
• using very large data tables - break them down into smaller tables or consider giving it as a spreadsheet document

Consider the alternatives

A table may not always be the best way to present content on a website. A simple table can often be replaced with a:

• series of bulleted lists with headings and subheadings
• single bulleted list, using commas to separate the information

If you need to provide a large table of data to users, use the web page text to summarise the findings, then provide an accessible spreadsheet instead.

Making a table accessible

You must add a table to a web page correctly or it will not be accessible. Inaccessible tables are difficult for people using:

• assistive technologies like screen readers - they must be set up in a certain way to be understood by these tools
• a mobile or tablet device- over 67% of people on www.nottinghamshire.gov.uk use these devices

Be sure your table:

• is right aligned and has a clear simple layout
• is set to 100% full page width so it can resize on smaller screens
• has at least one designated header row which explains the content with its scope (cells a header relates to) 
• has no empty header cells
• does not use split or merged cells or nested tables (tables within tables)
• uses a <caption> tag to describe it

This will structure your table so digital tools can correctly understand and present it to users.

Do not:

• copy and paste a table from another program like Microsoft Word or Excel into your website editing tool 
• use an image of a table instead of an accessibly created HTML table
• use tables that are complex with irregular headers or multi-level headers (cells that span multiple columns or rows)

Learn how an accessible table works for a screen reader in this 3 minute video (Government Digital Service) [YouTube]

Use a clear, simple layout and logical reading order

Make the layout of your table clear and simple - this will help everyone.

You should avoid:

• using split or merged cells - if you find this difficult, try splitting your data up into multiple tables
• including large amounts of text in your table - try using text headings and lists instead

Check the table's reading order makes sense from left to right. Use the ‘Tab’ key on your keyboard to tab through the table cell by cell, row by row.

How to add or edit tables

Only add a table to your web page if:

• there is a real user need 
• you know how to make it accessible to assistive technologies

Most website content management systems (CMS) will allow web editors to add and edit simple tables using the text formatting toolbar. 

Give the table designated header cells

On our website, editors can use 'Cell properties' to set table cell type to 'Header cells' and choose a scope (cells a header relates to) like 'Column'.

Example 1: Table with header cells in the top row only

This table example of upcoming library events has a border and header cells in the top row only.

It has been set up using:

• a top row set from 'Cell' to 'Header cell' and the scope set to 'Columns' (in 'Cell properties')
• a table <caption> element added (in 'Table properties')
• table size set at 100% page width (in 'Table properties)
• 5px cell padding, or space between text and cell wall (in 'Table properties')
• 1px border (in 'Table properties')

Example: Table with header cells in the top row and first column

This table example for school admissions appeals has header information in both the top row and the first column. 

It has been set up using:

• top row cells with text set from 'Cell' to 'Header cell' and the scope set to 'Columns' (in 'Cell properties')
• 'Primary' and 'Secondary' row cells set from 'cell' to 'header' with a scope set to 'rows' (in 'Cell properties') 
• table <caption> tag added (in 'Table properties')
• table size set at 100% page width (in 'Table properties)
• no table border (in 'Table properties')

How to check tables on web pages

After you publish your web page, you must check tables are set up correctly. 

1. Open the web page in a web browser, like Microsoft Edge. 
2. Open the WAVE Evaluation Tool (Microsoft Edge Addons).
3. Select the table element icons in the 'Details' panel, 'Structural Elements' section.
4. Check that tables have: 
   • at least one header row or column is defined with the correct scope (cells a header relates to)
   • no empty header cells
   • text that describe the table has a <caption> tag added

Related resources

Guidance on accessible tables

• Content design: planning, writing and managing content: Tables (GOV.UK)
• Creating Accessible Data Tables (WebAIM)

Web Content Accessibility Guidelines relating to tables

• WCAG 1.3.1: Info and Relationships (W3C)
• WCAG 1.3.2: Meaningful Sequence (W3C)
• WCAG 1.4.10: Reflow (W3C)