Build User-Controlled Style Sheets for Greater Accessibility

Much of the discussion surrounding Web accessibility concerns users who are legally blind and require a text reader such as JAWS. But organizations such as the American Foundation for the Blind also support sighted people who have a serious visual impairment. Visitors with impaired sight can read Web pages, but may need a high-contrast, large font typeface to do so.

While there are 1.8 million Americans who are legally blind, another 7.7 million have a serious visual impairment that affects their reading ability. With an aging population, this number is expected to double by the year 2030.

In this article, we'll see how to let visitors generate a large print version of your pages by changing the styles applied to your pages. The approach we use is easy, and doesn't require sweeping changes to your underlying HTML code. You can improve the accessibility of your site without a great deal of effort.

Along the way we'll also learn three different methods to change your styles: by changing specific element IDs, by changing CSS selectors, and by swapping entire style sheets. Hopefully these three methods will boost your knowledge of style sheets and have application beyond this article.

The Model

The AFB Website offers a good example what we want to achieve. This page allows visitors to set the typeface used in the site, setting font size, color, and background contrast. The visitor's preferences are then stored in a cookie and applied to all other pages in the site and on all future visits.

Why go to this trouble when users can increase their browser's default font size by themselves using the View - Text Size menu? The text size options offered by Internet Explorer and other browsers are limited, allowing users to increase font size by only 125%. To support visitors with a serious visual impairment, we need larger font and the ability to increase contrast.

The AFB site uses Active Server Pages, and therefore changes page styles through server-side code. Our method will use JavaScript and Dynamic HTML to do the same thing.

The AFB site also offers users several font size and color options. To keep things simple, we'll offer a single alternative in this article. However, you can easily extend the methods described here to offer several options to your visitors.

Our Test Page

First, let's create a simple page whose style we'd like to change:

<div id="test">
<h2>Headline</h2>
<p>This is the content section of our document.</p>
</div>

<p><a href="javascript:;" onClick="changeStyles();">Change styles</a>

This simple page defines a headline and a paragraph of text, and wraps a DIV element around them to make the page content easier to manipulate with JavaScript.

It also defines a "Change styles" link that executes a JavaScript function to change styles. There are three ways we can write the changeStyles( ) function:

1. Changing styles for specific page elements by their ID
   
2. Changing the style of all elements by their CSS selector
   
3. Changing the style sheet assigned to our page

Each of these methods has its own strengths and weaknesses.

Changing Elements by ID

Changing the style of an individual page element is a straightforward process. We first access the JavaScript object corresponding to the element, and then change the value of individual properties.

Our test page wraps a DIV element around the page content, so we can use the ID of this element to find the appropriate object:

     1: <script language="javascript">
     2: ns4 = document.layers;
     3: ie = document.all;
     4: ns6 = document.getElementById && !document.all;
     5:
     6: function changeStyles (id) {
     7:    if (ns4) {
     8:       alert ("Sorry, but NS4 does not allow font changes.");
     9:       return false;
    10:    }
    11:    else if (ie) {
    12:       obj = document.all[id];
    13:    }
    14:    else if (ns6) {
    15:       obj = document.getElementById(id);
    16:    }
    17:    if (!obj) {
    18:       alert("unrecognized ID");
    19:       return false;
    20:    }
    21:
    22:    obj.style.color = "yellow";
    23:    obj.style.backgroundColor = "black";
    24:    obj.style.fontSize = "300%";
    25:
    26:    return true;
    27: }
    28:
    29: </script>