University of Vermont

UVM Self-help Web Guide

Helping your site visitors resize text

Accessibility and usability experts recommend designing websites to permit a variety of different text sizes and background colors. The core templates of the UVM Web Publishing system are designed with this principle in mind.

On most leading accessibility sites, the current trend is to allow visitors to control text sizes and colors via their own web browser controls. Some sites, such as the Web Accessibility Initiative of the W3C include a link on their site with detailed instructions for making these changes in the major browsers.

Here are two popular methods that you may choose to implement in order to facilitate text resizing within your website:

  1. Add a link to documentation on how to change text sizes in common web browsers – This method has the added advantage of educating your visitors on how to adjust text size for other websites. You may choose to link directly to the page on the W3C site:
    http://www.w3.org/WAI/changedesign
  2. Add a text sizing widget to your site – We offer a basic text sizing object that you can add to any page, or, if you are using the UVM Web Publishing System, in a links extra or banner file. Implementing this widget is a two-step process:
    1. Attach the text sizing javascripts to the head section of your page/site. This can be easily accomplished in the UVM Web Publishing System by adding the following file to your root directory: javascript.html. (If you already are using a javascript.html file, simply append the contents of this file to it.)
    2. Add the text-sizer widget to an HTML page or your banner or links extra file using:
      <div id="fontsizer"></div>
    Sample:
    You can further refine the area to be resized and the level of resizing in the javascript.html file.

Last modified September 13 2011 01:05 PM