Tip of the Week – Tables That Are a Treat!

Tables. They’re used for layout and for data on the Web. And they can cause major accessibility headaches in both cases. But there is a cure: Proper Markup.

A Definition

When we talk about “markup”, we’re talking about the code behind the scenes. “Hypertext Markup Language” or HTML, is the language the browsers speak, that tells them how to set up a Web page, where to put the paragraphs, what phrases should be headings, what text to turn into hyperlinks. The content management system’s editor acts as a translator so that you don’t need to know HTML. You highlight a phrase, choose “heading 2″ and it becomes a heading. But it does help to understand what’s going on between the Web page and the browser.

How Tables Are Read

For a layout table, like the one we are using to display the photo below, you won’t add anything special to the markup. Just create the table, place your content in the cells and you’re done. The screen reader will linearize the table meaning that it will read each row, cell by cell.

t shirt for Accessibility Day March 21, 2012 Indiana Disability Awareness Month was observed during March 2012. Participants were given T shirts

Table toolbar with the insert table button highlighted

Fall Enrollment
Full Time Part Time
5,245 4,809

Data Tables are Different

Data tables require additional markup so that when they’re read by a screen reader, the information makes sense to the listener. For instance, take a table that shows enrollment data for full and part time students during the fall semester. (Data is for demonstration purposes only).

A sighted person can see that the table has enrollment figures for the fall and can easily see which number relates to which student status. But someone listening to that table needs guideposts or they’ll become completely lost in a sea of numbers.

What the data table needs most are headings which usually can be found in the first row which will tell the reader what the data means. And it is very easy to identify header cells using the table buttons in the editor’s window.

Once you have inserted your table and added the caption and summary, put your heading information in the header cells – in this case, the headers are Full Time and Part Time. Put your cursor in one of the header cells and click the Cell Properties button.

Table Toolbar showing cell properties button circled

Table cell dialog box showing Scope, Cell type and update option to update all cells in a row

In the window that pops up, choose Header for the type of Cell, choose Column for the Scope, and then choose Update all cells in the row. This puts the header information in place and makes it possible for the screen reader user to make sense of your data.

Couldn’t be simpler, right? If you have questions about this tip, please let me know.

What Do You Want To Know?

These tips are designed to help us all better understand the requirements of our Web Accessibility Policy and to offer some shortcuts and hints that will help you as you create and update your Web sites.

In this case, the relevant portions of the Web Policy can be found in Appendix A:

  • G. Row and column headers shall be identified for data tables.
  • H. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Questions and suggestions for future hints are welcome! Just send an email or fill out our online form.