Accessible Page Titles - sIFR

The problem

You want to have an accessible website. You want a website with seperate presentation code so that you can restyle it easily, and you can vary the presentation depending on the device that is viewing it. But above all, you want it to look great. You want your page titles to be in a really individual, high quality font. However, browsers only support a handful of standard fonts, and once these get to any size appropriate for a page heading, they get all ragged and blockey. You can set Windows to smooth the edges of fonts, but this isn't the default setting for XP. Most people will see text that looks very basic and unprofessional.

A common solution

A common solution is to replace the page title text with an image of the text, so that you can get the look you intended. However, this is inaccessible, impacts development time, inhibits rebranding and the ability to tailor your page to the device type, slows page load times and increases server load. You can generate the images on the fly, but this is a server overhead and also suffers from similar disadvantages.

The new solution

A far better solution is sIFR. It basically replaces the text on your page with a small flash movie. Most people have Flash, so most people will see the intended result. However, it degrades gracefully, and it they don't have Flash, they will see the original text in standard HTML. The HTML document is untouched, it is accessible, it doesn't impact development time and it can be rebranded easily. You can even have the text multi coloured.

More information

sIFR 2.0 can be downloaded here, and more information can be found on the sIFR Wiki. A huge library of fonts in swf format is available here.

Quick tutorial

I found the wiki and other tutorials didn't really make it clear how simple the whole thing was. So here's my cut down version:

1. Download and unzip sIFR 2.0.
2. Copy the following files to the same location as your webpage: sIFR-screen.css, sIFR-print.css, sifr.js, *.swf.
3. Reference these files in your web page, in the header, eg: <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" /> <script src="sifr.js" type="text/javascript"></script>
4. Add this bit of javascript just before the closing body tag: <script> if(typeof sIFR=="function") { sIFR.replaceElement("h1", "tradegothic.swf", "#ffffff", null, null, null, 0, 0, 0, 0, null, null, "transparent"); } </script>

Now your page title, within the h1 tag will be rendered using sIFR. If you want the text within different tag replaced using sIFR, add another line with this tag name as the first argument.