Using free online tools to check web pages for accessibility (presentation notes)

What is web accessibility?

Broad definition

an approach to web design that aims for maximal inclusion - of people and user agents

The concept of the web is of universal readership. If you publish a document on the web, it is important that anyone who has access to it can read it and link to it.
Tim Berners-Lee (inventor of the web)

Definition in common use

the ability for people with disabilities to access web content

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee

How do disabilities affect use of the web?

Visual impairments

Blindness
- can't see images and other non-text elements
- can't see the layout of data tables
- can't see the relationship between individual frames when used on a page
- can't use a mouse
- may use screenreaders, braille readers, text browsers with speech synthesizers
Low vision
- can't see image details, read small text
- may use screen magnifiers
- may use their own stylesheets
- may use the technology used by non-sighted users
Colour blindness
- can't identify or distinguish between some colours
- meaning conveyed by colour only may cause problems
- may use their own stylesheets
Remember also
- vision deteriorates with age, and the population is ageing

Mobility impairments

Loss of movement or strenght of limb, or loss of limb
Tremor, involuntary movement, loss of fine motor control
- pages with device dependent authoring techniques may cause problems (e.g. mouse-activitation)
- lack of keyboard-only navigation support may cause problems
- pages with small link targets may cause problems (e.g. small graphical navigation buttons)
- selecting form controls (checkboxes, radio buttons) may cause problems
- applications that time out quickly may cause problems
- may not be able to use a mouse
- may use adaptive technologies like specialised keyboards, pointing devices like a head mouse or mouth stick
Remember also
- fine motor control deteriorates with age, and the population is ageing
- any of us can have temporary mobility problems due to accident or illness

Hearing impairments

Deafness
Hard of hearing
- will need captions for audio or video soundtracks
- Auslan (or equivalent) may be the main language of a profoundly deaf person, therefore complex language might be difficult to understand
Remember also
- hearing deteriorates with age, and the population is ageing

Cognitive impairments

Learning difficulties
Reading difficulties
- these are often not recognised or diagnosed
- use of plain language would assist
- breaking text into manageable chunks is best
- supplementing text with illustrative graphics or audio can be useful
- consistent page/navigation design also helps

Seizure disorders

Flickering movements between 2-55Hz can cause problems
Blinking text and some audio frequencies can induce a seizure
Take care with animations, banner ads, etc.

References

Designing for accessibility

Why should we bother?

Our society values non-discriminatory practices and the promotion of human rights
We can do business with the whole community, not just those who can access our sites
Accessibility measures often improve design for all - "universal design"
Legal obligation within Australia to design for accessibility
- Disability Discrimination Act, Section 24
- tested in Maguire v SOCOG

How do we design for accessibility?

World Wide Web Consortium (W3C) have developed Web Content Accessibility Guidelines (WCAG) to assist web site developers
WCAG is an international standard for accessible web content design
- provides guidelines (and associated checkpoints and techniques)
- adopted as the Australian standard: HREOC recommends the use of WCAG in their "Advisory Notes"
- version 1 is current (since May 1999)
- version 2 is being developed

References

The Web Content Accessibility Guidelines 1.0

WCAG guidelines and checkpoints

14 guidelines
- e.g. Guideline 1. Provide equivalent alternatives to auditory and visual content
each guideline has one or more "checkpoints"
- e.g. Checkpoint 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video
checkpoints are divided into three priority levels:
- priority 1 is most important - the "must dos"
- priority 2 is highly desirable - the "should dos"
- priority 3 is desirable - the "may dos"

WCAG compliance

Level A: meets all priority 1 checkpoints
Level AA: meets all priority 1 and 2 checkpoints
Level AAA: meets all priority 1, 2 and 3 checkpoints

References

Evaluating the accessibility of your pages

Approaches to evaluation

audit for full compliance with WCAG
- requires time, but not as much as usability testing
- requires detailed knowledge of the
- requires technical know-how
undertake usability testing with groups of people with different disabilities
- takes a lot of time
- need to be able to recruit test participants from a range of disability groups
- need knowledge of usability test design and analysis
a simple evaluation using your browser and free online tools is the best way to start

Accessibility and quality assurance

Accessibility evaluation should be part of your quality assurance process
- not sufficient just to check accuracy of content
- need to check accessibility of content also

References

A simple audit process

This procedure can be used by non-technical web page authors. Even if you don't know how to correct the problems, you'll soon learn how to spot the potential accessibility barriers.

Look at your page using a graphical browser (like Internet Explorer or Netscape)
- override your styles and see if you can still read all the parts of the page
  (in Internet Explorer 6, select Internet Options, then in the General tab select Accessibility, and then check each of the options to override the author's formatting)
- turn off scripting and see if you can still use the page
  (in Internet Explorer 6, select Internet Options, then the Security tab, then select the Custom Level button and RESET custom security settings to high - use the Web Page Backward Compatibility Viewer if you can't get this to work)
Check your page using The Wave (more on this below)
Look at your page in a text browser, or a text browser emulator like Lynx Viewer (more on this below)
- read the text-only version out loud - does the content still make sense now that the visual elements are gone?
- are any text alternative for images repeated unnecessarily?
- are any decorative elements given an unneccessary text alternative?
- is the text used for all the links meaningful and unique?

Additional measures for the technically inclined

Using The Wave again
- ensure all link text is informative
- is the reading order of the document logical?
- check that structural formatting is correct
- check for device independence
- check form elements
Validate your page (if you're a web professional, this should be part of your standard quality assurance process)
- note the errors and correct them
- correct the first error and revalidate (often, fixing the first error will correct many subsequent errors)
Run a Bobby or Cynthia report
- both tools provide a written report, with sections covering the three WCAG priority levels
- inspect markup and correct

Some useful (and free!) evaluation tools

Evaluation tools

The Wave - my favourite tool, provides a visual inspection report
Lynx Viewer - emulates a text browser
Web Page Backward Compatibility Checker - emulates the limited functionality of older browsers
Bobby - well known evaluation tool, provides a written inspection report
Cynthia - a brand new tool (released March 2003), similar to Bobby in terms of reporting style

Simulators

Favelets/bookmarklets

Favelets (or bookmarklets for those of us who aren't as familiar with IE terminology) are small snippets of JavaScript embedded in a bookmark URL that allow bookmarks in browsers to run programs available on other web sites. The following are some accessibility-related favelets that you might like to try.

Using The Wave

About The Wave

Provides a quick visual inspection method
You don't need to be a geek to be able to understand the basics of the inspection report
Keeps getting better - in version 3 (February 2003) lots of new features have been added

3 ways to use the The Wave

Add a "bookmarklet" or "favelet" to your browser toolbar. You then navigate to a page you wish to check, and click on the bookmarklet. The inspection report will open in a new browser window
Go to The Wave web site and submit the address of the page you want to check
Go to The Wave web site and upload a page from your machine for inspection

Understanding The Wave inspection reports

Icons are used to provide information about the page. They have a colour code as follows:

Red icon indicates an error that needs to be fixed
Yellow icon is a warning that something may be wrong and needs checking
Green icons indicate accessibility features (they should be checked for accuracy)
Blue icons indicate structural or semantic markup and navigational elements (they should be checked for accuracy)

Basic accessibility issues reported by The Wave

When doing a simple evaluation, keep an eye out for the following icons:

shows the text alternative for an image

shows that no text alternative has been provided, e.g <img src="spacer.gif" alt=" "> This should only appear next to decorative or spacer images

indicates the text alternative for this image may not be meaningful

indicates that adjacent images have the same text alternative. Remove redundant text alternatives where necessary

indicates that the text alternative for the image repeats nearby text on the page. Remove the text alternative where necesssary

indicates that the image is a background image and if it conveys any information, this will have to be repeated on the page (since background images cannot have text alternatives)

indicates that the image has a missing ALT attribute, e.g. <img src="logo.gif">. All images must have an ALT attribute, even if it is left blank

indicates that this is a spacer image with a missing ALT attribute

indicates that a server-side image map is used. These should be avoided

indicates that a client-side image map is used. These should be used instead of server-side image maps

indicates that a data table is being used. This is fine, except when it refers to a layout table

indicates that a layout table is being used. This is fine, except when it refers to a data table

References

Wave icons and explanations

Demonstration of accessibility tools

Using your browser as an evaluation tool

Using various features of your web browser, you can perform some simple accessibility checks. The images below are screenshots of the same page (Avondale College) that show some of the things you can check.

Image 1: The Avondale College home page as displayed by Internet Explorer 6

Start off by looking at the page and noticing the content and elements it provides. On this page the navigation links are comprised mainly of images. The main navigation options have a drop down menu style generated by javascript, and we can see that there is a Flash news component, "Avondale Update".

Hint: right-clicking over a page element will indicate whether it is an image or Flash, rather than text.

Image 2: The Avondale College home page with stylesheets overridden

Notice now how it is now very difficult to read the options on the javacript-generated submenu. This would cause problems for users with low vision who have turned stylesheets off so they can either increase font sizes and/or contrast between text and background colours. Being able to read pages without the aid of stylesheets is a basic accessibility requirement.

Image 3: The Avondale College home page with scripting disabled

Notice now that though the mouse is hovering over the main navigation bar, the submenu hasn't appeared. What you can't see from the screenshot is that it is not possible to activate any of the main navigation options. Only the submenu options are links, but unfortunately these all rely on javascript. Being able to use a page when scripting is turned off is a basic accessibility requirement.

Using The WAVE as an evaluation tool

Image 4: The Avondale College home page analysed by The Wave

Now we see how this page looks when viewed with The Wave (note: the image shows only part of the screen). Notice all the red warning icons indicating that most of the images have no text alternative. A blind user trying to read this page with a screenreader would be able to access very little content. Again, this a basic accessibility requirement.

Using Lynx Viewer as an evaluation tool

Finally, by checking pages in a text browser or a tool that emulates ones, we can see the information that is available on the page when a user cannot see the images. This helps us determine if our text alternatives are correct and provide content equivalent to that provided by the images on the page.

Image 5: The Avondale College home page as viewed with Lynx Viewer

Meeting minimum requirements for accessibility

WCAG level A compliance is the minimum standard

The basic procedure outlined here does not check for all accessibility requirements
- It is a good starting point though
All 16 priority one WCAG checkpoints have to be met to provide a basic level of accessibility
- We should aim higher whenever we can
Using The Wave and othe free online tools is a good way to start making your site more accessible

2003 Monash Web Workshop Series