Accessible, degradable style control

This the first in a two part tutorial on how to create style control links to your web site to control font sizes and to control style sheets both from JavaScript and with JavaScript disabled browsers.

This method will also keep the user on the page they changed the style from, and will continue to hold until they clear their cookies.

Part 1 will focus on the font control, and part 2 will control the style sheet.

Steps Involved

The HTML
Server side script to managed non-JavaScript enabled browsers
JavaScript to change font sizes dynamically

HTML

So that we have a clear view on how the functionality will degrade, we're starting with HTML. The HTML looks like this - and note that we will be using the information in the links to control the style of the page:

<ul>
  <li><a class="fontControl" href="/change/font/1.5em">Large Font</a></li>
  <li><a class="fontControl" href="/change/font/1em">Medium Font</a></li>
</ul>

Note also, that I am going to use the class fontControl to hook our JavaScript to the links.

In our HEAD tag we will add a style sheet to manage the font changes:

<link rel="stylesheet" title="font_adjust" href="/css/font.css" type="text/css" />

The font.css is actually a PHP script (in my case, in yours it can be anything), hidden with a dash of mod_rewrite. This is also true with the font change links, as explained below.

Server Side

.htaccess

If you don't have access to manage the .htaccess or don't have mod_rewrite enabled, then you should ignore this section, but read non-.htaccess.

Your .htaccess file should look like this:

Options +FollowSymLinks +ExecCGI
RewriteEngine On
RewriteBase /
RewriteRule ^change/(.*)/(.*)$ change.php?$1=$2 [L]
RewriteRule ^css/font.css$ css/font.php [L]

The important parts are the last two lines. If you already have mod_rewrite rules put these in above any main redirects (i.e. in WordPress it would go above the last conditions and rule).

Now you need to create the files that will handle the style control (skip the non-.htaccess).

Non-.htaccess

It's not as clean, and you don't get to use sexy URLs, but it's still possible. From the links you have created, change as follows:

/change/font/... => /change.php/font/...

The font adjustment style sheet should point to font.php (instead of font.css).

Change and Font files

The change script will manage the setting of the cookie to control the font size change, and the font script will manage the getting of the cookie to set the font size in the browser.

change.php

<?php
// work out where to redirect the user back to
$target = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '/';

// collect the info for the style change
$request_path = (isset($_SERVER['REQUEST_URI']) ?
preg_replace('/\?.\*$/', '', $_SERVER['REQUEST_URI']) : '');
$methods = explode('/', $request_path);
if (count($methods)) {
  if ($methods[2] == 'font') {
    $f = isset($methods[3]) ? $methods[3] : '1em';
    setcookie("font_size", $f, time()+(3600*365), '/');
  }
}
header("Location: $target");
?>

Note that the font defaults to '1em' and the cookie expires in a year (365 multiplied by the seconds in a day plus time now). You can easily change this to suit the style of your web site.

font.php

<?php if (isset($_COOKIE["font_size"]) && $_COOKIE["font_size"]) {
  header('Content-type: text/css');
  echo "BODY { font-size: {$_COOKIE['font_size']}; }"
} ?>

JavaScript

The solution so far should work without JavaScript enabled. However, we want to allow this functionality without having to reload the page.

For this we will need cookie setters and getters, font size changing methods and an 'onload' function to apply the JavaScript once the DOM has loaded.

Here is the cookie library

I am using jQuery with the JavaScript, so include the libraries as follows:

<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/cookie.js" type="text/javascript" charset="utf-8"></script>

Now add the start up JavaScript (remember that all the script tags should really be inside the HEAD tag):

<script type="text/javascript" charset="utf-8">
$(function(){
  $('A.fontControl').click(function() {
    // find the last part of the href and use this to set the font
  var f = this.href.substring(this.href.lastIndexOf('/')+1);
  set_font_size(f);
  return false; // cancel the click through
  });
})

function set_font_size(f) {
  $('body').css('font-size', f);
  createCookie('font_size', f, 365);
}
</script>

If you're not familiar with jQuery, here's a short explanation:

$(function()) {

Execute the contents of this function when the DOM has loaded, i.e. the page is ready.

$('A.fontControl').click(function() {

Find all the anchor tags with the class 'fontControl' and attach a click event.

var f = this.href.substring(this.href.lastIndexOf('/')+1);

Using the 'this' variable within the A context, collect the last part of the URL (within the path).

$('body').css('font-size', f);

Set the font size CSS attribute to the font size passed in.

Wrapping up

Remember to test your implementation with both JavaScript turned on and turned off.

When it comes to where to add the style control links, I would recommend placing the style control in the footer, only because it's useful to users who are seeing the style.

Screen readers may not make much use of this feature, so I tend to add it to the footer of the code, and use absolute positioning to create a roll over effect in the header, see my example at (work in-progress) Kajinka (the top orange bar - then view the source).

Next week I will post the second part of this tutorial to allow the user to view your site naked (i.e. no css) using similar methods.

If you have any questions, comments or recommendations please drop me a comment and I'll do my best to reply.

Accessible, degradable style control - part 1