A turbo-charged style-sheet switcher
Added on Thursday 30 Oct 2003
Providing user customisation options by making css files scriptable.
During a recent discussion with Gez Lemon of Juicy Studio, about the best way to set the text size on text pages - and the merits or otherwise of using web page based scripts to provide customization options - Gez reminded me that many users do not know they can change text size (and many other things) using their browser preferences.
I have to admit, that in the past, I was not an advocate of providing an alternative interface for setting presentation elements on a page - my reasons included:
- It is rarely a good idea to undermine common browser interface elements and preferences.
- Users can change the settings themselves, and have more control in their browser preferences than they are likely to get with a style sheet switcher or other server or client side tools.
- Most such tools use javascript and cookies - so they will not work for all users.
However - having agreed that many user do not know they can change the preferences in their browser - I am more sympathetic towards the use of embedded user interface changers (If I could think of a better phrase I would use it). I am inclined to think that - if implemented properly - they have a role to play.
An important aspect of accessible web design is giving the end user the ability to change presentation elements to suit their own needs. Ensuring that your web design practices don't get in the way of the users ability to change their browser preferences is one way to do this; providing alternative style sheets is another.
Unfortunately, unlike in Mozilla browsers where alternative style sheets can be chosen from the view menu, Internet Explorer provides no such facility. A style sheet switcher can be provided easily enough either by using Javascript or by using a server side scripting language such as PHP.
However, style sheet switchers tend to be rather restricted in what they can do; the number of choices that can be provided to the user is limited to the number of style sheets provided by the developer:
If you wanted to provide the options for visitors to your site to choose a text size anywhere between say, 80% and 150% of the default size (sometimes small, medium and big is not enough choice), and you also wanted to provide a choice of background colours of say 10 colours; to provide each combination of colour and text size from these two variables (assuming increments of 1%) would require 700 style sheets.
Even if you just wanted to provide 10% text size increments you would still have to provide 70 alternative style sheets; clearly from both the users and the developers point of view, this is not a particularly flexible solutions. If the choice of font is also regarded as an important accessibility issue - and you wanted to provide a choice of fonts (e.g. specialist fonts suitable for a person with Dyslexia, or someone with a visual impairment) this would increase the number of required alternative style sheets to an even more unmanageable number.
With this is mind, it occurred to me that perhaps there is a place for using a simple web form and a server side script to let users control some common page elements such as colour, text size and preferred font.
One HTML form, some lines of PHP code, and a way to control the values within a style sheet provides us with the ability to set a large number of colours, contrasts, text sizes and font combinations. And we still have the opportunity of providing alternative style sheets to deal with the broad issues such as page layout, and where to position the main menu on the page.
I have created a text size and colour combination switcher as an example of how a form and associated scripts can be used to alter presentation elements.
I have provided the scripts and code used in a more complete article in the learning section.