Code snippets: A really easy javascript accessibility text size selector

Posted by Ed Nice on 14 October 2009 | 1 Comments

Tags: javascript, wai, accessibility, prototype, client side, css

A client asked me recently about upgrades to a web application. One of the required upgrades was to add text sizing.

If you don't know what this is, it's just putting some options in place to allow the web site visitor to choose which font size they use to view your web site. You can see this example in action over there >>>

Many modern browsers let you do this, but adding the option to your web site alows the visitor easy access to the functionality.

So, we sat down and I discussed the presentation with the designer.

I suggested a little paragraph in the sidebar that said something like:

Text size: a b c.

We decided against the +/- option, as it can get a bit stupid and I think 3 presented sizes are enough.

I thought a little bit more about how to implement this, the requirements being:

Simple
Re-usable
Client side

So, the decision was to offer 3 links, one for each size option, set a cookie to remember the selection next time, and using javascript/css only.

Here's how we did it.

We use some prototype functions to help with events and element manipulation, so you need to get rototype and reference it in your html page.

You can download and read about prototype at http://www.prototypejs.org/

Reference it in your html page like:

So, you can make a test web page, referencing prototype, using the code below:

Ok, so far, so good. Next we need to create our own javascript handler file and add some other stuff, such as cookie handling that I don't think prototype does? (but it might. I have never looked).

So, our file will need to have an event listener to check for the page loading. Create a file called something like resize.js. It will look something like:

You can also add a reference to this .js file in the html file by adding:

...to the head of the html example.

Next, we need to create a function that sets the font size based on a passed value. So, we add something like:

So how do we change the global font size?

I decided that adding something like 'style="font-size:0.9em;"' in the body or main wrapper tag would work and also let us use some of prototype's great functionality to handle setting the style.

Now we are going to use prototype's $() method to help us, so we need to add something to the setFontSize function, so it uses the size passed in, like:

This uses pixels, but you could use ems too (this site now uses this example based around ems).

Note we use $('app') to reference something that we set the style of. This is simply a shortcut, provided by prototype, to replace the getElementById() javascript function.

For our example, this means we are applying this style to an element in the dom called 'app', so we need to point it out in the htmlfor prototyp to find by giving something an id="app" attribute.

You can target anything in the html, but the body tag or an outer wrapper div will work best. If, for any reason, your body tag already has an id for something else, just use that in the function call instead of 'app'.

Either way, the body tag in your html should look something like:

So if we now update the main event handler to call the resizing function, we now have:

If you open the .html file in a browser, you should see some text and no errors. You can now see if the javascript we have added works. Simply change the parameter in the function call inside the event listener to something like 25. The text hould be huge. If it is, we know it's ok so far.

Great, that worked first time for me too.

Now we have done that, we have a few issues we need to resolve.

We need to add something to allow a resize to be done manually and also to 'remember' the size change.

Let's do the manual re-size first.

This is really simple.

In the body of the html file, add a paragraph like:

Now save and reload the html file. Click the link, the font size changes. Cool.

You can use your own formatting and presentation, but here is a nice sample, offering 3 size options. Remember, you can use as many as you like in your own apps:

Try it out. You get 3 options and it is updated immediately when you select. Excellent.

Ok, but each time we reload the page, it defaults back to the base font size, so we need to use cookies to check for any previous size selection and also to store any subsequent selections.

Here are some javascript cookie handlers. add them to your resize.js file above the current content:

I'm not going to cover the cookie handling code apart from saying it allows us to check for and set a cookie using javascript.

We now need to do 2 things.

Check for any existing resize cookie and use the value if it's there.
Add or update the cookie when we call the resize function.

We will do the first requirement by checking for a valid cookie in the load event handler.

By adding an if/else statement, we can check for cookies and fall back on the default value if there isn't one. Change your resize.js so that the Event.observe handler looks like:

Now we have the ability to check for a cookie and use it, we need to add that little extra bit that sets the cookie for us for next time. Edit the setFontSize() function so it looks like:

Now reload the page and test it. You should have 3 opions to resize text which are remembered next time a visitor accesses the page

Here are the 2 pages we used in full.

resize.html

resize.js

And that's it. Simple text re-sizing in the client using client side javascript which can be used in almost any web site, application and project.

It has been tested and works ok in IE7+ and Firefox but should also be fine in other versions plus Safari/Opera/IceWeasel etc.

Thanks for reading.

/ed.