University Guidelines

for Creating Accessible Web Pages

Document Control

Change Record

Date / Author / Version / Change Reference
Julie Adams, Ian Jones (Marketing), Janet Weaver / Issue1 / First Release
04-JAN-2005 / Urszula Rayner / Issue2

Table of Contents

Introduction

How people with disabilities use the web

The World Wide Web Consortium Guidelines

Staffordshire University Guidelines

Accessibility and Usability

What to consider

Background, text and colours

Links and navigation

Frames

PDF Documents

Shockwave, scrolling text, JavaScript, plug-ins, etc

Tables

User interaction

Testing

Creating text-only sites

More advanced testing

Using Style Sheets

Web site design for Dyslexic users

Getting further help

Resources

Introduction

Designing an accessible web site is not only about making sure disabled people can access your information. Although this is important, you must also make sure everyone can access the information no matter what ‘device’ they are using to get to it.

People can now access the web in many ways:

  • Using personal computers and a variety of web browsers,
  • Internet enabled TVs
  • WAP phones
  • Hand-held computers

How people with disabilities use the web

Users with disabilities may use a variety of technologies to help them access information on the web.

  • A standard web browser + ‘access technology’ such as:
  • Magnification software
  • Screen reader software
  • Desktop braille display
  • Specialist browser
  • Other platforms (e.g. text only browser such as Lynx) + access technology
  • Other input devices (foot-controlled mouse, etc.)
  • No access technology, but
  • the user may change settings in their browser to control the size of the text
  • the user may change settings in their browse to control the colours displayed
  • the user can use the keyboard only
  • the user applies an individual style sheet to personalise the pages

The World Wide Web Consortium Guidelines

The definitive guidelines for accessible web design are those published by the Web Accessibility Initiative (WAI). The WAI are part of the World Wide Web Consortium (W3C). The W3Cis the recognised standards organisation of the World Wide Web. Their guidelines (the Web Content Accessibility Guidelines) are available on the W3C web site at

The WAI categorise the guidelines as follows:

Priority1:A page must satisfy this point. Otherwise, one or more groups will find it impossible to access information in the document.

Priority2:A page should satisfy this point. Otherwise, one or more groups will find it difficult to access information in the document.

Priority3:A page may address this point. Otherwise, one or more groups will find it somewhat difficult to access information in the document.

They also specify levels of conformance:

  • Level "A": all Priority 1 points are met
  • Level "Double-A": all Priority 1 and 2 points are met
  • Level "Triple-A": all Priority 1, 2, and 3 points are met

StaffordshireUniversity Guidelines

The StaffordshireUniversity guidelines are based on the WAI guidelines.These guidelines should be applied to all on-line material whether this is standard web pages or within an application such as Blackboard or COSE. Depending on what type of material you are producing not all of the guidelines may apply.

There is currently no requirement within the University for on-line material to meet a particular standard of accessibility as defined by the WAI. However, it is likely to become a requirement that pages meet a certain standard before they can be put on the University web server. Double A conformance (as mentioned above) is likely to become the recommended standard in most cases. Implementing the guidelines below will help meet this level.

Accessibility and Usability

Accessibility is generally related to the technical aspects of a site (the WAI guidelines). Usability is related more to the overall experience of using the site – how it looks and feels.

What to consider

The tips given here are an introduction to some of the issues that should be considered when designing for accessibility. Some of the recommendations involve making changes in the way you code the pages in HTML. Others recommendations are concerned with the design aspects of the page.

Design issues should be considered at the planning stage.

The guidelines are divided into sections covering different aspects of web sites structure and design. Depending on the style and complexity of your pages not all may be relevant to you.

Background, text and colours

  • Choose a background that is a single, solid colour. Avoid loud textures, patterns or images.
  • The choice of background and foreground colours is not as important as the contrast between the background and the text. Contrast is important as this affects the readability of the information on the page.
  • Ensure that your chosen colour scheme can be over-ridden by the user's browser settings.
  • Avoid, if possible, the use of graphics in place of actual text. Text size and colour can be changed by the user's browser settings, but a graphic is fixed, and can't be changed in this way.
  • Avoid large blocks of italic text.
  • It is not necessary to use a large font size on your page. Standard (medium) size text is fine but avoid very small text. However, you must enable users to change the font settings themselves within the browser. Ensure that you use relative font sizes in your code (i.e. %), not absolute font sizes
  • Don't underline large blocks of text. Underlining usually indicates hyperlinked text.
  • Capitalisation of whole sentences should be avoided.
  • Use HTML headings appropriately. Don't use headings just to increase text size, and don't use bold or a larger font size to simulate headings. Images
  • The alternative text attribute (ALT text) of the image tag is used to provide a description of the image for people accessing the page in a non-graphic way (e.g. text only browser or with a screen reader). The ALT text should describe what is important or relevant about the image:
  • If what is important is the actual content of the image, the ALT text should consist of a brief description of the image, e.g. "StaffordshireUniversity logo".
  • If the image is essentially functional (e.g. a hyperlink or a button) the ALT text should reflect the function e.g. ‘Search’, ‘Submit’, ‘Home page’ .
  • If the image is a bullet or a horizontal section divider, the ALT text should be a text representation of the same thing, e.g. " - " or " # " for bullets, or " - - - " for a divider.
  • If the image is used only for visual layout (e.g. "spacer" images), the ALT text should be set to read "*". This will let the user know that the image contains no information and performs no relevant function. They are not left in the position of knowing the image exists but being unsure of what it might contain or do. The use of a space (ALT=” “) or empty ALT tag (ALT=””) can also be used. The only problem with this is that some older screen readers ignore this, although newer versions accept this.
  • Longer descriptions of more complex images can be provided by using the LONGDESC tag, or by placing a "d" next to the image and linking that to a page containing the detailed description. Images which are likely to require this include graphs and maps.
  • The linked areas of image maps should always have meaningful ALT text, and text versions of the links should always be provided. Some screen readers will be able to make use of the ALT text, but not all software can handle image maps. This is why additional text links should be included.

Links and navigation

  • All links should contain enough useful information about their destination that they make sense on their own. Do not use the same link text more than once on a page when the destination of the link is different.
    Links should not be located directly next to each other. Separate groups of links with text (e.g. the bar character " | ") or a graphic.
  • If you have used graphics of text as links, provide text based links as well.
  • Always include a meaningful title on every page and never leave the title at the default ‘untitled’ setting.
    For users of screen reader software and text-browsers the page title is the first item they hear or see. If there are a lot of identical links repeated at the start of every page, the title becomes a very important indicator as to which page is being accessed.
    If many pages share the same title, it becomes more difficult for the user to build a clear mental map of the site and to orient themselves within the site.
  • A text based site map will help visitors to get an impression of the layout of the site quickly, and will make it easier to navigate. Fully sighted people become lost on large sites too, so all users will benefit from this. Site maps can be particularly useful for dyslexic users.

Frames

Some people have difficulty navigating within frames, either because the frames are confusing or because the software they are using simply cannot read frames. Screen readers often have problems using frames.

  • When using frames, always offer meaningful NOFRAMES content for those people who cannot read framed information. Use NOFRAMES properly. A message saying "upgrade your browser" is of no help to someone using the most up-to-date version of a browser that simply doesn't handle frames.
    The NOFRAMES section should contain meaningful content with links to the other pages in your site, so that they can be accessed without frames.
  • Ensure that each frame has a sensible TITLE (in addition to the NAME) which gives a clear indication of the content to be found in that frame.
  • If possible, avoid using frames.

PDF Documents

Portable Document Format (PDF) is a popular way to make formatted documents available on the web. It is widely used in the University for staff and student information. The advantage of this format is that the design and formatting of the document is retained. It is also a quick way to get large and complex documents on-line.

However, PDF files are not accessible to some screen readers. Also as Acrobat Reader software must be installed to read PDF files, the files are inaccessible to those who do not have this installed.

  • If documents are provided as PDFs ensure that HTML or plain text versions are also available.
  • PDF documents are readable by blind people using screen readers in one of two ways:
  • Use the latest full version of Acrobat – version 7 – to create ‘tagged PDF’ files. These include HTML tags around the text, and ALT tags for images, enabling the screen readers to read these like normal HTML pages. Ideally all new PDF files should be created in this format.
    However, it should be noted that tagged PDFs are only created properly when the styles within applications such as MS Word are used. This may require a change in the way that software is used if it is known that a PDF file is to be created.
  • With the help of a utility called 'Access Adobe'. Access Adobe translates PDF into HTML or into a text email, making it readable by someone unable to access PDF in the usual way. You can use this to make existing PDF files accessible. Ensure that you give the URL of each PDF file and that a link to the Access Adobe website at is available.

Shockwave, scrolling text, JavaScript, plug-ins, etc

  • If you create web pages in which the content and functionality is presented in formats other than plain HTML, you may be excluding some people from your site. Not everyone has the desire or capability to download and use all scripts and plug-ins. Always provide plain HTML alternatives so that everyone can access the information and services on your site.
  • If you use a Flash movie as the way into a site, ensure that any meaningful content is available to users who can't access Flash, and make sure that a plain text link is available to enable users to access subsequent pages of your site. Embedding a "Skip intro" link in the Flash movie itself is of little use to anyone who can't access the movie!
  • Some browsers can't read JavaScript and may tell the visitor only that there is 'an unsupported script' on the page. Wherever JavaScript is used, ensure that the page functions correctly without the script, or that a parallel page which is JavaScript-free is available.
  • Take care with browser detection scripts. For example, don't automatically present a Flash version of a page because the script detects a user has a recent version of Internet Explorer 5 with Flash installed. They may still not be able to access the material in the movie. Some screen reader software works in conjunction with a "standard" browser but is unable to translate everything that the browser itself is able to handle. Always ensure that the user can select themselves how a page will be presented (e.g. by offering a choice between a Flash and a non-Flash version of a page).
  • Moving, blinking and auto-refreshing text is hard to deal with if you have poor sight and for dyslexic users - avoid all of these if you can.

Tables

  • Text based browsers generally can't display tables in the same way as graphical browsers. Usually, they will display the content cell by cell and row by row. As a result of this, it is important that you ensure that the page makes sense if the table content is presented in this "linear" way.

User interaction

Not everyone can use a mouse. If you can't see, you can't see where the mouse cursor is positioned on the page. If you have impaired mobility, you may not be able to hold the mouse, or manage the fine degree of control required for some mouse movements.

  • Don't require users to be able to click on a small or moving target in order to move to another page. Offer additional plain text links.
  • Give some thought to the tab order of the various links and items on the page. The default is the order in which these appear in the HTML code. In most cases, this is appropriate, but in some instances, it may make more sense for a different TAB order to be set up - you can do this using the TABINDEX attribute

Testing

There are a number of tests you can carry out on your pages to make sure they are accessible to a range of users

1.Turn off images from within the web browser.
This will show whether images are clearly labelled with meaningful ALT tags. If there are no or poor alt tags then your page will not be easily accessible to someone using a screen reader.

2.Try to change the colour and font settings within the browser preferences.
Users with a number of visual impairments may need to change these settings to best meet their own needs. They may need a larger font size, a different font face, or perhaps a different background colour to make the information easier for them to read.

3.Check the tabbing order of pages
For some users, using a mouse is either uncomfortable or impossible. The main way to navigate a page without using a mouse is to move around it using the keyboard.
In Internet Explorer or Netscape, pressing the Tab key moves you from one link to the next. To move back, press the Shift key and the Tab key at the same time. To activate a link, press the Enter key.
If a page is easy to navigate in this way, it is likely to work with screen readers as well.

4.Run your pages through an accessibility tool such as A-Prompt or Bobby.
A number of tools have been developed that will check your pages against key recommendations and give advice on the changes needed to make the page more accessible.

The two main tools that are recommended are Bobby which is available at or A-Prompt at .
Both these sites have guidelines on how to use the tools, as well as lots of additional information on accessibility. Bear in mind, however, that these are automated programs and can only test for some accessibility errors. The fact that a page passes the Bobby test does not guarantee that it is fully accessible.

5.Validate your pages.
Although writing valid HTML doesn't guarantee that your pages will be accessible, it is an important step in the process. Use the W3C validation service at

6.Install a text only browser
e.g. Lynx which is free and can be downloaded from the Web at and test your pages in that.

7.User testing
Whenever possible, ask a range of people with various abilities/ experience and disabilities to test your pages and give you

Creating text-only sites

If you follow these design guidelines then there should be no need to create a separate text-only version of your site. There can also be a problem with text-only sites as the text and graphic versions could contain different information, unless great care is taken. Using a database to store the text would prevent this, but this is complex to set up.