Example Consultation Document

Chapter 4 - Tables

Data tables vs Layout tables

Tables are often used in documents in two ways:

1. To present data in an easily readable format
2. For layout puposes for example highlighting text

When showing documents online, layout tables should not be used as this is not good practice for accessibility.  Data tables can be left in their current format, however layout tables should be removed and the text presented in a "flattened" format.  Below is an example of a table used for layout and how this can easliy be presented in an accessible text format:

A layout table example

Data from table displayed in a non-tabular format:

A - High rate of decline

This scenario assumes an annual decline in the amount of waste per household of 1.48%. This reflects the historic trend seen between 2007 and 2019. However, this timeframe includes a large drop in household waste arisings between 2007 and 2008 which is likely to be due to the recession and may not be representative of longer-term trends.

B - Low rate of decline

This scenario assumes an annual decline in the amount of waste per household of 0.58%. This reflects the historic trend seen between 2008 and 2019 and therefore excludes the possible recessionary impact between 2007 and 2008. This scenario would result in an increase of less than 10,000 tonnes per annum of LACW by 2038. Although this scenario assumes a decline in the amount of waste per household, the increased number of households by 2038 would result in overall growth.

C - No change

This scenario assumes 0% change in the amount of waste produced per household going forward based on the most recent 2019 figures. This scenario would result in increase of around 80,000 tonnes per annum of LACW by 2038. Although this scenario assumes no change in the amount of waste per household, the increased number of households by 2038 would result in overall growth.

Wide tables

When using data tables online, if the table is very wide problems can arise when viewing the data on smaller screens (such as mobiles).  Even on desktops some tables are just too wide to be viewed on the screen.  If possible very wide tables should be avoided or reduced to fit on screens - but if there is no alternative scrollbars can be added so all the data can be viewed by scrolling across the screen.  This keeps the data visible and the table intact.  A similar method to scrolling across the whole table is to fix a column and allow the other columns to scroll.  Finally, if neither of the other solutions is suitable, then for small screens the table can be transformed to a vertical structure.  The examples below show each of these methods in action.

Here is the original table which is too wide to be visible on the screen.

Original wide table 

For the first example a scrollbar is added to the bottom of the table to allow users to scroll and see the rest of the data.

Example 1 - a scrollbar

In this second example, a scrollbar is added to the bottom of the table again but in this case the first column is fixed so the user can see the site name as they scroll through the data.

Example 2 - fixed column and scrollbar

The final example, a table is too wide to fit on a small screen (such as a mobile).  Some tables can be modified to display in a vertical structure which removes the need for scrolling altogether.  Not all tables will suit this method - but it can be useful for certain cases.

Example 3 - Vertical structure:

Original table

This is how the table would be presented on a small screen such as a mobile - some of the columns are cut off.  In this case a scrollbar could be added (as in the examples above) or the table could be displayed in a vertical format.  This is only really suitable for short tables with few columns.

See below for the same table in a vertical structure:

Any or all of the above methods for table display can be used in a document depending on the size of table and type of data.  However, as mentioned previously, it is best to check if tables are really necessary and move data into a flattened structure if possible to help with accessibility.