Style Switching for Accessibility

Wed, 7 November, 2007 – 11:01 pm

More clients are slowly getting the idea of accessible websites into their head. You'll often find clients asking for something they've seen on another site, it's only natural. One fancy little thing is the option of allowing people to click a button that controls the font size of the site. Yes, a good browser should do this for you (providing your style sheet is coded to allow it) however a lot of people do not realise that they can alter the size easily via the View menu. Your best option is to educate your visitors but not everyone is prepared to sit and read about how they can use their browser properly.

I see people asking about a font size switcher and are usually told to use JavaScript or are perhaps referred to an old article on A List Apart called PHP Switcher. Personally, I wouldn't use JavaScript as not everyone runs it. I know people who have played with their settings and switched it off without realising it, and others choose not to run it. Plus, why use JavaScript when a server side language can do the job just as well The PHP Switcher is a good article however it's not exactly what people are looking for, as this creates a drop down list, a jump menu essentially, using older PHP code (no Super Globals in use there!). I may have missed a more recent PHP Switcher article on ALA, but on a quick search I couldn't see anything jump out.

So how is it done with minimal work? It's fairly straightforward. First off I have to point out that any switcher will need to rely on cookies unless you intend to pass a variable through to every page on your site which will create a lot more work. A cookie is also ideal as it means that if the visitor returns on another day it can continue to remember their settings and this way they don't have to increase the text size again.

The Stylesheet

You have several options on how you can control the CSS. This method will offer the least amount of changes/files. So let's say hypothetically you already have the standard site coded up using a percentage of 62.5% on the body and then ems for controlling the size of the various tags, ids and classes used (see Clagnut for a good article on Sizing text using ems if you don't already know how to do this bit).

So in your CSS file you already have:

CSS Code

1. body {
2. font-size: 62.5%;
3. }

You may well have other properties set as well, however it's the font size that we're focusing on here. What you now need to do is actually create 3 IDs and specify the font size percentage for each size you want to offer as a button. So this would then be added to your CSS file as:

CSS Code

1. body#smallfont {
2. font-size: 62.5%;
3. }
4. body#medfont {
5. font-size: 75%;
6. }
7. body#largefont {
8. font-size: 87.5%;
9. }

This would then mean 1em would be the equivalent to 10px, 12px and 14px.

The PHP Switcher

For the Switcher to work we need to offer 3 buttons/links offering each size. These are just standard links, either text or image links. Each link will just reload the same page but with the new size 'sent' with the page via the URL. If you have a header file include that is the same file used across your site then you can just update this file and add the links below.

PHP Switcher Code

1. <?php $separator = strpos($_SERVER['REQUEST_URI'], "?") === FALSE ? "?" : "&amp;" ?>
2. <a href="<?php echo $_SERVER['REQUEST_URI'] . $separator . "fs=smallfont" ?>">Small Font</a>
3. <a href="<?php echo $_SERVER['REQUEST_URI'] . $separator . "fs=medfont" ?>">Medium Font</a>
4. <a href="<?php echo $_SERVER['REQUEST_URI'] . $separator . "fs=largefont" ?>">Large Font</a>

The first line of this code just determines whether the page URL is static or dynamic (already contains a question mark and one or more variables). When one of these links are clicked, the page is reloaded but the 'fs' variable is fed through to it with a new value. This value is then taken and used as the body ID to ensure the correct font size is used from the stylesheet, and this is also saved into a cookie for future use. This is accomplished using the code below. The first line is an array that holds the 3 available sizes. This is to prevent people from altering the font size variable and potentially breaking anything (although it shouldn't matter it's always just best to be in control).

PHP Switcher Code

1. $fontsizes = array("smallfont", "medfont", "largefont");
2. if (isset($_GET['fs']) && in_array($_GET['fs'], $fontsizes)) :
3. $bodyid = $_GET['fs'];
4. setcookie("bodyID", $bodyid, time()+60*60*24*7);
5. endif;

The above code checks that the fs variable exists in the URL, and also that it is one of the assumed values. If both criteria are met then the value of the fs variable is saved into the bodyid variable and a cookie called bodyID is also set for 7 days.

If the visitor has previously selected their font size then a cookie should be stored on their computer containing this preselected size. To check and retrieve this value the following code is used:

PHP Switcher Code

1. if (isset($_COOKIE['bodyID']) && in_array($_COOKIE['bodyID'], $fontsizes)) :
2. $bodyid = $_COOKIE['bodyID'];
3. setcookie("bodyID", $bodyid, time()+60*60*24*7);
4. endif;

Again, the if statement checks that the cookie bodyID is set and also that it contains a correct value (as people can easily change the value of their cookies). It resets the cookie so that it is still remembered for 7 days from the last site visit.

Finally, if no link has been clicked and no cookie has been set previously then we set the bodyid variable as the standard size. Bringing all of this together we have:

PHP Switcher Code

1. <?php
2. $cookieExpiry = time()+60*60*24*7;
3. $fontsizes = array("smallfont", "medfont", "largefont");
4.  
5. if (isset($_GET['fs']) && in_array($_GET['fs'], $fontsizes)) :
6. $bodyid = $_GET['fs'];
7. setcookie("bodyID", $bodyid, $cookieExpiry);
8. elseif (isset($_COOKIE['bodyID']) && in_array($_COOKIE['bodyID'], $fontsizes)) :
9. $bodyid = $_COOKIE['bodyID'];
10. setcookie("bodyID", $bodyid, $cookieExpiry);
11. else :
12. $bodyid = "smallfont";
13. endif;

This code now determines which body ID to use and sets the cookie if it needs to. I've moved the expiry time of the cookie to a new variable to save duplication. If you want to extend the lifetime of the cookie from 7 days, just change the 7 to however many days you want to set it for. Note: This code must be placed before any output which includes the doctype and blank space.

All we then need to do is alter the <body> tag to use the correct ID:

HTML Code

1. <body id="<?php echo $bodyid ?>">

Summary

So to recap.

1. First you need to add the new body ID styles into your CSS file
2. Add the links to somewhere on your site, changing the anchor text to something more suitable or to images if you want. Just keep the link code intact
3. Add the body ID and cookie code to your header file, ensure it's above all HTML output
4. Then add in the extra code to set the correct ID for the body

• Bookmark this page at:
• Del.icio.us -
• StumbleUpon -
• Spurl