Multiple Column Layout
ISSUE:
when tables are coded inaccurately or table codes are used for non-tabular material, the information may be difficult to access for users of screen-reader and screen-magnification applications, users with cognitive and/or visual tracking impairments, and users of some hand-held devices. Some screen-readers and users with information tracking impairments will attempt to read multi-column materials in a linear fashion — one line at a time from the left-hand side of the screen to the right-hand side. Avoiding the use of a multi-column layout for non-tabular information — unless there is a compelling reason to do so — will ensure access for a greater number of users.
Use of the <PRE> tag (preformatted text) or style sheets will make identification and interpretation of tabular data more difficult for users of adaptive technology. Whether a table and/or the information it contains is static (pre-determined by the page author) or dynamic (generated based on user input), the table should be coded appropriately and a de-columnized version or other means of acquiring the information provided. Where it is not reasonable to accommodate a de-columnized version, one or more of the following alternatives for acquiring the information should be made available and noted on the page:
- Telephone
- Fax
- E-mail
- Postal mail
- In-person
STANDARD:
- Avoid the use of multiple-column layouts for non-tabular information.
- Do not use the <PRE> tag (preformatted) to layout tabular information.
- Include Row and column headers for data tables.
- Ensure that information in a multi-column format, whether static or dynamically generated, is accessible or provide an alternative means of acquiring the information.
Example:
Some screen-readers read one line at a
time from the left side of the screen
to the right side. They only read
information that is currently visible
on the screen. What does this mean
for the screen reader user who is
attempting to read information in a
multiple-column format? |
The screen-reader will read the first
line of the first column, the first
line of the second column... the
second line of the first column, the
second line of the second column and so
on. The information will not make
sense when presented in a multiple-
column format. |
The Internet can be a tremendous aid
in accessing information. However,
the form and format of information on
a web site can either help or hinder
access for people with disabilities.
Avoid the use of multiple-column
layouts for non-tabular information! |
| Listen to the Example |
• When appropriate, use the "summary" attribute to provide a summary of the information in a table — this may be especially helpful to users with visual impairments, learning disabilities and cognitive impairments.
• When appropriate, the <CAPTION> element should be used to provide a descriptive caption for a table.
• The <TH> (table header) element should be used to identify row and column headers, rather than the <TD> (table cell) element.
• Preference should be given to specifying table and cell widths as percentages, rather than pixals. This allows table and cell widths to adjust relative to the user's screen resolution.
| CORRECT | INCORRECT |
| width="100%" | width="539" |
US States: Abbreviation and Capital
| State |
Abbreviation |
Capital |
| Alabama |
AL |
Montgomery |
| Alaska |
AK |
Juneau |
| Arizona |
AZ |
Phoenix |
| Arkansas |
AR |
Little Rock |
| California |
CA |
Sacramento |
| Colorado |
CO |
Denver |
| Connecticut |
CT |
Hartford |
| Delaware |
DE |
Dover |
| Florida |
FL |
Tallahassee |
| Georgia |
GA |
Atlanta |
| Hawaii |
HI |
Honolulu |
| Idaho |
ID |
Boise |
| Illinois |
IL |
Springfield |
| Indiana |
IN |
Indianapolis |
| Iowa |
IA |
Des Moines |
| Kansas |
KS |
Topeka |
| Kentucky |
KY |
Frankfort |
| Louisiana |
LA |
Baton Rouge |
| Maine |
ME |
Augusta |
| Maryland |
MD |
Annapolis |
| Massachusetts |
MA |
Boston |
| Michigan |
MI |
Lansing |
| Minnesota |
MN |
St. Paul |
| Mississippi |
MS |
Jackson |
| Missouri |
MO |
Jefferson City |
| Montana |
MT |
Helena |
| Nebraska |
NE |
Lincoln |
| Nevada |
NV |
Carson City |
| New Hampshire |
NH |
Concord |
| New Jersey |
NJ |
Trenton |
| New Mexico |
NM |
Santa Fe |
| New York |
NY |
Albany |
| North Carolina |
NC |
Raleigh |
| North Dakota |
ND |
Bismarck |
| Ohio |
OH |
Columbus |
| Oklahoma |
OK |
Oklahoma City |
| Oregon |
OR |
Salem |
| Pennsylvania |
PA |
Harrisburg |
| Rhode Island |
RI |
Providence |
| South Carolina |
SC |
Columbia |
| South Dakota |
SD |
Pierre |
| Tennessee |
TN |
Nashville |
| Texas |
TX |
Austin |
| Utah |
UT |
Salt Lake City |
| Vermont |
VT |
Montpelier |
| Virginia |
VA |
Richmond |
| Washington |
WA |
Olympia |
| West Virginia |
WV |
Charleston |
| Wisconsin |
WI |
Madison |
| Wyoming |
WY |
Cheyenne |
<div align="left">
<TABLE width="50%" cellspacing="1" cellPadding="7" border="10" rules="cols" frame="box" summary="The following table lists the 50 US states, their two letter standard abbreviation and capital city">
<caption>US States: Abbreviation and Capital</caption>
<TR>
<TH width="40%">State</TH>
<TH width="20%">Abbreviation</TH>
<TH width="40%">Capital</TH>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Alabama</TD>
<TD align="CENTER" valign="top" width="20%">AL</TD>
<TD align="left" valign="top" width="40%">Montgomery</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Alaska</TD>
<TD align="CENTER" valign="top" width="20%">AK</TD>
<TD align="left" valign="top" width="40%">Juneau</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Arizona</TD>
<TD align="CENTER" valign="top" width="20%">AZ</TD>
<TD align="left" valign="top" width="40%">Phoenix</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Arkansas</TD>
<TD align="CENTER" valign="top" width="20%">AR</TD>
<TD align="left" valign="top" width="40%">Little Rock</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">California</TD>
<TD align="CENTER" valign="top" width="20%">CA</TD>
<TD align="left" valign="top" width="40%">Sacramento</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Colorado</TD>
<TD align="CENTER" valign="top" width="20%">CO</TD>
<TD align="left" valign="top" width="40%">Denver</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Connecticut</TD>
<TD align="CENTER" valign="top" width="20%">CT</TD>
<TD align="left" valign="top" width="40%">Hartford</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Delaware</TD>
<TD align="CENTER" valign="top" width="20%">DE</TD>
<TD align="left" valign="top" width="40%">Dover</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Florida</TD>
<TD align="CENTER" valign="top" width="20%">FL</TD>
<TD align="left" valign="top" width="40%">Tallahassee</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Georgia</TD>
<TD align="CENTER" valign="top" width="20%">GA</TD>
<TD align="left" valign="top" width="40%">Atlanta</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Hawaii</TD>
<TD align="CENTER" valign="top" width="20%">HI</TD>
<TD align="left" valign="top" width="40%">Honolulu</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Idaho</TD>
<TD align="CENTER" valign="top" width="20%">ID</TD>
<TD align="left" valign="top" width="40%">Boise</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Illinois</TD>
<TD align="CENTER" valign="top" width="20%">IL</TD>
<TD align="left" valign="top" width="40%">Springfield</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Indiana</TD>
<TD align="CENTER" valign="top" width="20%">IN</TD>
<TD align="left" valign="top" width="40%">Indianapolis</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Iowa</TD>
<TD align="CENTER" valign="top" width="20%">IA</TD>
<TD align="left" valign="top" width="40%">Des Moines</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Kansas</TD>
<TD align="CENTER" valign="top" width="20%">KS</TD>
<TD align="left" valign="top" width="40%">Topeka</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Kentucky</TD>
<TD align="CENTER" valign="top" width="20%">KY</TD>
<TD align="left" valign="top" width="40%">Frankfort</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Louisiana</TD>
<TD align="CENTER" valign="top" width="20%">LA</TD>
<TD align="left" valign="top" width="40%">Baton Rouge</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Maine</TD>
<TD align="CENTER" valign="top" width="20%">ME</TD>
<TD align="left" valign="top" width="40%">Augusta</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Maryland</TD>
<TD align="CENTER" valign="top" width="20%">MD</TD>
<TD align="left" valign="top" width="40%">Annapolis</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Massachusetts</TD>
<TD align="CENTER" valign="top" width="20%">MA</TD>
<TD align="left" valign="top" width="40%">Boston</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Michigan</TD>
<TD align="CENTER" valign="top" width="20%">MI</TD>
<TD align="left" valign="top" width="40%">Lansing</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Minnesota</TD>
<TD align="CENTER" valign="top" width="20%">MN</TD>
<TD align="left" valign="top" width="40%">St. Paul</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Mississippi</TD>
<TD align="CENTER" valign="top" width="20%">MS</TD>
<TD align="left" valign="top" width="40%">Jackson</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Missouri</TD>
<TD align="CENTER" valign="top" width="20%">MO</TD>
<TD align="left" valign="top" width="40%">Jefferson City</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Montana</TD>
<TD align="CENTER" valign="top" width="20%">MT</TD>
<TD align="left" valign="top" width="40%">Helena</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Nebraska</TD>
<TD align="CENTER" valign="top" width="20%">NE</TD>
<TD align="left" valign="top" width="40%">Lincoln</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Nevada</TD>
<TD align="CENTER" valign="top" width="20%">NV</TD>
<TD align="left" valign="top" width="40%">Carson City</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">New Hampshire</TD>
<TD align="CENTER" valign="top" width="20%">NH</TD>
<TD align="left" valign="top" width="40%">Concord</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">New Jersey</TD>
<TD align="CENTER" valign="top" width="20%">NJ</TD>
<TD align="left" valign="top" width="40%">Trenton</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">New Mexico</TD>
<TD align="CENTER" valign="top" width="20%">NM</TD>
<TD align="left" valign="top" width="40%">Santa Fe</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">New York</TD>
<TD align="CENTER" valign="top" width="20%">NY</TD>
<TD align="left" valign="top" width="40%">Albany</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">North Carolina</TD>
<TD align="CENTER" valign="top" width="20%">NC</TD>
<TD align="left" valign="top" width="40%">Raleigh</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">North Dakota</TD>
<TD align="CENTER" valign="top" width="20%">ND</TD>
<TD align="left" valign="top" width="40%">Bismarck</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Ohio</TD>
<TD align="CENTER" valign="top" width="20%">OH</TD>
<TD align="left" valign="top" width="40%">Columbus</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Oklahoma</TD>
<TD align="CENTER" valign="top" width="20%">OK</TD>
<TD align="left" valign="top" width="40%">Oklahoma City</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Oregon</TD>
<TD align="CENTER" valign="top" width="20%">OR</TD>
<TD align="left" valign="top" width="40%">Salem</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Pennsylvania</TD>
<TD align="CENTER" valign="top" width="20%">PA</TD>
<TD align="left" valign="top" width="40%">Harrisburg</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Rhode Island</TD>
<TD align="CENTER" valign="top" width="20%">RI</TD>
<TD align="left" valign="top" width="40%">Providence</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">South Carolina</TD>
<TD align="CENTER" valign="top" width="20%">SC</TD>
<TD align="left" valign="top" width="40%">Columbia</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">South Dakota</TD>
<TD align="CENTER" valign="top" width="20%">SD</TD>
<TD align="left" valign="top" width="40%">Pierre</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Tennessee</TD>
<TD align="CENTER" valign="top" width="20%">TN</TD>
<TD align="left" valign="top" width="40%">Nashville</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Texas</TD>
<TD align="CENTER" valign="top" width="20%">TX</TD>
<TD align="left" valign="top" width="40%">Austin</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Utah</TD>
<TD align="CENTER" valign="top" width="20%">UT</TD>
<TD align="left" valign="top" width="40%">Salt Lake City</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Vermont</TD>
<TD align="CENTER" valign="top" width="20%">VT</TD>
<TD align="left" valign="top" width="40%">Montpelier</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Virginia</TD>
<TD align="CENTER" valign="top" width="20%">VA</TD>
<TD align="left" valign="top" width="40%">Richmond</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Washington</TD>
<TD align="CENTER" valign="top" width="20%">WA</TD>
<TD align="left" valign="top" width="40%">Olympia</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">West Virginia</TD>
<TD align="CENTER" valign="top" width="20%">WV</TD>
<TD align="left" valign="top" width="40%">Charleston</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Wisconsin</TD>
<TD align="CENTER" valign="top" width="20%">WI</TD>
<TD align="left" valign="top" width="40%">Madison</TD>
</TR>
<TR>
<TD align="left" valign="top" width="40%">Wyoming</TD>
<TD align="CENTER" valign="top" width="20%">WY</TD>
<TD align="left" valign="top" width="40%">Cheyenne</TD>
</TR>
</TABLE>
</DIV>
|
Return to:
