Creating Accessible Tables

Tables got a bad review in accessibility circles, because they used to create complex visual layouts. This was due to the limitations in the support for presentational specifications like CSS and using tables for layout was a hack—that worked in the real world—when you wanted to position something in a precise part of the web page.

Tables were designed to present data of all shapes and sizes, and that is really what they should be used for.

The Trouble with Tables

So what are tables like for screen reader users? Tables often contain a lot of information, so sighted users need to look at the information at the top of the table (the header info), and sometimes the first column in each row to associate each data cell.

Obviously this works for sighted users, but in order to make the tables accessible to a screen reader user we need to find a way of associating the data in each cell with its correct header so the screen reader can inform the user which header relates to each data cell.

Screen reader users can navigate between data cells easily using the cursor keys. We will see how to make tables accessible in simple steps.

There are methods of conveying the meaning and purpose of a table to the screen reader user by using the caption element and the summary attribute of the table element that you will find more on in the next section.

We will learn how to build a simple table using Joomla! and the features contained within the WYSIWYG editors that can make the table more accessible. Before we do that though I want you to ask yourself about why you want to use tables (though sometimes it is unavoidable) and what forms should they take.

Simple guidelines for tables:

1. Try to make the table as simple as possible.   
2. If possible don’t span multiple cells etc. The simpler the table, the easier it is to make accessible.   
3. Try to include the data you want to present in the body text of your site.

Time for Action—Create an Accessible Table (Part 1)

In the following example we will build a simple table that will list the names of some artists, some albums they have recorded, and the year in which they recorded the albums.

1. First of all click the table icon from the TinyMCE interface and add a table with a suitable number of columns and rows.
       
       
      
   
2. By clicking on the Advanced tab you will see the Summary field. The summary information is very important. It provides the screen reader user a summary of the table.

For example, I filled in the following text: “A list of some funk artists, my favorite among their records, and the year they recorded it in”.

My table then looked as follows:

What Just Happened?

There is still some work to be done in order to make the content more accessible. The controls that the WYSIWYG editor offers are also a little limited so we will have to edit the HTML by hand.

Adding the summary information is a very good start. The text that I entered “A list of some funk artists, my favorite among their records, and the year they recorded it in.” will be read out by the screen reader as soon as it receives a focus by the user.

Time for Action—Create an Accessible Table (Part 2)

Next we are going to add a Caption to the table, which will be helpful to both sighted and non-sighted users. This is how it’s done.

Firstly, select the top row of the table, as these items are the table heading. Then click on the Table Row properties icon beside the Tables icon and select Table Head under General Properties. Make sure that the Update current Row is selected in the dialogue box in the bottom left. You will apply these properties to your selected row.

If you wish to add a caption to your table you need to add an extra row to the table and then select the contents of that row and add the Caption in the row properties dialogue box. This will tell the browser to display the caption text, in this case Funky Table Caption, else it will remain hidden.

What Just Happened?

By adding caption to the table, you provide useful information to the screen reader user. This caption should be informative and should describe something useful about the table. As the caption element is wrapped in a heading it is read out by the screen reader when the user starts exploring the table—so it is slightly different to the summary attribute, which is read out automatically.

Does it Work?

What we just did using the WYSIWYG editor, TinyMCE, is enough to make a good start towards creating a more accessible table, but we will have to work a little more in order to truly make the table accessible. So we will now edit the HTML.

The good news is that you have made some good steps in the right direction and the final step is of associating the data cells with their suitable headers, as this is something that we cannot really do with the WYSIWYG editor alone, and is essential to make your tables truly accessible.