Creating Accessible ContentTables

Tables are a great way to organise data. The visual nature of headings, rows and columns make complex data easier to read and understand.

Top tip

Before using a table, ask yourself would it make sense to put the content in a spreadsheet.

Only use tables for tabular data

Structure

Tables need to be built correctly using semantics including:

Description, caption
Heading group
Heading cells
Data cells
Row span / column span (for merged cells)

Layout tables

A common problem we see is authors using tables for layout and design to:

add background colours
position content in a grid

These are also known as ghost tables, because its often not clear that you are looking at a table.

Screen-reader programs can see them because they read the underlying semantic metadata. They will try to read the content as tabular data. This can be confusing for someone who can't see the page layout.

This example shows a table with only one column and several rows.

This table is taken from a document where it's repeated multiple times with the same headings but different content.

By merging the tables and organising the information into a tabular format, it would look like this:

Main heading	Subhead1	Subhead2	Subhead3
Table A	Table A sub 1 content	Table A sub 2 content	Table A sub 3 content
Table B	Table B sub 1 content	Table B sub 2 content	Table B sub 3 content
Table C	Table C sub 1 content	Table C sub 2 content	Table C sub 3 content

But this information is not tabular data.

It can be improved using headings and paragraphs:

Content A

Subheading 1

Content goes here...

Subheading 2

Content goes here...

Subheading 3

Content goes here...

Content B

Subheading 1

Content goes here, and so on....

Merged cells

Merged cells can cause problems for screen readers.

Tables with merged cells must be created with care using:

HTML, or
Adobe Acrobat

This is so each merged cell can be correctly mapped to the relevant heading cell.

Merged cells can not be made accessible in Microsoft Word.

Often, merged cells can be avoided by refactoring. This can involve duplicating information or creating more tables which may not always be the best solution.

Quarterly Budget Report
Department	Quarter 1			Quarter 2
Department	Allocated	Spent	Remaining	Allocated	Spent	Remaining
Community Services	£100,000	£40,000¹	£60,000	£120,000	£50,000²	£70,000
Environmental Health	£80,000	£30,000³	£50,000	£90,000	£45,000⁴	£45,000

To remove the merged cells, this table can be broken down into multiple tables per quarter or deparment.

Example using quarters

Quarter 1 Budget Report
Department	Allocated	Spent	Remaining
Community Services	£100,000	£40,000¹	£60,000
Environmental Health	£80,000	£30,000³	£50,000

You would have a similar table for Q2, Q3 and Q4.

Example using departments

Community Services Budget Report
Quarter	Allocated	Spent	Remaining
Quarter 1	£100,000	£40,000¹	£60,000
Quarter 2	£120,000	£50,000²	£70,000

You would have a similar table for each department.

Council Event Schedule
Date	Event	Time	Location
Monday, 10th March	Community Meeting	10:00 - 12:00	Town Hall
Monday, 10th March	Recycling Workshop	14:00 - 16:00	Community Centre
Tuesday, 11th March	Health Awareness Talk	09:00 - 11:00	Library
Tuesday, 11th March	Neighbourhood Watch Meeting	15:00 - 17:00	Town Hall

This table has merged cells for the date values.

It can be refactored by either:

Duplicating the date for each row that it applies to
Having one table per date

Council Event Schedule (1 date per row)
Date	Event	Time	Location
Monday, 10th March	Community Meeting	10:00 - 12:00	Town Hall
Monday, 10th March	Recycling Workshop	14:00 - 16:00	Community Centre
Tuesday, 11th March	Health Awareness Talk	09:00 - 11:00	Library
Tuesday, 11th March	Neighbourhood Watch Meeting	15:00 - 17:00	Town Hall

Council Event Schedule – Monday, 10th March
Event	Time	Location
Community Meeting	10:00 - 12:00	Town Hall
Recycling Workshop	14:00 - 16:00	Community Centre

Council Event Schedule – Tuesday, 11th March
Event	Time	Location
Health Awareness Talk	09:00 - 11:00	Library
Neighbourhood Watch Meeting	15:00 - 17:00	Town Hall

Resources

Was this page helpful?