Penn State Homepage

Teaching and Learning with Technology

Creating Accessible Web Sites

Tables for Formatting

Older screen readers had trouble reading tables, but this is not a problem for newer screen readers. See the tips section for information on how to make formatting tables more accessible

This Page

  1. Older Screen Readers and Multi-Column Formats
  2. Is CSS better than TABLE?
  3. Tips for Implementing Formatting Tables
  4. Reading Order Issues (Linearization)

Older Screen Readers and Multi-Column Formats

Some older screen readers disregard table cell borders and read the text on the page left to right as if it were linear. This can cause cells with multiple lines to be broken up in a confusing manner when read aloud. See example scripts below.

Two Column Table

Fake Navigation/Content Table

Celtling Listserv Contents

Celtling Listserv Homepage

WELCOME to the home page of the Celtling Listserv, the listserv dedicated to the syntax, phonology and morphology of the Celtic languages. For more information about the purpose of this Listserv, please read the Celtling Mission Statement. The Celtling Archives are also open to the public for review.

 

Table as read by newer screen readers - OK

Celtling Listserv Contents Listserv Policy Recommended Dictionaries Recommended Grammars

Celtling Listserv Homepage

WELCOME to the home page of the Celtling Listserv, the listserv dedicated to the syntax, phonology and morphology of the Celtic languages. For more information about the purpose of this Listserv, please read the Celtling Mission Statement. The Celtling Archives are also open to the public for review.

Note: This reading order is called linearized reading order.

 

As read by older screen readers - Inaccessible

Celtling Listserv Contents Celtling Listserv Homepage

Listserv Policy WELCOME to the home page of the Celtling Listserv, the listserv dedicated to

Recommended the syntax, phonology and morphology of the Celtic languages. For more

Dictionaries information about the purpose of this Listserv, please read the Celtling Mission

Recommended Statement. The Celtling Archives are also open to the public for review.

Grammars

For this reason, some accessibility experts in the past strongly discouraged the use of formatting tables. Although newer screen readers are better able to processHTML tables, you may find that some users have not upgraded their software (and may not be able to.)

NOTE: Some screen reader software packages, such as JAWS, allows users to enter tables reading mode, but some users may not be aware that this feature exists.

Top of Page

Is CSS better than TABLE?

Some experts recommend using CSS styled DIV to set up layouts, but there are a number of serious pitfalls to be wary of. If in doubt, a layout table may be a better solution in the short term. It is not currently a part of Section 508 policy that all formatting tables be eliminated, just that they be accessible.

Benefits

  1. Screen readers do not announce the number of cells for DIVs.
  2. There are more formatting options available.
  3. Code is less bloated.

Pitfalls

  1. Floating DIVS may place content out of order for screen readers.
  2. It will probably not resolve the issue of multiple column layouts for older screen readers.
  3. May not be correctly rendered in older browsers causing the site to be illegible.
  4. Implementation of CSS varies widely between browsers, so any desigm must be tested on multple browsers.
  5. Section 508 requires that content be readable with stylesheets disabled.

    Section 508 - Documents shall be organized so they are readable without requiring an associated style sheet.

Top of Page

Tips for Implementing Formatting Tables

  1. Make sure your text makes sense when read cell-by-cell, row-by-row, starting from the upper left and ending in the lower right. This is the default reading order of table cells for screen readers.

  2. Implement a Skip Navigation strategy so that users can navigate into content and skip repeating a set of site navigational links.

    SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links.

  3. When using a table for formatting, you do not need to use the TH, CAPTION or SUMMARY tags. These are only used for data tables.

  4. Avoid nesting tables for visual effect. Screen readers read out the number of rows and cells for each table, so the fewer tables, the better.

  5. Whenever possible, set column and table widths to relative sizes (e.g. width="25%") rather than absolute sizes (e.g. width="200"). This way, tables can be adjusted to fit the screen more appropriately depending on monitor resolution or zoomed text.
    NOTE: Some users deliberately set their monitors to a lower resolution (e.g. 800 x 1200 or 640 x 400) as a way to increase text size in general.

  6. Some formatting tables can be avoided by using cascading style sheets to specify background colors and borders for elements such as an H1 tag or a DIV class.

Top of Page

Reading Order Issues

As mentioned above, the default reading order of table cells is left to right, top to bottom as shown in the example table below.

Example Table

Table Showing Screen Reader Order
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

It's important that, when using tables for formatting, the text be coherent when read in cell table order. See the following example for details.

Inaccessible Table Reading Order

Here's a table with "3 2 1 Ignition" going from the lower left to the upper right.

      Ignition!
    1  
  2    
3      

Users of visual browsers would process the text as "3 2 1 Ignition", but because of how the table is laid out, a screen reader would say "Ignition 1 2 3."

 

Top of Page

Site Menu: Home Page/Main Menu | Section 508 Guidelines | Quick Checklist | Details by Tag
| Links | I.T.S. Seminar Page | Sitemap


©1999-2006 Pennsylvania State University.

This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.

Last Update: Monday, 29-Aug-2005 17:03:37 EDT