Atomic Smash homepage splash

Build a custom text size magnifier to improve accessibility

Words by Anthony HartnellJune 30, 2017

Since attending last months ‘Assistive technology demo’ talk at WordCamp Bristol I’ve been thinking more about how we can incorporate accessibility techniques to improve website experience for people with disabilities. Before the talk I’d never seen a screen reader being used and it was quite alarming to see how difficult the experience was for badly marked-up html, especially around forms.

I’m working on a project that needs a way for people to set the text size on the website for better readability. You may already be familiar with the functionality – three A characters of different sizes…here is an example of it on the BBC accessibility guide:

Image of accessibility button on BBC website

This example also uses a colour changer so set different contrast levels.

Accessibility Resources

I have found the BBC website to be an excellent resource for learning about this topic and they have some useful how-to guides which are very interesting and highlight the importance of accommodating all users, not just the visually impaired.

Other resources

Structuring the code

I added an unordered list to house the different ‘A’ text sizes and provide a link to trigger the javascript functionality (with the  js–accessibility class).

<ul class="js--accessibility__font__size list--unstyled list--inline">
    <li><h3>Text size</h3></li>
    <li id="font__size--0">
        <a href="#" class="">A</a>
    </li>
    <li id="font__size--1">
        <a href="#" class="">A</a>
    </li>
    <li id="font__size--2">
        <a href="#" class="current">A</a></li>
</ul>

Here is what it looks like on the page with some styling.

Image for Text Size Demo

I’ve used the ‘current’ class to set an underline on the ‘A’ element

 

 

Setting and saving their choice

I will need to attach some javascript to the text increaser block so that each link click will set an ID on the html tag and assign a class of ‘current’ to the clicked element. This can be done easily with javascript on the client side but the setting needs to be made persistent so it carries across to other pages.

Setting a cookie

The best way of saving a preference for the user is to set a non-expiring browser cookie meaning their choice is saved for any future site visits. In the example below I’ve used an excellent resource called JS Cookie available here: https://github.com/js-cookie/js-cookie. It makes the setup very easy and provides a global ‘Cookie’ object to read and write from/to:

$('.js--accessibility__font__size li').click(function( ev ) {

        var selectedClass = 'current';

        // Remove current class from the list
        if( $(this).parent().find('li a').hasClass( selectedClass ) ) {
            $(this).parent().find('li a').removeClass( selectedClass );
        }

        // Add current class to clicked element
        $(this).find('a').addClass( selectedClass );

        // Add the font class to the wrapper
        $('html').attr('id', $(this).attr('id'));

        // Set the cookie for the clicked item
        if (Cookies.enabled) {
            Cookies.set('font_size', $(this).attr('id'));
        }

        ev.preventDefault();

});

// Get and Set the font size from the cookie 
if (Cookies.enabled) {

    var fontSize = Cookies.get('font_size');
    if( fontSize ) {
        // set the font size on the body
        jQuery('html').attr('id', fontSize );
        jQuery('.js--accessibility__font__size').find('li a').removeClass('current');
        jQuery('.js--accessibility__font__size li#' + fontSize + ' a').addClass('current');

    }
}

Increasing the font size

Since the font size is set on the HTML tag, I can add a global font-size percentage in Sass which will increase the font size in relation to the body font. This makes working out the size calculation much easier.

html {
	&#font__size--0{
		font-size: 100% !important;
	}
	&#font__size--1{
		font-size: 120% !important;
	}
	&#font__size--2{
		font-size: 150% !important;
	}
}

Checking that the cookie has been set

In Chrome Inspector Tools I clicked on the application tab:
Image of Chrome Inspector Tools

Then on the left selected Cookies in the Storage section:
Image for Chrome Cookies

Finally I can see that the font size cookie has been set:
Image for Font Size Cookie

Here is an example of the class being added in javascript:

Animated GIF of Font Size Increaser

Final Result

Animated GIF demonstrating the final example

Styling considerations

Should I increase all the text, or just the main content?

We felt that it was best to increase all of the text in the page rather than restricting it to a specific content area as we needed to make sure that the navigation and footer links were as visible as possible. It did throw up some issues however, especially where i’d used column layout, for example with a block of text on the left and a form input field on the right. As the font size increased it squashed the form input field making the label and placeholder text unreadable.  One way could be to set explicit column widths in px and let the text flow inside. It’s also worth noting that most input field heights are fixed height. My tip is to use min-width and min-height where possible.

Since I’m adding an ID to the html element I can target this in css to change the layout accordingly. For example in Sass:

.description__container {
    width: 50%;
    float: left:
}

.form__container {
    width: 50%;
    float: right:
}

html#font__size--3 {
    .description__container,
    .form__container {
        float: none;
        width: 100%;
    }
}
Profile picture of Anthony Hartnell

Anthony HartnellDeveloper

Anthony works in the development team and enjoys creating plugins and integrating maps, libraries and other APIs into Wordpress.

Go back to top

Keep up to date with Atomic news