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.
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.
|Indiana Disability Awareness Month was observed during March 2012. Participants were given T shirts|
|Full Time||Part Time|
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.
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.
Filed under Tip of the Week.