Monday, July 13, 2015

JavaScript font resizing with multiple font sizes

Web Content Accessibility Guidelines or WCAG are a set of accessibility guidelines for web sites. One of these guidelines is SC 1.4.4 (Resize text) which requires the text can be resized by up to 200%. For simple web site that contain a single paragraph class and title class, resizing of the font is simple. However modern designs with multiple elements (including headers, footers, main body, along with other widgets) can be difficult to resize as each element likely has a different font size.

The following piece of jQuery will go through the multiple classes input and increase each font to 1.2 times it's current value.
$(".textDiv, .titleDiv, .breadcrumbs").each( function(index){
    $(this).css( {
         "font-size": function(index, value) {
  return parseFloat(value) * 1.2;
If you then wanted a decrease function, simply use the example above but set the size to be 0.8 times the current. The plus of 1.2 and minus of 0.8 is not exactly going to scale, but will work closely enough. It is also worth considering saving the current scaled font setting in a cookie, and then applying it on page load.

No comments:

Post a Comment