How-to: Create Accessible Web Tables Part I

Image: wooden table If you look back at the first twenty-five years of HTML mark-up for tables on the web, you will see the original mark-up was quite basic, with little regard for assistive technologies such as screen readers; at the beginning they didn't exist.

Add to this the difficulties of laying out information and graphics on a screen. In the early days before proper styling of HTML, web designers would obsessively render whole sites using tables for every page because that was the only way to consistently reproduce their artistic masterpieces in different web-browsers. Mostly.

However twenty-five years on and we now have a whole range of assistive technologies for the visually impaired. We have fully flexible Cascading Stylesheets (CSS) to describe - without guarantees - the layout of our pages independent of content. We also have a fully qualified set of mark-up elements to fully describe our tabular data.

So why are most tables on the web still laid out like it's 1995 with only half the elements fully described? And worse, why does this include tables generated by on-line code generators written specifically for the task?

Now that we have a whole range of assistive technologies, it is possible to fully mark up tables not only for visually impaired users, but search engines as well.

What is a Table?
A table is a means to present information in a grid, or matrix, laid out in such a way that the reader (you and me) can easily extrapolate and interpret the meaning of the information as presented in the rows and columns.

Sighted readers can visually scan a table, determine the meaning ad associations of headers and contents, and this is true whether the table is on paper or on screen. Tables are a visual device. Visually impaired readers using digital devices have two levels of difficulties with tables, however:
  1. they cannot see the visual layout to be able to determine the tabular format with it's meaningful division of headers and content.
  2. if they have a screen reader, then the software must be given sufficient information to be able to relay to the user the division of headers and content and thereby carry over the meaning of the table to an aural format.
So when creating HTML tables for web pages, proper markup must be used to identify the associations between the elements within the table. Using the fully qualified HTML markup, screen readers can speak the layout and content of a table in a meaningful way.

People with visual impairments and other issues can easily use tables, as long as the tables are designed with accessibility in mind - ensuring proper reading order, identification of elements, and sizing for visual layout for the rest of us.

Let's think about table rendering in more detail.

Reading order
'Content linearisation' is what happens when you remove the formatting of the table, leaving the content in one long string. The default reading order of flattened content will most likely sit between confusing and garbage.  

Considering how many web sites use tables for layout, including spanned rows and columns to create layout and formatting, the end result is that the linearised reading order may be radically different to the visual reading order, causing confusion in screen readers and keyboard navigators.

Screen readers essentially try to read the tabular content in the literal order in which it appears in the HTML. Try using convert table to text in a word processor and see in what order the content falls out, then read it aloud. Chances are without thoughtful intervention, tabular content will fall out as garbage.

There is a vital difference between layout tables for cosmetic and page layout purposes; screen readers will read layout tables in the order of source code, making some or no sense. Data tables properly marked up will identify the constituent parts of a table including columns and rows, navigation and so on. Proper mark up will inform the discerning screen reader.

Tables for Layout and Data
I'm going to take a hard line here. If you absolutely need to lay out your web-page in a certain way, according to an aesthetically pleasing design, with pretty pictures and intricately positioned text, learn some CSS; DO NOT USE TABLES. Why?
  • you will spend days of your life failing to get it right
  • is not 'user-friendly' (remember that?)
  • it conflates layout with content when they should be separable
  • the layout WILL break in different web-browsers and devices, at different screen resolutions and font sizes, 
  • it is not responsive to mobile
  • it will make little or NO sense to a screen reader.

On today's Internet, you cannot guarantee your layout will render as intended, however intricately you style your table elements. It is generally a BAD practice. Believe me, CSS is the way to go.
Sermon over.

If tables are no good for page layout, they remain valuable for the purpose originally intended; to enable the reader to easily extrapolate and interpret the meaning of the information as presented in the rows and columns.

In order to do this, we need to consider the full range of HTML markup for tables, including captions, table headers, footers, row and column headers,  scope and sizing.

Part II, then will look at the HTML markup for tables on the web and hopefully drag us screaming into the twenty-first century. RC