Creating Accessible Tables
Layout Tables

Introduction

If you're not a screen reader user, let's pretend that you are for just a moment. You're going to a web site to find out where the biology 205 class is going to be held. You go to a web page that has this information, and this is what you hear:

Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

After listening to this information, do you have any idea where biology 205 is supposed to be held? Probably not. When you listen to tables straight through, without going into table reading mode in a screen reader, this type of information can be quite confusing. Even when you do go into table reading mode, it can still be confusing if the table is not marked up properly.

The Uses of Tables

There are two basic uses for tables on the web: as data tables, and as layout tables. The original intended use of HTML tables was for data. A table is a data table when row headers, column headers, or both are present. For example, here is a simple data table:

In practice, tables are perhaps most commonly used for page layout. Layout tables do not have logical headers that can be mapped to information within the table cells. Here is a simple layout table:

		Thoughts by Benjamin Franklin	Read this second: "Blessed is he who expects nothing, for he shall never be disappointed." "When you're finished changing, you're finished."
		Read these first: "Those who love deeply never grow old; they may die of old age, but they die young." "Hide not your talents. They for use were made. What's a sundial in the shade."

You will probably hear some accessibility advocates say that layout tables are a bad idea, and that CSS layout techniques ought to be used instead. There is truth in what they say, but, to be honest, using tables for layout is not the worst thing that you could do in terms of accessibility. People with all kinds of disabilities can easily access tables, as long as the tables are designed with accessibility in mind.

Content Linearization

Content linearization refers to the order of the content when all formatting is removed. If we remove the table from the Benjamin Franklin quotes, this is the linearized reading order that we get:

You may not have noticed this, but the quotes on the right hand side were read before the quotes on the left hand side. In the linearized reading order of this particular table, we ended up reading the items in the wrong order. This result is probably contrary to the order you thought the content would be read in. When you look at the table, you visually scan from left to right. In this case, though, the right side is read before the left side. This is due to the spanned rows and columns that comprise this table. The table is not so straightforward when you look at the code.

Most sites on the Internet use tables for layout, and most of them use spanned rows and columns to achieve formatting effects. The end result is that the linearized reading order may not be the same as the visual reading order. This can lead to confusion on the part of people who access the linearized reading order, such as individuals who use screen readers.

Screen readers essentially ignore the fact that the content is inside of a table. The screen reader just reads the content in the literal order that it appears in the code. If the literal order of the content in the code is logical, then your linearized reading order is logical.

This is an important concept. Let's take a look at another circumstance in which this becomes an issue. Here is a table which was created for visual effect:

Basement			UP!
Toilets		Flush
	Must

The visual user will read: "Basement Toilets Must Flush UP!"

The screen reader will hear (or feel via Braille): "Basement UP! Toilets Flush Must"

Why does this difference exist between the visual order and the screen reader order? To answer this question, we have to look at the table structure. Here is the same table with the border added back in. Numbers have also been added to each cell to indicate the order in which the screen reader will read them:

1 - Basement	2	3	4 - UP!
5 - Toilets	6	7 - Flush	8
9	10 - Must	11	12

Here is the markup code for the original table. Notice the order of the text:

Checking for good table linearization

There are a couple of good ways to check to see if your tables linearize well. The first one is to use the online accessibility validator, WAVE - external link.

Here is the same table, as seen through WAVE:

The red, yellow, and blue icon at the top indicates that the WAVE has detected that this table is being used as a layout table, since there is no additional markup as would be required for data tables. Notice that the WAVE has added little blue arrows to show the reading order of the table cells in this table. The WAVE has also added an icon to show us the alt text for the image of the toilet. By paying close attention to the numbers in the table, you can check to make sure that the reading order is logical.

You can also turn off the tables entirely when using the WAVE by setting your preferences to exclude tables.

Another way to check the reading order of table cells is to use the Opera browser (www.opera.com - external link).Opera allows the user to turn off tables completely.

In Opera 7, select User Mode > Disable tables.

In Opera 6.0, go to File > Preferences > Page Style > User Mode then de-select the Tables option.

Once you have done this, you can toggle the User Mode on and off with one click of the mouse. The User Mode icon is found in the upper left area of the browser window, right next to the address bar. It looks like a sheet of paper.

You'll also notice that the user mode turns off colors and styles. That's because it's using your style sheet, which, if you haven't specified one, is no style sheet at all. When you strip the page of tables and styles, you have a pretty good idea of what a page is like for users of screen readers.

Header Tags

When you use the table header (<th>) tag, most browsers cause the text to become bold and centered, which can be a nice visual effect, but the <th> tag should only be used in data tables. Don't use it in layout tables because you may confuse screen reader users, making them think they're inside a data table when they are not.

Use Proportional Sizing, Rather than Absolute Sizing

Internet documents and web pages are different than their ink-on-paper counterparts. Printed pages have an absolute, unchangeable size. Web pages do not. We can stretch our browser window up, down, right, left and achieve just about any size. Web layout should be fluid to fit the fluid nature of the web browser.

A layout table with a fixed width does not change its size to match the viewing area of the browser window. If the viewing area is very small, users will be required to scroll back and forth too much. This can be quite a nuisance for people with low vision who must use special software to enlarge the viewing area. This software, often called screen enlarger software, can enlarge the contents of the screen much more than the operating system can. Some people have the magnification so high that only a word or two can be seen at a time. More commonly, users will set the magnification between 200% and 500%.

Developers can use the Opera browser to simulate the effect of using a screen magnifier. Opera can enlarge web pages up to 1000%. The magnification option is found in the upper right of the document window. When you enlarge pages, you will notice that the amount of horizontal scrolling increases significantly. You can't avoid this, but you can reduce its impact by specifying relative table layout units, such as percentages, rather than fixed units, such as pixels.

Use the Simplest Table Configuration Possible

Some designers go crazy with layout tables. They create all kinds of unnecessary rows and columns, using spanned rows and columns in every which way, until the table hardly looks like a table at all anymore. All of this may be invisible to sighted users if the table border is set to zero, but blind users will "see" it all. Their screen readers will inform them of the number of rows and columns in the table. When they try to navigate from one area to the other within the table, they may become disoriented. The rule of thumb here is, the simpler the better.