Designing Accessible Web Pages

Tables

Many use tables to display data (a data table) and to set up or organize a page (a layout table).

Since HTML does not allow for creating columns, designers use tables (without borders) to format text into columns and rows.

Using tables to outline text and graphics instead of data may create problems for screen readers. Do not use tables for layout unless the table makes sense when linearized. Screen readers read tables first row, cell by cell, left to right, then the second row, cell by cell... If the table does not make sense when read this way, provide an alternative equivalent (which may be a linearized version).

The data table below is 3 columns and 2 rows, with the borders displayed. The top row is composed of "header cells", cells that the browsers see as the header for the row. This table shows the relationship of mixing colors, and could easily be explained through an accompanying paragraph.

The layout table below, is using cell spacing exclusively for formatting text for visual presentation. This is lost on users with print impairments (blind, dyslexic) who are using adaptive software, and to whom the formatting could not easily be explained.

The above table is 7 columns and 3 rows. The text is in C1R1, C2R2, C3R3, C5R1, C6R2, and C7R3. The rest of the cells are blank and the border is not displayed making it look like the text is floating.

Here is the table with the cells shown:

The first row of this table might be read by a screen reader as "Hi there how," then "My name is are," then "Joe you." In this example, colors are used to guide the reader with vision, but they are obviously useless to persons who are blind.

Also the empty cells may be read by some screen reader as "cell" "cell" "cell", etc, further confusing the reader.

Click here for Table Guidelines at WAI, then follow the links to Checkpoints for Guideline 5 ( use your browser's Back key to return to this page).

Next