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.

This article by Joshue O Connor, shows how to build a simple table using Joomla! and the features contained within the WYSIWYG editors that can make the table more accessible.

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.

A quick guide to creating accessible websites with Joomla! Understand what accessibility really means and why it’s important Ensure that content editors and writers publish accessible articles Create accessible Joomla! Templates Understand Assistive Technology (AT) and the needs of people with disabilities For more information, please visit: www.PacktPub.com/joomla-accessibility-websites-open-source-php-mysql/book

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:

<table border="2" cellspacing="5" cellpadding="5" width="350"
  summary="a list of some funk artists my favorite of their
  records and the year they recorded them in.
  " style="width: 350px; height: 288px; background-color: #f8e906;
  border: #361fdf 2px solid" dir="ltr" id="PFunk Table"
    lang="English">
<thead>
  <tr>
    <td>
      <strong>
        Artist
      </strong>
    </td>
      <td>
        <strong>
          Record
        </strong>
      </td>
      <td>
        <strong>
          Year
        </strong>
      </td>
    </tr>
</thead>
<caption class="caption">Funky Table</caption>
  <tbody>
    <tr>
      <td>
        James Brown
      </td>
      <td>
        Cold Sweat
      </td>
      <td>
        1967
      </td>
    </tr>
    <tr>
      <td>
        Sly and the Family Stone
      </td>
      <td>
        <p>
          Dance to the Music
        </p>
      </td>
      <td>
        1968
      </td>
    </tr>
    <tr>
      <td>
        George Clinton
      </td>
      <td>
        <p>
          Some of my best Jokes are friends
        </p>
         <p>
           &nbsp;
         </p>
      </td>
      <td>
      <p>
        1985
      </p>
      </td>
      </tr>
      <tr>
        <td>
          The Meters
        </td>
        <td>
          Sundazed
        </td>
        <td>
          1969
        </td>
      </tr>
</tbody>
</table>

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".

In HTML code this will look as follows:

<th id="Artist">Artist</th>
<th id="Record">Record</th>
<th id="Year">Year</th>

It could just as easily be:

<th id="header1">Artist</th>
<th id="header2">Record</th>
<th id="header3">Year</th>

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.

<tr><td headers = "Artist">James Brown</td>
<td headers = "Record">Cold Sweat</td>
<td headers = "Year">1967</td>
</tr>

That takes care of the first row, now for the second and subsequent rows:

<tr>
<td headers = "Artist"> Sly and the Family Stone</td>
<td headers = "Record">Dance to the Music</td>
<td headers = "Year">1968 </td>
</tr>
<tr>
<td headers = "Artist">George Clinton</td>
<td headers = "Record">Some of my best Jokes are friends </td>
<td headers = "Year">1985</td></tr>
<tr>
<td headers = "Artist">The Meters</td>
<td headers = "Record">Sundazed</td>
<td headers = "Year"> >1969 </td></tr>
</table>

Putting it All Together

So by looking at what we have done, can you see how the associations between headers and each data cell have been made? Look closely and you will see that it makes sense.

<th id="Artist">Artist</th>
<th id="Record">Record</th>
<th id="Year">Year</th>
<tr><td headers = "Artist">James Brown</td>
<td headers = "Record">Cold Sweat</td>
<td headers = "Year">1967</td>
</tr>
<tr>
<td headers = "Artist"> Sly and the Family Stone</td>
<td headers = "Record">Dance to the Music</td>
<td headers = "Year">1968 </td>
</tr>
<tr>
<td headers = "Artist">George Clinton</td>
<td headers = "Record">Some of my best Jokes are friends </td>
<td headers = "Year">1985</td></tr>
<tr>
<td headers = "Artist">The Meters</td>
<td headers = "Record">Sundazed</td>
<td headers = "Year">1969 </td></tr>
</table>

So now you know what the correct accessible HTML should like. Now let's look at the code as it will appear in your WYSIWYG editor with the summary attribute, the caption element, etc.

<table border="2" cellspacing="5" cellpadding="5" width="350"
summary="a list of some funk artists my favorite of their records
and the year they recorded them in. " style="width: 350px; height:
288px; background-color: #f8e906; border: #361fdf 2px solid" dir="ltr"
id="PFunk Table" lang="English">
<thead>
<th id="Artist">Artist</th>
<th id="Record">Record</th>
<th id="Year">Year</th>
</thead>
<caption class="caption">Funky Table</caption>
<tbody>
<tr>
<td headers = "Artist">James Brown</td>
<td headers = "Record"> Cold Sweat</td>
<td headers = "Year">1967</td>
</tr>
<tr>
<td headers = "Artist"> Sly and the Family Stone</td>
<td headers = "Record">Dance to the Music</td>
<td headers = "Year">1968 </td>
</tr>
<tr>
<td headers = "Artist">George Clinton</td>
<td headers = "Record">Some of my best Jokes are friends </td>
<td headers = "Year">1985</td></tr>
<tr>
<td headers = "Artist">The Meters</td>
<td headers = "Record">Sundazed</td>
<td headers = "Year">1969 </td></tr>
</tbody>
</ table>

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tables with scope</title>
</head>
<body>
<TABLE border="1"
  summary="This table charts the number of cups
    of coffee consumed by each senator, the type
    of coffee (decaf or regular), and whether
    taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
    <TH scope="col">Name</TH>
    <TH scope="col">Cups</TH>
    <TH scope="col" abbr="Type">Type of Coffee</TH>
    <TH scope="col">Sugar?</TH>
<TR>
    <TD>T. Sexton</TD>
    <TD>10</TD>
    <TD>Espresso</TD>
    <TD>No</TD>
<TR>
    <TD>J. Dinnen</TD>
    <TD>5</TD>
    <TD>Decaf</TD>
    <TD>Yes</TD>
</TABLE>
</body>
</html>

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.

You can continue to learn more about making your Joomla! website accessible in the book Joomla! Accessibility.

About The Author

Joshue O Connor is Senior Accessibility Consultant with CFIT (Centre For Inclusive Technology).

CFIT is a part of the NCBI (National Council For The Blind of Ireland) and is a not-for-profit organization that provides expert advice and services to public and private sector organizations. These services include user testing, accessibility auditing and consultancy.

Joshue has a creative background in Graphic Design, which lead to Web Development and New Media Training. After several years in the shark infested waters of the private sector, through IT training, he got to work teaching people with a wide range of physical and cognitive disabilities.

This was an invaluable hands-on experience that brought him into contact with a diverse range of Assistive Technology users, who found technology a positive and enabling force in their lives. A natural gravitation towards Web Accessibility thus blossomed.

Joshue is skilled in the design and development of accessible websites and has a deep understanding of the diversity of user requirements. He is a member of the Guild of Accessible Web Designers (GAWDS), the Web Standards Project ILG (WaSP ILG), the Irish Design For All E-Accessibility Network (Irl-Dean), the IIA User Experience Working Group (UEWG), EUAIN, and the HTML 5 Working Group. This is his first book, contributions to obscure academic papers notwithstanding.

In his spare time he hangs out with his plants, studies computer science, plays Irish traditional music badly, and runs a small record label TechRecord.