Finding your way:

Accessible Web Page Design:

Making Tables Accessible.

HTML TABLEs can be used in many ways: some are access-neutral (i.e. they present no major barrier to understanding the information when being read with a screen-reader) while others can lead to a highly inaccessible page. In general, the simpler the usage, the more accessible the outcome.

There are really two concerns:

1. how do TABLES decompose when viewed in browsers that don't support them (and how do screen readers read them) - see example 1, and
2. how are TABLES read by screen readers in browsers that do display them - see examples 2 to 10.

Example 1: A TABLE trick for browsers that don't recognize TABLES.

There is one thing you can do that can make tables very much more accessible to people who may still be using browsers that do not support tables:: that is to include a <BR> tag at the end of each cell in your table.

If your browser is "TABLE-aware" both of the following tables will look identical:

Example 1a

row 1 column 1	row 1 column 2	row 1 column 3
row 2 column 1	row 2 column 2	row 2 column 3

Example 1b

row 1 column 1	row 1 column 2	row 1 column 3
row 2 column 1	row 2 column 2	row 2 column 3

But, if your browser does not support TABLEs, the first example will look like this:

row 1 column 1
row 1 column 2
row 1 column 3

row 2 column 1
row 2 column 2
row 2 column 3

While the second table would look like this:

row 1 column 1 row 1 column 2 row 1 column 3 row 2 column 1 row 2 column 2 row 2 column 3

The difference is the inclusion of the <BR> at the end of each data cell in the first table.

<TR>
<TD>row 1 column 1 <BR></TD>
<TD>row 1 column 2 <BR></TD>
<TD>row 1 column 3 <BR></TD>
<BR></TR>
<TR>
<TD>row 2 column 1 <BR></TD>
<TD>row 2 column 2 <BR></TD>
<TD>row 2 column 3 <BR></TD>
<BR></TR>

While the code for the second table omits the <BR> tags:

<TR>
<TD>row 1 column 1 </TD>
<TD>row 1 column 2 </TD>
<TD>row 1 column 3 </TD>
</TR>
<TR>
<TD>row 2 column 1 </TD>
<TD>row 2 column 2 </TD>
<TD>row 2 column 3 </TD>
</TR>

In most cases, a person using a screen reader would have less trouble interpreting the first example.

Accessibilty of various TABLE usages
(in browsers that support tables)

Example 2: A simple table used to put borders around single lines of text or text-links.

This example would be access-neutral.

Example 3: Similar to Example 1, but two columns.

This example would be access-neutral.

Example 4: In this example, the first column might contain link-text while the second column contains a description of the link-page.

Accessibility begins to degrade when text wraps within TABLE CELLS. Today's crop of screen readers will not read the complete text in a cell: instead they will read straight across all columns of the table. In this case the user would hear:

You can see that this could get confusing depending on where and how sentences wrap.

An alternative: use Definition or List elements to format the text:

First quarter earnings:

In the first quarter, we did really good business and exceeded our targets by a wide margin.

Second quarter earnings:

In the second quarter, we met our target and identified areas for improvement.

Example 5: TABLE used to layout graphics and text or to position text in specific areas of the display.

The IHAC Adaptive Technology Award honours achievements in technical design that facilitate access to the Information Highway by people with disabilities. Newbridge Networks Corporation is sponsoring the award.

This is a common use of the HTML TABLE element. It can range from access-neutral to being quite inaccessible. If the author uses alt-text behind the graphic image, its reading and wrapping can cause the same problems for a screen-reader as described in Example 4. In browsers that support text wrapping around graphics, this simple example can be duplicated without using a TABLE. In this case, I believe using a TABLE would have the slight edge in accessibility because the <BR> tag in the first cell would decompose better in a non-table browser.

Example 6: A simple spread-sheet.

Simple spreadsheets, with few rows and columns may not be too confusing when read by a screen-reader. But, as spreadsheets grow in either or both dimensions, it gets harder and harder to remember column and row titles and to be able to associate a particular data value with a particular row/column pair. While many screen-readers can be programmed to read spreadsheets horizontally or vertically, that is only true in the actual spreadsheet application (like Lotus or Excel). It is not the case in HTML.

Alternatives:

• evaluate the need to display a large spreadsheet in a Web-page;

• try and describe the important information (i.e. the highlights or conclusions to be inferred from the data) of the spreadsheet in words;

• describe the structure of the spreadsheet (number or rows and columns)

Example 7: Two newspaper-style columns.

Read straight across the screen, ignoring the columns: if what you read makes perfect sense then it is only by sheer cooincidence (and not what the author would have intended). See the explanation under Example 4.

Alternative: no alternative. Don't format text in this fashion.

Example 8: Three newspaper-style columns

Explanation as for Example 4, but even more confusing when read straight across:

"There is no such much ensure that you make your site as thing as a perfectly will never be able to accessible"

Note: the way the text appears in these columns will also vary depending on what screen-resolution you are using, or depending on how large you have made your browser window.

Alternative: no alternative. Don't format text in this fashion.

Example 9: Blilingual text - parallel columns.

Take the general problem as described in Examples 4, 7 and 8 and add the fact that screen-readers can decode and speak only one language at a time. While bilingual (and multi-lingual) screen-readers exist, that only means that you can switch from one language system to the other, not that one setup will read both languages at the same time. In this example, an English screen-reader would read the first line of the both columns, trying to pronounce the French text as if it were English. This would meaningless to a unilingual person, and extremely confusing to a bilingual person.

Alternative: no alternative. Don't format pages in this fashion.

Example 10:Graphics (or graphic links) formatted in a table

This is a common use of the HTML TABLE element, and depending on the amount of alt-text behind the images, it can range from access-neutral through quite inaccessible. Look at your page with graphics disabled to determine if the layout will be inaccessible.

Alternative: in some cases it may be more accessible to make an imagemap and provide an alternative text-menu than to use alt-text behind each of the linked images in a TABLE.

Finding your way.

Making Bullets and Numbered Lists Accessible.
How long should one page be?