Finding your way:

Accessible Web Page Design:
Are Columns Accessible?

Unless carefully designed, the use of columns can create a page which is very inaccessible to both persons with visual impairments who use screen-reading technology, and to persons with browsers that do not support TABLES.

There are at least three ways to display textual (and now graphical) information in columnar form:

• Using preformatted text (<PRE> </PRE>) which is available in all versions of HTML and can be displayed with all types of browsers, and
• Using HTML 3.0 "tables" (<TABLE></TABLE>), which cannot be viewed by text-based browsers or by many older graphical browsers.
• "Frames" are the latest method of formatting a screen, but frames are not widely supported (yet). For the purposes of universal accessibility, use of FRAMES on a web-site falls under the injunction against using browser-specific constructs, and should be avoided. More details about using FRAMES, see Making FRAMES Accessible.

Only the first two methods of formatting columns are considered in this section.

Columns of text, whether done using the new features of HTML 3.0 or the "old-fashioned" way using PREFORMATTED text, can be quite inaccessible to persons using screen-reading systems. Three examples follow. Remember, what you see (or hear) will depend on what browser you have, and what method of screen access you are using. If you are developing a page for yourself or a client, I recommend you view your page with a number of different browsers to see what the result of your design choices are.

What should become clear is that no method exists to make information in columnar form accessible. If you are concerned about the accessibility of your page, you have little choice but to avoid the use of columns.

Unfortunately, I don't have any great suggestions for you on alternatives to using columns. My only tip is to try to use headings, paragraphs, lists and definition elements creatively to present your information in a more accessible manner. Perhaps "smart" browsers of the future, in conjunction with a more "format-aware" HTML document type definition (DTD) will be able to reorganize columnar text into its intended reading order.

We have begun to see beta-test versions of screen-reading software that appear to properly read text formatted in newspaper style columns created with HTML 3 tables. As more details become available, we will report them here.

Example: Text in parallel-style columns.

Using the HTML 3.0 TABLE construct, it is possible to create columns of text. In this 2-column example, each paragraph on the left corresponds to the paragraph on the right. (View the source code to see how this example is constructed)

How does your BROWSER display this example?

If you do not see two columns of text, then you are not using an HTML 3.0 compliant browser. The above example would look like this:

The Adaptive Computer Technology Centre. Open Monday through Friday, from 8:00 A.M. to 4:00 P.M. Adaptive computer technology enables computing access by compensating for visual, mobility, or sensory impairments. Adaptive computer technology includes such tools as screen-readers, voice recognition systems, screen-enlargement programs, braille displays and printers, environmental controls, and many other items. The ACT Centre provides services promoting the effective implementation of adaptive computer technology tools. Our services include job and technology needs assessments, product research and compatibility studies, product integration and technical support, end-user training, and management and staff awareness training.

If you are using a text-only browser like LYNX, or if you are using an HTML 2.0 compliant graphical browser, this page should be read as if it was one long paragraph of text, with the first paragraph of the first column followed by the first paragraph of the second column, and so on. In this particular example, that pretty much delivers the information in the order and manner that the designer was anticipating, even with the loss of the column display.

How does your SCREEN READER read the first example?

If you are using your screen-reader with an HTML 3.0 compliant browser, you may hear something like this, depending on how your browser is configured:

The Adaptive Computer Technology Centre. Open Monday through Friday, from 8:00 A.M. to 4:00 P.M.
Adaptive computer technology enables computing Adaptive computer technology includes such tools as
access by compensating for visual, mobility, or screen-readers, voice recognition systems, screen-enlargement

and so on, reading line-by-line, straight across the page. This is clearly unacceptable.

Example 2: Text in newspaper-style columns.

Using the HTML 3.0 TABLE construct, this example looks similar to the previous one, however, the formatting is done quite differently. In this 2-column example, each paragraph on the left corresponds to the paragraph on the right. (View the source code to see how this example is constructed)

How does your BROWSER display the second example?

If you do not see two columns of text, then you are not using an HTML 3.0 compliant browser. The above example would look like this:

The Adaptive Computer Technology Centre.
Adaptive computer technology enables computing access by compensating for visual, mobility, or sensory impairments.
The ACT Centre provides services promoting the effective implementation of adaptive computer technology tools.
Open Monday through Friday, from 8:00 A.M. to 4:00 P.M.
Adaptive computer technology includes such tools as screen-readers, voice recognition systems, screen-enlargement programs, braille displays and printers, environmental controls, and many other items.
Our services include job and technology needs assessments, product research and compatibility studies, product integration and technical support, end-user training, and management and staff awareness training.

If you are using a text-only browser like LYNX, or if you are using an HTML 2.0 compliant graphical browser, this page should be read as if it was one long paragraph of text, with the entire text of the first column followed by the text of the second column. Now, a paragraph from the first column no longer links to the corresponding paragraph in the second column.

How does your SCREEN READER read the second example?

If you are using your screen-reader with an HTML 3.0 compliant browser this example will be read exactly like the first, which, again, is clearly unacceptable.

Example 3: Text columns using PREFORMATTED text.

This final example uses the PREFORMATTED text tag that exists in all versions of HTML:

The Adaptive Computer Technology         Open Monday through Friday, 
Centre.                                  from 8:00 A.M. to 4:00 P.M.

Adaptive computer technology enables     Adaptive computer technology includes
computing access by compensating for     such tools as screen-readers, voice 
visual, mobility, or  sensory            recognition systems, screen-enlargement 
impairments.                             programs, braille displays and printers, 
                                         environmental controls, and many other 
                                         items.

The ACT Centre provides services         Our services include job and technology 
promoting the effective implementation   needs assessments, product research and 
 of adaptivecomputer technology tools.   compatibility studies, product integration
                                         and technical support, end-user training, 
                                         and management and staff awareness training.

This example has the single benefit of looking pretty much the same regardless of which browser you are using. Unfortunately, it has the same major flaw as both other examples: a screen reader will read straight across each line, and the user will have a very difficult time getting any useful information off the page.

Finding your way.

Making Audio Accessible.
Making Graphs and Charts Accessible.