Resizing Text for ADA Compliance

Your website speaks volumes -- literally. While there are still debates within various industries as to how much copy should live on each page, the average website page contains 350+ words. And when some websites contain hundreds of pages, it’s crucial that each page have easily-readable content. What’s the point of writing that content if your website visitors can’t actually see it?

This tutorial makes your website more accessible for everyone who might struggle with seemingly ‘standard’ sized text. While Arial 12 pt font might be easy to read for your youthful team of web developers, it might not work for a visually impaired user or an older website visitor. By adding a few more text options to your website, visitors can quickly adjust fonts to a size that best suits their needs. Thus, they’re more inclined to stay on your website. Not only can they read more about your product or services, but they’ll take note of your courtesy. Even if a website is mobile responsive, it doesn’t necessarily mean that the text is mobile responsive to meet the needs of visually impaired users.

HTML

Some simple Bootstrap markup to emphasize the text size changes.

CSS

The CSS here helps with ADA Compliancy, as well as specifies the sizes of the changing text by targeting text within the font size classes.

JS

Some JavaScript code gives the body the classes it needs to target the text within. A class to the body allows for functionality throughout the website, without bloating the HTML with class changes to each element.

$('.change-font').on('click', 'a', function (e) { e.preventDefault(); if ($(this).hasClass('font-size-1')) { $('body').removeClass('text-size2 text-size3'); } else if ($(this).hasClass('font-size-2')) { $('body').removeClass('text-size3').addClass('text-size2'); } else if ($(this).hasClass('font-size-3')) { $('body').removeClass('text-size2').addClass('text-size3'); } });

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below!