What is the “best practice” for resizing text with Javascript?

Question

What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?

My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.

It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.

The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.

So, essentially is my solution reasonable or is there a better way?

Adam

Answer 1

What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?

Best practise is "Don't".

Specify the font size in relative units and let the native browser controls change it if the user wishes.

Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).

The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.

Answer 2

Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc. Other than that, you have a solid solution.

Answer 3

Adding a CSS style to HTML via JavaScript

I think your suggestion is an excellent way of doing it.

It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.

Reading the cookie on page load

To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.

In PHP your CSS class definition may look like this:

 echo '<div class=\\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\\">'; 

Answer 4

What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?

"Web Accessibility Gone Wild" sums it up quite nicely imho:

If your default font size may be too small for site visitors, then make it an adequate size.

and,

All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?

Also, Care With Font Size :

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.

However, if you have a valid reason - feel free to ignore this.