Text Size Switcher

Update (January 1, 2017): I have now switched to using a modified version of code found in the font resizer WordPress plugin, but the code below is still useful on its own and as a tutorial on the topic.

A useful and common accessibility feature is a text size switcher. This is a tool that allows users to alter the size of the text on a Web page, usually to make it larger and therefore easier to read. Some browsers come with this feature built-in, but inexperienced users may not know about it. For these users you can place easily-accessible control buttons for this purpose on each Web page.

This feature is usually implemented using JavaScript CSS and cookies but you can implement a PHP, CSS and sessions switcher as well. The drawback of using PHP is that you need to make a call to the server to reload the page whereas a JavaScript solution is handled on the client side. The advantage of using PHP instead of JavaScript is that you’re not dependent on the client supporting JavaScript, nor do you need to worry about creating browser-specific workarounds.

A text size switcher is yet another example of the power of CSS. By defining sections of your page via CSS, you can add text size controls for individual page sections or the entire page. Since many people use menus and sidebars that don’t scale well, being able to increase the size of just the main text is quite helpful. Of course, with some creativity you could change multiple sections or even load completely different external CSS files as well.

I often see 2 or 3 sizes offered (small, medium, large), but I personally prefer a more flexible solution with two choices – increase text size and decrease text size. Below I illustrate both approaches.

Offer Multiple Font Size Choices

I found the following code on the ESPN website (found on their articles pages, not the main page). In the following, you will need to replace domain.com with your domain name and change .main to the style name you are using for the section you want to resize.

In the HTML code, ESPN uses the following:

which looks like the following on their sidebar:

Offer Flexible Increase/Decrease

To get a more flexible increase size and decrease size setup, I just modified the code above (specifically the changeFontSize function) as follows:

Now, in my HTML, I use something like:

which looks like:

Obviously, with imagination you can come up with your own modifications to this idea. And, the script I borrowed from ESPN can easily be replaced by a different one but I’ll leave that up to you to explore.

Like this content? Why not share it?