Testing web sites for compliance with accessibility guidelines

Aim

This lesson explains the techniques and tools available to help you deliver an accessible web site. It stresses the need for human involvement in the testing process. For accessibility testing the best method is to ask a wide range of disabled people to check the site for you. But before you do there are some tests you can do yourself to remove the majority of errors.

The testing Process

Before starting to test a site for accessibility it is important to have a clearly defined process to follow, otherwise it is easy to get side-tracked on some minor issue and fail to notice something far more important. The first thing to do is to devise a checklist of potential accessibility problems to test against. The W3C has issued a comprehensive list of potential barriers to accessibility together with detailed guidelines for how to avoid them. We shall look at this list in greater detail in the next lesson (and provide a sample checklist to use). The next decision is whether to test the site page by page (looking at each page for any accessibility barriers) or issue by issue (looking at the site as a whole to check that different types of user can access all your content). The second approach is preferable because it enables you to check that the complete site works and makes sense to any user. We provide a process for conducting a thorough test of a web site using this technique in section 2 of this lesson

 

Some simple initial tests

The following three tests do not need any special equipment or skill. They are easy to carry out and will give you a quick idea of how accessible (or not) your site is.

Test 1 - Navigating with the Tab key

 

<br > Many disabled people cannot use the mouse, ether because they cannot see the mouse cursor on the screen or because they do not have the motor control to position the cursor accurately. To test for this barrier try to explore your web site without using your mouse. Put your mouse well out of reach so that you are not tempted to cheat! <br >

Image of a tab key To navigate without a mouse you press the Tab key on the left of your keyboard. Each time you press the Tab key you select the next navigation button or hyperlink on the page. (Use the Shift key + the Tab key to go back to a previous link). When you are on the required button or hyperlink just press the Enter key to go to the new page. The "Back Delete" button returns you to the previous page. The "Page Up" and "Page Down" buttons scroll the whole page up or down one screen-full at a time. The up and down cursor keys scroll the page more slowly. In select (option) boxes the up and down cursor keys allow you to select the required option.

If you find that your site is impossible to navigate without using a mouse then your site is not accessible to many disabled people.

<hr >

Test 2 - Alternative text for images.

Visually impaired users may not be able to see the images - but they still need to know what the picture was about. This is done by including an alternative piece of text that shows up if the image does not arrive, or if the user holds the mouse cursor over the image for a moment. This is called the "alternative text tag" or the "Alt Tag".

Image with cursor over to show the alternative text tagThe picture on the left shows how the alternative text tag is displayed as you rest your cursor for a second over the image. 

Use your mouse to rest the cursor on the images on your web site. Check that the alternative text is relevant to the purpose of the image. Some Netscape based browsers (such as Firefox) don't always display the alt tag when the cursor rests on the image (they seem to prefer the "title" attribute). If you are using Firefox to test your site you may need to right click on the image to view its properties. Fortunately an accessibility checking toolbar is available for Firefox and we shall explore this later when we cover manual testing.

<hr >

Test 3 - Large text option

Image showing how to use the View menu to change text size

People with poor eyesight may need to adjust the size of the text on your web sites.

To check if people can change your text size, select the View menu in your browser toolbar, from the pull-down list select Text Size and click on the Largest option.

If your pages have been written using the proper html codes you should see the text and links on your page written in a larger font size. This means that you have used proportional font sizes - well done.

If the text size remains the same then you have used fixed, or absolute, font sizes and people with weak vision may not be able to read your content. This includes most older people !


Robot tests

There are a number of automated checking programmes available that will check the machine readable code of your web pages. Whilst these tools will tell you if your code is "robust" or "semantically structured" they will not tell you if your pages make sense to a human being. However, if they are used carefully, some of these tools can save considerable time and effort in checking your web site.

VALIDATING XHTML, HTML & CSS CODE

It is possible to check automatically that the X/HTML and CSS code uses valid syntax. There are a number of services available but the most popular are :

  • http://validator.w3.org/ - to check your HTML code
  • http://jigsaw.w3.org/css-validator/ - to check your CSS code

Health Warning – The above tools only check if the code uses the correct syntax. They do not check if the results are what you expect from your code. For example, the following CSS code is valid -
body { display:none}
but the result would be an invisible web page !

Furthermore these tools will not check if you have used the most efficient code. For example, both versions of a navigation bar shown below are valid and produce the same visual effect. Guess which one is most efficient and therefore easier to maintain.

<ul class="mainMenu">
<li><a href="/../index.htm">Home page</a></li>
<li><a href="/../solutions.htm">Our Services</a></li>
<li><a href="/../library.htm" >Our Library</a></li>
<li><a href="/../company.htm" >Our Details</a></li>
<li><a href="/../siteindex.htm" >Site Map</a></li>
</ul>
<ul >
<li class="mainMenu"><a href="/../index.htm">Home page</a></li>
<li class="mainMenu"><a href="/../solutions.htm" >Our Services</a></li>
<li class="mainMenu"><a href="/../library.htm">Our Library</a></li>
<li class="mainMenu"><a href="/../company.htm">Our Details</a></li>
<li class="mainMenu"><a href="/../siteindex.htm">Site Map</a></li>
</ul>

Once you are happy that the basic HTML and CSS code is correct you can go on to test for general accessibility

Accessibility robots

There are a number of tools available that claim to automatically test your web site for accessibility. Unfortunately, as these are robots, they can only test for issues that are "machine readable". They cannot tell if your content actually makes sense, or if the text is meaningful. However, if used with care, they can provide quick indications of where some problems may be occurring.

Many robots only conduct tests on one page at a time but a useful tool that can cope with a complete web site (or sections of a site) is the Functional Accessibility Evaluator provided by the University of Illinois. (http://fae.cita.uiuc.edu/ )

Using the W3C Accessibility Guidelines

The W3C Accessibility Initiative (WAI) has produced a set of guidelines for creating accessible web sites. The latest version (version 2) was published in December 2008 and is considered to be the the standard for accessibility by governments and compliance with discrimination legislation. We shall look at these guidelines in more detail in lesson 13 where we will also link each guideline to the relevant part of this course. We shall also provide a checklist that you can print out and "tick off" each guideline as you check through your site.

If you can't wait until then you can have a look at the requirements at the official web site http://www.w3.org/WAI/WCAG20/quickref/Overview.php

 

Using real people

The purpose of your web site is to communicate with people, so asking real people to check your web site is the most logical solution to testing for accessibility and usability.

Try to ask people who have not been involved in the web site design to undertake some specific tasks using the site.

  1. Ask at least one person to do the tasks using a text-only browser such as Lynx.
  2. Ask another person to do the tasks without using a mouse.
  3. Ask another person to do the tasks with the style sheet option disabled.

The above three tests should show you if you have any serious barriers to accessibility. Once you are happy with this level of accessibility the next test is to ask a blind person who uses a screen reader to check that they can also perform the tasks required.

Independent evaluation

The safest way to be sure that your web site is accessible is to ask an expert to evaluate it for you. There are a number of organisations around that offer this service (including us at Userite). When choosing a company to check your site make sure that they include testing with disabled people because they will often find issues that are not picked up by "experts" or the W3C guidelines. It is also, probably, worth avoiding companies that offer to rebuild your site for you, you will never learn to maintain the site properly if you don't understand the practicality of accessibility by doing it yourself.