How to make web pages accessible

An accessible table can sometimes be used to present simple data or information that can be organised in a structured way. 

On this page

• When to use a table
• Making a table accessible
• Add or edit tables
• Check a table on webpages
• Related resources 

If you work for the council, first discuss using a table on our web pages with the communications team.

When to use a table

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

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

We may sometimes use tables on our website:

• 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 of designated header cells (or one row and one column of header cells), otherwise break it down into smaller tables
• is a minimum 2 columns and 3 rows, including the header row (table content this small might be better as normal text)

You should avoid:

• publishing complex or nested tables
• using very large data tables

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:

• has a clear simple layout
• has text that is left aligned and numerical data that is right aligned - column headers can be either left or right aligned depending on the type of data used  
• is set to 100% full page width so it can resize on smaller screens
• has at least one designated row or column of coded header cells which explains the content
• includes the cell direction (scope) a header cell relates to
• has no empty header cells
• does not use split or merged cells or nested tables (tables within tables)
• uses a coded <caption> tag for its description if possible

This structures your table so digital tools can correctly understand and present the table to users.

Do not:

• copy and paste a table from another program like Microsoft Word or Excel into your website editing tool 
• use a flat 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)

Hear 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

Tables with a clear simple layout 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

Make sure the table's reading order flows logically from left to right. Use the ‘Tab’ key on your keyboard to tab through the table cell by cell, row by row.

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 a text formatting toolbar. 

Give the table designated header cells

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

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

This table example of fictional 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 fictional school admissions appeal dates 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')

Check a table 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 describes 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)