Web pages Images Conferencing Chat Audio/Video PowerPoint PDF Advanced Multimedia

Students Affected:

Principles: Follow Web Standards, Degrade Gracefully

What It Means

Tables allow you to control page layout—that is, 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.

If You Do It Wrong: 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.

If You Do It Right: Screen readers interpret the content in an order that makes sense. The table width adjusts to fit the screen so students using screen enlargers can read from left to right without scrolling.

How it Works

1. Make sure your page is logical and understandable when the content is "linearized"—that is, when tables are removed.
   
   

   Linearizing table content allows you "see" the page the way a person using a screen reader might "hear" it. This often exposes problems with reading order that would otherwise not be visible.

   
   
2. Extra rows and columns, merged cells, and nested tables ("tables-within-a-table") are more difficult for screen readers to interpret accurately.
   
   
3. 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.
   
   

   Example

   The table below is 80% of the screen width. It has two columns of equal (50%) width.

   
   

   table cell	table cell
   table cell	table cell

   
   

   The HTML code for the table looks like this:

   <table width="80%" border="1"> <tr> <td width="50%">table cell</td> <td width="50%">table cell</td> </tr> <tr> <td width="50%">table cell</td> <td width="50%">table cell</td> </tr> </table>

   
   
   

   Web Page Editor Instructions Microsoft FrontPage Netscape Composer Dreamweaver MX

   
   
   

Visit these Web sites for more information about accessible layout tables: WebAIM Layout Table Tutorial W3C Table Checklist

Testing Tips

• Preview your Web page without tables to see if the content still makes sense. You can do this quickly and easily in the free Opera Web browser.
  
  

  To preview your page without tables in the Opera Web browser: Open your Web page in the Opera browser. Click the File pull-down menu, then select Preferences. Click Page Style. Under Author Mode, deselect the Tables checkbox.

  
  
• Use an accessibility evaluator to ensure you've formatted your tables correctly.
  
  

  The Wave is a free online evaluator that displays the order in which a screen reader reads table cells.

© 1996-2005 University of Maryland University College • 3501 University Blvd. East, Adelphi, MD 20783 • USA
Phone: 800-888-UMUC (800-888-8682)