Skip to main content

How to use jQuery to create aids to website accessibility

By Sue Johnson

Why would you want to have website accessibility aids?

Website accessibility tools

Text size, text colour and background colour of a website can be changed using the browser. This is fine for more knowledgeable users but what happens if you know your audience is not likely to know how to do these things? For example you might be advertising a course on IT skills for people with disabilities.

You will need a basic knowledge of HTML. If you don’t know how to include jQuery and the script into your HTML page, see the example at: https://github.com/suesdesign/website-accessibility-tools

Placing the elements on the page using JQuery

You start by using jQuery to place the elements for the accessibility tools on the web page. This is because if JavaScript is switched off in the browser the elements will not appear.

$('div#accessibility').prepend('\
    <ul id="textsize"><li><a class="textsmaller" href="#">A-</a></li>\
    <li><a class="textlarger" href="#">A+</a></li></ul>\
    <ul id="stylechange"><li><a class="normalcontrast-a" href="#">A</a></li>\
    <li><a class="lowcontrast-a" href="#">A</a></li>\
    <li><a class="highcontrast-a" href="#">A</a></li></ul>'
);

Creating a way to increase and decrease the font-size

You start by declaring the variable fontSize for the font size.

Next create an event handler for clicking on the links to enlarge or decrease text.

Prevent the default action on the link from happening, which would otherwise out a ‘#’ sign at the end of the website page URL.

Make the value stored in the variable fontSize an integer, otherwise it would be a string e.g. 16px:

fontSize = parseInt(fontSize);

Create a means of enlarging or decreasing font size using the variable fontSize and adding or subtracting 2 from it when the element is clicked. If the element with the class ‘textlarger’ is clicked, 2 is added, otherwise 2 is subtracted. It can get no larger than 30px and no smaller than 12px.

The font-size is then added to the body using inline CSS.

The value is stored in sessionstorage which only persists as long as the browser is open. For storing for returning visitors, localstorage could be used:

$('#textsize a').click(function(e) {
    // Prevent the default action for the links
      e.preventDefault();

// Increase or decrease font-size
   
    if ($(this).hasClass('textlarger')) {
        fontSize = fontSize + 2;
        if (fontSize >= 30) {
            fontSize = 30;
        }
    } else {
           fontSize = fontSize - 2;
        if (fontSize <= 12) {
            fontSize = 12;
        }
    }

// Add font-size to body
   
    $('body, article p').css({'font-size':fontSize});

// Store font-size
   
    sessionStorage.setItem('fontsize', fontSize);  
});

Create a means of checking if there is a size for the font stored in sessionstorage, otherwise use the current body font-size:

if (sessionStorage.getItem('fontsize') == null){
        fontSize = $('body').css('font-size');
    } else {fontSize = sessionStorage.getItem('fontsize');
}

Creating a way to change the background and text colour

You declare the variable styleChange to hold the classes for the styles. Create a function to add the relevant class to the body depending on which link was clicked. A switch statement is used to go through each option:

function backgroundChange(){
    switch(styleChange){
        case 'lowcontrast-a':
        $('body').addClass('lowcontrast');
        break;

        case 'highcontrast-a':
        $('body').addClass('highcontrast');
        break;

        default:
    };
}

Create an event handler for the links to change background and text colour. The class is removed from the body if set. The value of the class on the clicked element is accessed. The function backgroundChange() is called to change the background colour and text colour.

Finally the selection is stored.

$('#stylechange a').click(function(e){
    e.preventDefault();

// Remove class from body if set

 $('body').removeClass('lowcontrast highcontrast');

// Get value of current class  
    styleChange = $(this).attr('class');    
    backgroundChange();

// Store style selection
    sessionStorage.setItem('stylechange', styleChange);

});

Final code and demo

The final code can be see here: http://accessibility.suesdesign.co.uk/.

The final demo can be seen here: https://github.com/suesdesign/website-accessibility-tools.

What do you think of this? Have you got a different solution?

All comments will be held in a moderation queue. A selection will be published.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.