"Table Trick" for Page Layout

This comes from Dive Into Accessibility and is an easy way that some of us can fix our tables in our Web pages, to make the content more accessible to users of text browsers (such as Lynx) or screen readers, like JAWS. Here are two tables. The first is built in the "regular" way, and the second adds a very small cell on top of the Navigation Menu, to change the way the table is "read" by programs.

table trick 1table trick 2
The images above show the order in which a Web browser will view cells in a table. In the left example, a visually-impaired visitor is forced to listen to the entire navigation menu before reaching the content of the page, while the example to the right uses a cell with an "invisible" (actually transparent) GIF image to change the order in which the information is handled. The visitor to the right page hears the content of the page, and then the navigation menu.

To create a page with the "table trick"

  1. In the empty page, create a table with three rows and two columns.
  2. Combine the two cells in the first row. Place the banner in the cell after merging.
  3. Combine the two bottom cells in the right column to create the Main Content area. Insert the page content in this cell.
  4. Place a transparent GIF image in the left-column cell that is just below the banner cell. Make sure the image is only one pixel in height.
  5. Insert the navigation links in the bottom cell of the left column.

Hint:
Use "empty" Alt messages with invisible images. If you type anything in the Alt box in Dreamweaver -- even a space -- browsers like JAWS will try to "read" the Alt message to the visually-impaired visitor. Empty Alt messages mean that the "invisible" image is also "invisible" to JAWS.