Accessibility and the Web | 2 | WebReference

Accessibility and the Web | 2

Accessibility and the Web

Making Your Web Site More Accessible

There are several things that can be done to make a Web site more accessible. Some are relatively simple; others require a little work.

The first thing you need to do is validate your site's HTML and CSS code. Both can be validated using the W3C's validators. For the HTML code, visit To check your CSS style sheet, go to: Both validators will check your file either online or on your local hard drive. A list of other validation sites is available on our Web site.

Once the HTML and CSS code is valid, you'll need to check to see if the page meets accessibility guidelines. A good site to use is Bobby, a service of Watchfire. Here you can check your page against both the Web Content Accessibility and the U.S. Section 508 guidelines.

Chances are that you've had some accessibility errors on the page. Common ones include failure to provide alternative text for images (alt="Lorem ipsum dolor"), failure to provide a summary for tables (summary="This table gives some statistics about fruit flies: average height and weight, and percentage with red eyes.">), and use of deprecated HTML code (basefont, center, font). Many of these are easy to fix by just using proper coding techniques. Additional help can be found on the "Evaluation, Repair, and Transformation Tools for Web Content Accessibility" page, furnished by the W3C.

Cascading Style Sheets

Using Cascading Style Sheets (CSS) will help to make your site more accessible. The use of CSS separates the presentation of the document from its structure. This makes it much easier to control the layout of the page, the alignment of the text, fonts, character spacing, etc. By controlling the page layout through CSS, it eliminates the need for excessive HTML coding, which many times results from attempting to control the layout through the HTML code itself. CSS is also used to control audio output through the use of aural style sheets. Aside from the obvious use for those who are blind, aural style sheets can also be used for in-car listening, home audio systems, and in business. CSS also allows the user to override the site's style sheets and use their own, which, in many cases (i.e., color blindness) enables the user to remain on the Web site for a longer period of time. The W3C provides information about using CSS for accessibility: "Accessibility Features of CSS".


Navigation can be one of the main problems in accessing your site, even for someone without a disability. If you look on most computer program text menus (like in your browser, at the top), you will see an underlined letter in each command. In Windows Internet Explorer, if you hold down the [ALT] key and press the underlined letter and the press [ENTER], you activate that menu command. In a Mozilla-based browser, it would be [ALT] + the underlined letter; on a Macintosh, using Safari, press [CTRL] + the underlined letter. The W3C introduced the accesskey attribute to enable the creation of the same type of effect on Web site menus.

By just adding the accesskey attribute to your links, the process itself will work: <a href="/articles/" accesskey="a">articles</a>. However, it doesn't really stand out and your user won't know that it's there. One method of making it stand out is through the use of CSS. An example of this can be found on the Ontario Ministry of Energy Web site. (My thanks to Stuart Robertson for the code below.)

First, the link itself must be set up:

        <a href="" accesskey="h"><em>H</em>ome</a>

Next, the code is further enhanced in the style sheet:

        a {
           text-decoration: none;
        a em {
           font-style: normal;
           font-weight: normal;
           text-decoration: underline;
        a:hover {
           text-decoration: underline;

The finished product:

Menu with accesskeys in use

Another method, using JavaScript, accesses the Document Object Model (DOM) to automatically insert the underline (my thanks to Richard Rutter for the code below. A complete explanation can be found on his Web site).

The CSS code must be established, either in the style sheet (the preferred method) or included on the page itself.

        #navbar A {
        #navbar A SPAN {

Next, the JavaScript is inserted in the head of the document:

<script type="text/javascript">
function underline() {
  var nav = document.getElementById('navbar');
  var navlinks = nav.getElementsByTagName('a');
  for (var i = 0; i 

And finally, in the navigation menu itself.

        <div id="navbar">
          <a href="/articles/" accesskey="a">articles</a>  ::  
          <a href="/views/" accesskey="v">views</a>  ::  
          <a href="/news/" accesskey="n">news</a>  ::  
          <a href="/links.htm" accesskey="l">links</a>  ::  
         <a href="/links.htm" accesskey="b">about</a>

And ... presto!

Menu using accesskeys

Created: March 27, 2003
Revised: July 12, 2004