Article
Build User-Controlled Style Sheets for Greater Accessibility
Changing Style Sheets
The final method for customizing text presentation is to allow users to switch to an alternate style sheet. Instead of changing styles for individual page elements or changing specific selectors, this replaces the entire style sheet.
While this method isn't as flexible as changing individual selectors, it is easy to set up, and is supported by all browsers except Netscape Version 4.
To apply this method, first create two external style sheets: a default style sheet and a large print style sheet.
First, place the code below in a file named default.css. This is the code for our default style sheet.
P { font-size : 10pt; }
H2 { font-size : 10pt; }
Next, place the code below in a file named accessible.css. This will be our large print style sheet.
P,H2 { font-size : 200%; color : yellow; background-color : black; }
We then tie these style sheets to our document by placing this code inside the HEAD section of our page:
<link rel="stylesheet" type="text/css"
href="default.css" id="default">
<link rel="stylesheet" type="text/css"
href="accessible.css" id="accessible">
When we define two or more external style sheets for our document, we create a potential CSS conflict for the browser, and different browsers will resolve this conflict in different ways. Internet Explorer will resolve these conflicts in favor of the first style sheet listed. Gecko-based browsers, such as Netscape and Mozilla, will favor the last style sheet listed. Netscape will also allow users to chose between alternate style sheets through its View - Use Style menu.
Since we want our page to display consistently across browsers, we need to deactivate the accessible.css style sheet so there is only one active style sheet when the page loads. To do this, we add the following script code to the HEAD section of our page.
<script>
ns4 = document.layers;
if (!ns4) {
accessibleSheet = document.getElementById('accessible');
accessibleSheet.disabled = true;
}
</script>
This determines if Netscape Version 4 is being used (in which case we do nothing) and deactivates the accessible.css style sheet if not.
Our next step is to write the changeStyles( ) function so that it enables accessible.css and disables default.css. The code for the new function is shown below.
function changeStyles() {
if (ns4) {
alert ("Sorry, but NS4 does not allow us to change styles.");
return false;
}
else {
defaultSheet = document.getElementById('default');
defaultSheet.disabled = true;
newSheet = document.getElementById('accessible');
newSheet.disabled = false;
}
return true;
}
Making It Stick
Regardless of the method you use to change styles, you'll want your changes to be persistent. Unless we do this, the user will have to choose large fonts on every page in the site.
We can make our changes persistent by setting a cookie to indicate the user's style preference. Cookie code is complex, so for this article we'll use a ready-made cookie library available from WebMonkey.
The code below shows how to integrate the cookie code with our style sheet swapping script. Changes to support cookies are shown in bold.
1: <html>
2: <head>
3: <link rel="stylesheet" type="text/css"
href="default.css" id="default">
4: <link rel="stylesheet" type="text/css"
href="accessible.css" id="accessible">
5: <script language="javascript" src="monkeylib.js"></script>
6:
7: <script>
8: ns4 = document.layers;
9:
10: if (!ns4) {
11: if (WM_readCookie('siteStyle') == 'accessible') {
12: changeStyles();
13: }
14: else {
15: accessibleSheet = document.getElementById('accessible');
16: accessibleSheet.disabled = true;
17: }
18: }
19: </script>
20:
21: </head>
22: <body>
23: <script>
24:
25: function changeStyles () {
26: if (ns4) {
27: alert ("Sorry, NS4 does not let us
to change styles.");
28: return false;
29: }
30: else {
31: defaultSheet = document.getElementById('default');
32: defaultSheet.disabled = true;
33:
34: newSheet = document.getElementById('accessible');
35: newSheet.disabled = false;
36:
37: WM_setCookie('siteStyle','accessible',17520);
38: }
39:
40: return true;
41: }
42:
43: </script>
44:
45: <h2>Headline</h2>
46: <p>This is the content section of our document.</p>
47:
48: <a href="javascript:;" onClick="changeStyles()">Set large
49: fonts</a>
Line 37 sets a persistent cookie named siteStyle to store the value "accessible." Line 11-17 check for the existence of this cookie, and call the changeStyles( ) function if it has been set to "accessible".
Applying It
Regardless of the method you use to give users control over page style, keep in mind that normal CSS precedence rules still apply. If you define inline styles for elements of your page, these will override the user-selected styles and undermine accessibility.
Having said that, none of these methods require significant changes to your underlying HTML code. In fact, much of this code is cut-and-paste friendly, making it easy to improve the accessibility of your pages. It's a great thing when you can do something to make your site more accessible without hours of effort.