Dynamic Style Configuration for Accessibility


These web pages demonstrate basic accessibility scripting.

In the top right corner are some links which invoke a JavaScript function to switch style sheets in the page. They use a JavaScript function called loadStyle which is given the name of a stylesheet. This stylesheet is then loaded and applied to the page. At the same time a temporary cookie is stored on the users computer so that every page in the site can see the user choice. This is handled by the onClick event handlers in each link.

When the page first loads, the system tries to read the temporary cookie to find the user preference. If there is one, it sets the style. If there is no cookie, then it uses the default style. This is handled by the onLoad="loadStyle();" statement in the body tag.

Legal Issues

There are now legal issues around the use of cookies. You are supposed to check with your site users to make sure that they are happy for you to use cookies. The kind of action being performed here comes under the heading of "user-interface customisation". These kinds of cookies are actually exempt from the law. However, I have included code to get user consent so that you can see how that is done.

You can find information about the relevant EU regulation here:

Code Links

The JavaScript code is here...

There are three stylesheets:


By changing the actual style definitions in these style sheets you can change the appearance of the page for each of the accessibility preferences.

You also need to set up appropriate class and ID tags in your pages to ensure that the styles have the correct elements to which to apply.

You could replace the images used in the accessibility toolbar to more closely reflect the actual style choices you make in your style sheets.