Home > Web Services > Resources > You are here Articles

Testing your website for accessibility

Note: this article covers a broad range of useful techniques for testing the accessibility and usability of your website. We also recommend you read our accompanying article 'Our top 10 Accessibility tools’.

The only way to find out if your website is accessible is to test it.

There are many ways you can do this yourself. Using some of the assistive technologies (AT) that disabled individuals use (such as screen-reading or voice recognition software), and seeing how you fare is often an eye-opening experience. When you turn off your monitor and try navigating through your site listening to a screen-reader’s output alone, you can be amazed at how difficult it is. Or – if you’ve been doing everything right, how easy!

Another way to test your pages is to navigate around your site using only the keyboard. It’s the cheapest (free) and most readily available testing tool you have at your disposal and a vital requirement for accessibility.

If you wish to download some software to test your site, you could try using Home page reader which may give you an idea how a person with a vision impairment might experience your website. Below we look at this screen reader, and some things you can test using another tool called the Web Accessibility Toolbar.

Home page reader (HPR)

HPR is a talking web browser which is designed for people who are blind or vision impaired, or for people with a literacy or cognitive impairment. You can view a page in HPR to check whether all the information available visually in the Graphics view is also available in the Text view. You will be able to listen to the web page as a blind person would hear. HPR is also a useful tool for checking forms have been coded correctly and all images have been given an alt attribute.

A trial version of the software is available at:
http://www-306.ibm.com/able/solution_offerings/hpr.html

AIS Web Accessibility Toolbar

The AIS Web Accessibility toolbar is an extension available for both Internet Explorer and Opera browsers. It is an extremely useful tool and can be used to check a number of issues within a web page. Some of the more useful functionality is detailed below.

AIS toolbar

Checking your web pages validate

The Validate menu option contains links to the World Wide Web Consortium (W3C) HTML Validator and W3C CSS Validator. These allow you to check the validity of your HTML and CSS. Validation is important as pages that validate are likely to be supported by more browsers and AT, which means accessible to a greater number of users.

Additionally, pages which validate are more likely to be indexed by search engines than those which don’t.

Changing the resolution

The resize facility allows you to view what your page would look like at a number of different screen resolutions eg 640x480, 800x600, 1024x768 or a custom size. It is important to ensure that the page adapts to different browser sizes without text or content overlapping or horizontal scrolling. Different users have different monitor sizes and with new and emerging technologies, they may also be accessing a website from their mobile phone.

Checking alternative (alt) text for images

Select the Images Option and Toggle Image/Alt. This will display the alt text which has been coded for the image instead of the image. It will show where images have not been assigned alternative text by displaying “No Alt!” where there isn’t any. You should check that all alt text is meaningful and appropriate, as this information is vital for blind users accessing the information via a screen reader.

Ensuring content does not rely on colour alone

The Greyscale option within the Colour menu will enable you to change your page so that no colours are displayed. This will allow you to determine if all information can be understood without colour. For example, it will clearly show if there is content which states: ‘All titles highlighted in green are available’. If you find it difficult in identifying which titles are available, it is likely the information relies on colour alone.

Checking pages still work without JavaScript

Within the IE Options menu there is the functionality to toggle JavaScript. This enables you to view the page as if your browser didn’t support JavaScript. You should check that you can still access all functionality and that any changes within the page are not significant.

Around 5 per cent of users would have issues with a website that used JavaScript because they have browsers that do not support it or have it disabled. This 5 per cent is made up of people surfing the web behind secure firewalls that for security reasons have disabled JavaScript, PDA users and disabled people who use adaptive technology that has limited or no support for JavaScript.

Checking the font size can be increased and decreased

The ability to change text size is also contained within the IE Options menu. This enables you to select different sizes of text to ensure that the text on the page is not a fixed size. It is important that text is not a fixed size so that vision impaired users can increase the size of the text to make it more legible. It can also help users who have dexterity impairments in increasing link sizes so they can click on them more easily.

From the IE Options menu you can also bring up the Accessibility Dialog box. Here you can set your browser to ‘Ignore font sizes specified on Web pages’. This will then ignore any font sizes you have in your web page.

It is also vital to ensure that there is no cropping or overlapping of text when it has been enlarged. Many developers ensure that text can be resized, but neglect to test to ensure that no distortion results.

Checking the structure

An accessible web page is structured well, with the appropriate use of ‘semantic’ elements for marking up the content. The Structure option on the toolbar gives you the option of highlighting HTML elements. For example, you could choose Headings and have all the headings in the page highlighted. If there are no headings then a dialog box appears saying ’No Headings!’. You can also highlight lists, tables, frames and pretty much any other HTML element you can think of.

This feature allows you to see the HTML elements in context.

You can download the toolbar from:
http://www.visionaustralia.org.au/ais/toolbar/

Conclusion

Using these testing tools is not a substitute for a full and comprehensive code audit or disabled user testing, but can be useful tips to gauge accessibility as part of your site development or ongoing maintenance.

Back to the Articles home page.

For more information:

Email accessibility@AbilityNet.org.uk
Phone 0800 269545

Go to Top.

Accessibility audit

Find out how accessible your website is by having us conduct an Accessibility Audit.

Our web work

Examples of our web design and build services can be found on our Portfolio page.

Contribute

If you'd like to submit an item you have written for inclusion here please send it to accessibility@AbilityNet.org.uk.

Industry news feed

New! Subscribe to our RSS feed!