Related items

Introduction to Web Accessibility

You are here: irt.org | Articles | Design | Introduction to Web Accessibility [ previous next ]

Published on: Friday 17th July 1998 By: Graeme Williams

Introduction
Structure
Navigation
Alternative Formats
Conclusions
Useful Resources

Introduction

So what's this web accessibility stuff all about? Well, all sorts of people use all sorts of technology to access information on the Internet. This means that web documents are interpreted in different ways, depending on the type of browser being used to access the information, and on which platform the browser is running. The variety of Internet use is vast:

People use home/office computers with the latest software;
People using the latest software, but with some features disabled;
People using older computers, or older software;
People using Internet capable mobile phones, such as the Nokia 9000, or related technologies;
Some people are hard of hearing, and cannot hear the soundtrack on video or audio information;
Some people have eyesight disabilities, and use style sheets to make text larger, or to use specific colors;
Some people are blind, or near blind and use speech browsers to interpret the information;
And some aren't people at all: there are automated spiders that search the Internet for information.

You can probably think of a dozen other examples.

I hope you can see that enabling your site with the flexibility to allow the people in the previous examples to access your site is an important issue. This is what accessibility is all about: it is a measure of how easy a site is to access, read, and understand. Existing sites need to be dehanced to enable them to be viewed by the widest range of technology, and new sites should take accessibility into account at the design stage to open it to as many people as possible. To guide you in making web sites more accessible there are three key areas that must be considered:

Structure

To aid non-visual users, documents should contain structural elements rather than presentation elements.

Navigation

You should enable keyboard-only navigation and design pages that promote easy orientation.

Alternative formats

You should always provide alternative ways to access information presented via images, sounds, applets, and scripts.

I'm going to expand on these three keys, to give you some simple guidelines on making sites more accessible.

Structure

You don't need telling that the structure of a web document is crucial in achieving the understanding of the reader, but 99% of web sites assume that the reader has good eyesight. Because of this web authors sometimes misuse the HTML text formatting elements:

They don't use incremental heading elements or they use FONT element to format the headings, or they use the heading elements to simply make a portion of the text larger. Their misuse can disorient users: use them incrementally for headings only, otherwise use style sheets.

Don't do this:

<H1>HTML Header Elements</H1>

<H3>Misuse</H3>

<H2><CENTER>Don't Do It</CENTER></H2>

Do this:

<H1>HTML Header Elements</H1>

<H2>Misuse</H2>

<P STYLE="font-size: 1.5em;  text-align: center; font-weight: bold;">
Don't Do It</P>

They mix or misuse the list structure and list items elements. The HTML list elements (DL, DT, DD, UL, OL, and LI) should only be used to create lists. They should not be used for presentation effects, such as indentation. To format text, you should use style sheets.

Don't do this:

<DD>Don't indent the first line of text like this</DD>

Do this:

<P STYLE="text-indent: 40">Indent the first line like this</P>

They use blinking or scrolling text. BLINK and MARQUEE are proprietary extensions to the HTML standards and so should be avoided. Another reason for not using them is that blinking or moving text is harder to read and can adversely affect people with cognitive disabilities (and is pretty annoying to those without.) To draw attention to areas of text you should use style sheets to modify the text, such as font, size, color, and background.

Style Sheets

It should have come to your attention that style sheets are very important for accessibility, but there is a down side: style sheets are a new addition to the web author's arsenal, and so older browsers do not support them, and there are some users who deactivate them. So, care must be taken to ensure that the web document is readable without the style sheet. Internet Explorer has supported style sheets since version 3, but Netscape Navigator didn't support them until version 4. You can find information on style sheets in the Cascading Style Sheet Articles.

Frames

Another problem is the use of frames: some browsers don't support them, some users turn them off, and browser implementations of frames can be dodgy at best. If you do use frames it is important that to include a NOFRAMES element at the end of each FRAMESET. It is also important that each frame has a title as frames add a high degree of complexity to a page, and titles help those using aural browsers to keep track of the number of frames on a page, and which is the current one.

<FRAMESET cols="20%,80%" title="Our product guide">

<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Products">

<NOFRAMES>
<A href="doc.html" title="library link">
Select to go to our Product Guide</A>
</NOFRAMES>

</FRAMESET>

Tables

Try not to use tables to assist in the layout of a web document. Unfortunately, aural browsers can read them incorrectly. Only use tables to present tabular information, and use the TH and TD elements to correctly label the table. As a minimum, you should also provide a description of the table in the "summary" attribute of the TABLE element. Several new features have been added for table creation in HTML 4.0 (including the "summary" attribute) to aid accessibility, which I will cover in another article.

<TABLE SUMMARY="This table details the week's daytime weather forecast">

<TR>
<TH>Day</TH>
<TH>Max Temperature</TH>
<TH>Wind</TH>
<TH>Description</TH>
</TR>

<TR>
<TD>Monday</TD><TD>20°C</TD><TD>Light SW</TD>
<TD>cloudy, brightening later.</TD></TR>
<TR><TD>Tuesday</TD><TD>18°C</TD><TD>Light SE</TD>
<TD>Light rain.</TD>
</TR>
...
</TABLE>

Navigation

To enable users to use the keyboard to move around and between documents HTML 4.0 introduces the "accesskey" attribute for LABEL, A, CAPTION, and LEGEND elements. This attribute enables you to associate a keyboard shortcut with the elements to enable people without a pointing device to activate them.

For example:

<A ACCESSKEY="C" HREF="copy.html">Copyright information</A>

To activate the link the reader presses the 'C' key.

Also, where a graphical navigation bar or Java applet is used to access the main areas of the site, or a link is displayed as an image, it is important that an alternative text version exists on the page.

Some sites use an image map to navigate around a site. For accessibility you must ensure that the map is navigable via the keyboard. The easiest way to satisfy this recommendation is to use a client-side image map since browsers that are not displaying graphics can use "alt" or "title" attribute values of AREA elements to present a list of links in place of the image map graphic. Keyboard navigation to areas within the image map is also possible since the browser knows the coordinates of the defined areas.

<IMG SRC="site.gif" ALT="Image map of our store" USEMAP="#map1">

<MAP NAME="map1">

<AREA SHAPE="RECT" COORDS="0,0,50,20"
HREF="prodlist.htm" ALT="Our product list"
ACCESSKEY="P">

<AREA SHAPE="RECT" COORDS="52,0,100, 20"
HREF="order.htm" ALT="Order form"
ACCESSKEY="O">

</MAP>

Alternative Formats

Images

Wherever possible you should provide alternate formats for information. All sites use images, and these are the simplest to accommodate by including an ALT description in the IMG and AREA elements:

<IMG src="small-logo.gif" alt="Home Page">

If the OBJECT element is used, a description can be placed in the body of the element:

<OBJECT data="small-logo.gif">Home Page</OBJECT>

The alternative text should explain the function of the graphic, rather than the appearance: if you were reading the page to someone over the telephone, how would you explain the image when you encountered it to make the page comprehensible to the listener.

In a similar vane the anchor element has a "title" attribute:

<A HREF="copy.htm" TITLE="Copyright Information">Copyright</A>

Further to this HTML 4.0 adds the "longdesc" attribute to the IMG element to enable the reader to link to another page that contains a description of the information presented in an image:

<IMG SRC="projcash.gif" ALT="Projected cash flow" LONGDESC="projcash.htm">

To provide compatibility with earlier versions of the HTML standard an alternative method should be employed (to achieve the best appearance for a site, alternative versions of some pages will almost certainly be required) such as:

<IMG SRC="projcash.gif" ALT="Projected cash flow" >
<A HREF="projcash.htm">D</A>

Audio and Video

Other ways that information is presented on web documents include audio and video. You should provide full audio and text transcripts that include the spoken dialogue as well as any significant sounds including on-screen and off-screen sound, music, laughter, applause, etc. These can be presented on the same page or accessed via links. It is possible to embed the transcripts within video documents to allow them to be presented. When this is done the transcripts are called "captions" and are used by people with both visual and hearing disabilities.

For video you should also provide a video description that provides narration of the key visual elements without interfering with the audio or dialogue of a movie. Key visual elements include actions, settings, body language, graphics, and displayed text. Primarily people who are blind follow the action and other non-auditory information in video material by video descriptions.

Scripts and Applets

And the final area I'm going to cover on alternate formats is the use of scripts and applets on web pages. Firstly, you should provide alternatives for each script and applet that conveys information. With the SCRIPT element using the NOSCRIPT element achieves this:

<SCRIPT TYPE="JavaScript">
...Script that shows an animated graphic of the 24-hour weather forecast
</SCRIPT>

<NOSCRIPT>
This is a text description for the weather over the next 24 hours...
</NOSCRIPT>

With applets you supply the information as the content of the APPLET or OBJECT elements:

<APPLET CODE="24hr.class" WIDTH="500" HEIGHT="500"
ALT="Java applet: 24hr weather forecast">

The weather for the next 24 hours will be...

</APPLET>

You must provide alternate mechanisms for a script or applet which performs an important function. For example, if you use an applet to gather information from the reader, you should, as an alternative, provide the option to use a user-input form and email the data.

Conclusions

Making your site accessible requires a lot of thought and effort, but has great rewards. I hope this article has shown that there are some simple things that everyone can do to make their sites more accessible:

Provide a clear consistent structure that is easily navigable;
Use style sheets to modify the appearance of text;
Make sure images and graphic links have alternate text associated with them;
Provide NOSCRIPT and NOFRAME elements.

Useful Resources

World Wide Web Consortium (The home of web standards)
W3C Web Access Initiative (The starting point for learning about WAI)
W3C HTML Validation Service (To validate web pages to various standards)
Bobby (Checks web pages for common accessibility problems)
Lynx (The text only www browser)

Flag as a symbol of language - stupidity or insult?

JavaScript Guidelines and Best Practice

Web Design Hints and Tips

Netscape and mozilla.org give birth to Gecko

Web Page Creation