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.

/* ============================================================= */
/* The following function allows user to set multiple font sizes */
/* ============================================================= */
<script language="JavaScript"> <!--
function setFontCookie(name, value) {
 var curCookie = name + "=" + escape(value) + "; expires=Wed, 07-Jun-2023 11:07:25 GMT; path=/; domain=domain.com";
 document.cookie = curCookie;
 window.location.href = window.location.href;
}

function getCookie(name) {
 var dc = document.cookie;
 var prefix = name + "=";
 var begin = dc.indexOf("; " + prefix);
 if (begin == -1) {
       begin = dc.indexOf(prefix);
       if (begin != 0) return null;
 } else
       begin += 2;
 var end = document.cookie.indexOf(";", begin);
 if (end == -1)
       end = dc.length;
 return unescape(dc.substring(begin + prefix.length, end));
}
if (getCookie('fontsize') == null) {
       var fontsize = 11;
} else {
       var fontsize = getCookie('fontsize');
}

function changeFontSize (direction) {
       setFontCookie('fontsize',fontsize);
}

document.write('<style> document.write('.main {font-size:'+fontsize+'px;line-height: 150%;15px;color: #000;padding: 0px 0 30px 0px;}');
document.write('</style>');

//-->
</script>
/* ====================================================== */


In the HTML code, ESPN uses the following:

<script language="JavaScript">        document.write('<!-- fontsize=' + fontsize + '-->')

       if (fontsize == 10) {
              document.write('<div class="ft2at"><a href="#" onClick="changeFontSize(10); return false;"><img src="http://www.soccernet.com/design05/i/story/small_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       } else {
              document.write('<div class="ft2"><a href="#" onClick="changeFontSize(10); return false;"><img src="http://www.soccernet.com/design05/i/story/small_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       }

       if (fontsize == 11) {
              document.write('<div class="ft2at"><a href="#" onClick="changeFontSize(11); return false;"><img src="http://www.soccernet.com/design05/i/story/medium_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       } else {
              document.write('<div class="ft2"><a href="#" onClick="changeFontSize(11); return false;"><img src="http://www.soccernet.com/design05/i/story/medium_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       }

       if (fontsize == 14) {
              document.write('<div class="ft2at"><a href="#" onClick="changeFontSize(14); return false;"><img src="http://www.soccernet.com/design05/i/story/big_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       } else {
              document.write('<div class="ft2"><a href="#" onClick="changeFontSize(14); return false;"><img src="http://www.soccernet.com/design05/i/story/big_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       }

       if (fontsize == 20) {
              document.write('<div class="ft2at"><a href="#" onClick="changeFontSize(20); return false;"><img src="http://www.soccernet.com/design05/i/story/real_big_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       } else {
              document.write('<div class="ft2"><a href="#" onClick="changeFontSize(20); return false;"><img src="http://www.soccernet.com/design05/i/story/real_big_A.gif" alt="small_A.gif" width="16" height="16" hspace="1" vspace="1" border="0" /></a></div>');
       }

</script>


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:

/* ======================================================================= */
/* The following function allow user to increase or decrease the font size */
/* ======================================================================= */
<script language="JavaScript"> <!--
function setFontCookie(name, value) {
 var curCookie = name + "=" + escape(value) + "; expires=Wed, 07-Jun-2023 11:07:25 GMT; path=/; domain=domain.com";
 document.cookie = curCookie;
 window.location.href = window.location.href;
}

function getCookie(name) {
 var dc = document.cookie;
 var prefix = name + "=";
 var begin = dc.indexOf("; " + prefix);
 if (begin == -1) {
       begin = dc.indexOf(prefix);
       if (begin != 0) return null;
 } else
       begin += 2;
 var end = document.cookie.indexOf(";", begin);
 if (end == -1)
       end = dc.length;
 return unescape(dc.substring(begin + prefix.length, end));
}
if (getCookie('fontsize') == null) {
       var fontsize = 11;
} else {
       var fontsize = getCookie('fontsize');
}

function changeFontSize (direction) {
       if (direction == "decrease") { fontsize--; fontsize--; }
       if (direction == "increase") { fontsize++; fontsize++; }
       setFontCookie('fontsize',fontsize);
}

document.write('<style> document.write('.main {font-size:'+fontsize+'px;line-height: 150%;15px;color: #000;padding: 0px 0 30px 0px;}');
document.write('</style>');

//-->
</script>
/* ======================================================================= */


Now, in my HTML, I use something like:

<div class="changetextsize">
<a href="#" onClick="changeFontSize('decrease'); return false;"><img src="/images/dec-text.gif" alt="decrease text" width="21" height="15" align="texttop" border="0" /> Decrease Text Size</a> &nbsp; <a href="#" onClick="changeFontSize('increase'); return false;"><img src="/images/inc-text.gif" alt="increase text" width="21" height="15" align="texttop" border="0" /> Increase Text Size</a> &nbsp;
</div>


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.