Creating Accessible Tables in Joomla!

Packt Publishing

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:

Try to make the table as simple as possible.

If possible don't span multiple cells etc. The simpler the table, the easier it is to make accessible.

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.

First of all click the table icon from the TinyMCE interface and add a table with a suitable number of columns and rows.

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.

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

By selecting the table and pressing the HTML button in the editor you should see the following table code:

Now we will add the header and id association. This is a way of associating the contents of a data cell with its appropriate header, so that when a screen reader user navigates to a cell, the screen reader will announce what column the data cell is in.

This is how you make header and id association—first you deal with the headers and the table body:

Give each header a unique id; in this example the id is same as the contents. For header 1 id="Artist", header 2 id="Record" and header 3 id="Year".

Or any other suitable naming convention that makes sense for your tables. Now that we have established the header and ids, we need to associate them with the cell contents of each row in the table body as follows.

What Just Happened?

The first two steps were a lot like creating any table, but we then took some extra steps with the HTML to make sure the table was really accessible.

We added a summary that can be used to summarize the contents of the table for the blind user. The contents of the summary attribute are not displayed visually in the browser. This summary information is really useful to a screen reader user when they first navigate to a table. It is read out automatically if present and the blind user can therefore get a quick and clear overview of the purpose of the table and its contents.

We added a caption so that the both the visual user and the screen reader user can get a brief overview of the purpose of the table. The caption element is displayed visually and read out by the screen reader when the user starts to explore the table.

Tweak the headers by editing the HTML as shown. This, as you now know, helps to make the association explicit and makes the table truly accessible.

By following this advice tables can be useful for both sighted and non-sighted users.

Does Joomla! Have Good Table Manners?

I found the capabilities of creating accessible tables limited. When I tested with a screen reader I could navigate around the table, but could not easily fi gure out what piece of cellular data was associated with what header.

However, after tweaking the HTML, the table turned out just fine.

I believe that the new version of TinyMCE (2.0) has the capability of adding the scope attribute to the table editor to make more complex tables accessible. An accessible table marked up using the scope attribute would look something like this:

While the scope attribute is well supported by most screen readers available nowadays; the support was somewhat limited in the older screen readers (< JAWS 6,though it was technically supported since version 4.5 it was very patchy). So using the combination of headers and id may be better if you wish to support the older screen readers, but in general using scope attribute is also fine for marking up tables. How you mark up your tables depends on the content and how you wish to present it. A good rule of thumb is the simpler the better.

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.