Getting tables used for Page Layout right -Details

[Why ]

[How ]

[Columns laid out with a table]

[The columns as a screen reader might read them]

[Columns laid out with CSS ]

Tables allow you to control page layout (i.e. the position of text and graphics on a web page). People who use screen readers must listen to each cell and row in a table in order from left to right. They cannot view the whole page the way sighted people do. This can pose problems if layout tables are not designed with accessibility in mind. Proper formatting is essential to ensure that students using Braille terminals, screen readers, screen enlargers, or non-standard monitor sizes can access your content.

Why?

Screen readers and Braille terminals interpret your page as a jumbled mess of content in illogical or confusing order.
Students who use screen enlargers or non-standard monitor sizes must continually scroll sideways to read the contents of your page.

[return to index]

How?

There are a variety of strategies that can be employed to overcome this problem.

Ensure your page is logical and understandable when the content is linearised (i.e. when tables are removed).
Extra columns and rows, merged cells, and nested tables ( tables within a table ) are more difficult for screen readers to interpret accurately.
Use the width attribute to set table and cell width to a percentage, rather than absolute sizes (pixels). Percentage table widths adjust to fit the available screen space, so people with different screen sizes and screen enlargers can see your whole page at a glance

The example below demonstrates what a screen reader might read if text is laid out in columns :

[return to index]

Columns laid out with a table

The issue of accessible

Web design for people

with disabilities and other special needs has recently become a topic of great concern.

Making the Web more

accessible is largely

dependent upon using

HTML the way it was

intended: to encode

meaning and structure,

rather than control layout

and visual formatting.

[return to index]

The columns below as a screen reader might read them

The issue of accessible Making the Web more

Web design for people accessible is largely

with disabilities and other dependent upon using special needs has recently HTML the way it was become a topic of great intended: to encode concern. meaning and structure, rather than control layout and visual formatting.

The first strategy deals with text navigation links often found down the left side of a page that has been laid out with a table. When a screen reader or text reader encounters these text links, they are read intermittently with the text content that appears to the right, much like the example shown above. To overcome this problem the text links that appear to the left should be laid out across the top of the page, or replaced with images of those links.
A second strategy deals with tables used to layout columnar text. While not inherently inaccessible, content can be made inaccessible if tables are used incorrectly. Where tables are used to create columns, text can be placed in the left cell and an image placed in the right, or visa versa. Similarly, wrapping text can be placed in the right cell, and non-wrapping text placed in the left and vertically aligned to the top of the cell as follows

Accessible Design Strategies

The text to the left appears on a single line. If that text is aligned to the top of the left table cell, the content of the cell will be read before the content of the right table cell

Accessible Design Strategies

In this example the text in the left cell is read after the second line of this cell. The resulting audio output will be confusing

The preferred method for dealing with columnar text layout is to use Cascading Style Sheets (CSS). This allows a user to disabled CSS, in which case the columnar layout reverts to a linear layout. Users may also choose to use their own style sheet. Though CSS layout is the preferred method, it may not always be practical, since support for various CSS layout elements differ among Web browsers, and it differs to the point where web developers become frustrated when trying to produce CSS laid out content that appears identical across web browsers. In future versions of Web browsers this will be less an issue. Below is the HTML of a sample page laid out in columns using CSS and the DIV element. Cut and paste the HTML in the example below into a new HTML document, then view the page in a CSS enabled browser (e.g. Netscape 4.*) with CSS enabled, then disable CSS and reload the page.

In Netscape CSS can be disabled through Edit>>Preferences>>Advanced>> then uncheck Enable Style Sheets .

There is currently no easy way to disable CSS in Internet Explorer . However, it is possible to create a style sheet then implement it through Tools>>Internet Options>> General>> Accessibility>> then check Format document using my style sheet .

Other strategies are possible. The intent of any strategy used to format columns, should be to provide viewers with a way to linearise the text of those columns. The W3C has created Tablin, a filter program developed by the WAI Evaluation & Repair (ER) group that can linearise HTML tables and render them accordingly to preferences set by a screen reader user. It is available in different forms at: [http://www.w3.org/WAI/Resources/Tablin/ ]

[return to index]

Columns laid out with CSS

<HTML>

.center {position: absolute; top: 120px; left: 150px; width: 240px; height: 100px; padding:10px;}

.right {position: absolute; top: 120px; left: 400px; width: 240px; height: 100px; padding:10px;}

.bottom {position: absolute; top: 320px; left: 250px; width: 600px; height: 100px;}

</STYLE>

<BODY>

<P>

<STRONG> Creating CSS Columns </STRONG>

<BR>

This is some text that would appear in the left column. When CSS is disabled this text would spread across the page and appear before the text that appears to the right when CSS is enabled.

</P>

</DIV>

<P>

<BR>

This is some text that would appear in the right column. When CSS is disabled this text would spread across the page and appear after the text that appears to the left when CSS is enabled

<BR>

</P>

</DIV>

<P>

<A HREF="home.html">Home</A> |

<A HREF="contact.html">Contact</A> |

<A HREF="news.html">News</A> |

<A HREF="resources.html">Resources</A>

</P>

</DIV>

</BODY>

</HTML>

[return to index]