Download Creating Accessible Web Pages

University Guidelines
for Creating Accessible Web Pages
Created By: IS
Page 1 of 17
Last Updated: 07/05/2017 16:25
Document Control
Change Record
Date
Author
Version
Change Reference
Issue1
First Release
04-JAN-2005
Julie Adams, Ian Jones
(Marketing), Janet
Weaver
Urszula Rayner
Created By: IS
Issue2
Page 2 of 17
Last Updated: 07/05/2017 16:25
Table of Contents
Introduction................................................................................................................... 4
How people with disabilities use the web ................................................................ 4
The World Wide Web Consortium Guidelines ........................................................ 5
Staffordshire University Guidelines .......................................................................... 6
Accessibility and Usability ...................................................................................... 6
What to consider...................................................................................................... 6
Background, text and colours ............................................................................ 6
Links and navigation ........................................................................................... 8
Frames .................................................................................................................. 8
PDF Documents .................................................................................................. 9
Shockwave, scrolling text, JavaScript, plug-ins, etc .................................... 10
Tables.................................................................................................................. 10
User interaction.................................................................................................. 10
Testing .................................................................................................................... 12
Creating text-only sites ......................................................................................... 13
More advanced testing ......................................................................................... 14
Using Style Sheets ................................................................................................ 14
Web site design for Dyslexic users .................................................................... 15
Getting further help ................................................................................................... 16
Resources .................................................................................................................. 17
Created By: IS
Page 3 of 17
Last Updated: 07/05/2017 16:25
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:
o
Magnification software
o
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
o the user may change settings in their browser to control the
size of the text
o the user may change settings in their browse to control the
colours displayed
o the user can use the keyboard only
o the user applies an individual style sheet to personalise the
pages
Created By: IS
Page 4 of 17
Last Updated: 07/05/2017 16:25
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 W3C is the recognised standards organisation of the
World Wide Web. Their guidelines (the Web Content Accessibility Guidelines)
are available on the W3C web site at
http://www.w3.org/TR/WAI-WEBCONTENT.
The WAI categorise the guidelines as follows:
Priority 1:
A page must satisfy this point. Otherwise, one or more groups
will find it impossible to access information in the document.
Priority 2:
A page should satisfy this point. Otherwise, one or more groups
will find it difficult to access information in the document.
Priority 3:
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:
Created By: IS

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
Page 5 of 17
Last Updated: 07/05/2017 16:25
Staffordshire University Guidelines
The Staffordshire University 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.
Created By: IS
Page 6 of 17
Last Updated: 07/05/2017 16:25

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:

o
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. "Staffordshire University logo".
o
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’ .
o
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.
o
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
Created By: IS
Page 7 of 17
Last Updated: 07/05/2017 16:25
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
Created By: IS
Page 8 of 17
Last Updated: 07/05/2017 16:25
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:
o
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.
o
Created By: IS
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 http://access.adobe.com/ is
available.
Page 9 of 17
Last Updated: 07/05/2017 16:25
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
Created By: IS
Page 10 of 17
Last Updated: 07/05/2017 16:25
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
Created By: IS
Page 11 of 17
Last Updated: 07/05/2017 16:25
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 http://bobby.watchfire.com/ or A-Prompt at
http://aprompt.snow.utoronto.ca/ .
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 http://validator.w3.org/
Created By: IS
Page 12 of 17
Last Updated: 07/05/2017 16:25
6. Install a text only browser
e.g. Lynx which is free and can be downloaded from the Web at
http://lynx.browser.org 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 textonly 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.
However, as there are already many pages in existence on the University
web-site it will not be possible to amend all of these immediately. The
guidelines should be followed whenever new sites are created or major
changes made to existing ones.
In order to make material on existing pages more accessible it will be
necessary to use text-only pages, at least in the short term. When you do add
a text-only link make sure it is located in the top left of the page so that it is the
first link a screen reader finds.
To save having to create text only pages yourself you can make use of a utility
called Betsie, which will produce a text only version ‘on the fly’. This uses
software created by the BBC and used on their own site. Betsie stands for
BBC Education Text to Speech Internet Enhancer.
You can add a link from your page to a section on the University web site that
will connect to the Betsie software. This has been tested on the University
site by Learning Development, who you can contact for further information
and guidance. See http://www.staffs.ac.uk/services/ldc/betsie.html.
You should note that Betsie should not be seen as the final solution, but a
way of making your pages more accessible in the short term. Betsie will also
not work on all pages, and there can be particular problems with some
JavaScript and some forms.
Created By: IS
Page 13 of 17
Last Updated: 07/05/2017 16:25
More advanced testing
More comprehensive checking can be undertaken by testing pages with
screen reader software used by visually impaired users. The screen reader
software used within the University is JAWS. This is installed on selected
PCs within the main IT Centre in the Octagon, Brindley and Cadman.
Information Services Support Desk staff can show you which machines to use
and how to start the software. Further information on specialist software used
within the University can be obtained from Disability Services.
Unfortunately, there are few free software packages to use for testing your
web pages. However, demonstration versions of some talking web browsers
can be downloaded from the web. These include IBM Home Page Reader
(http://www-3.ibm.com/able/hpr.html).
The W3C pages on Alternative Web Browsing
(http://www.w3.org/WAI/References/Browsing) also have information and
links to a number of assistive technologies.
Using Style Sheets
Cascading Style Sheets (CSS) is a simple mechanism for adding style (for
example fonts, colours, spacing) to Web documents. It is now the
recommended way to create web pages. It allows a single change to be made
to a style sheet which is then reflected on all pages which use that style sheet
– ie it cascades down to all pages.
Style sheets are useful for accessibility as they allow users to override the font
and colour set by the page author to apply those which best meet their
needs. All web page authors should try to start using style sheets on their
sites.
Although style sheets can be difficult to learn at first, there are lots of on-line
tutorials available. The W3C "learning CSS" page is a good starting point
(http://www.w3c.org/Style/CSS/learning)
The Netskills training materials, for which the University has a site licence,
also have modules on using style sheets (http://www.netskills.ac.uk).
Training in the use of style sheets is also available within the University from
Information Services.
Created By: IS
Page 14 of 17
Last Updated: 07/05/2017 16:25
Web site design for Dyslexic users
Many of the guidelines above will apply to dyslexic users. However, there are
a few additional points provided by the British Dyslexia Association which
should be considered.
Research shows that readers access text at a 25% slower rate on a computer.
This should be taken into account when putting information on the web.
When a web site is completed, check the site and information for accessibility
by carrying out these simple checks.

Navigation should be easy and consistent. A site map is particularly
useful.

Do not include too much text on a single page – split this over
several shorter pages.

Use some graphics and pictures to break up text. However, bear in
mind that graphics and tables may take a long time to download
and large graphics make pages harder to read.

Where possible design web pages which can be downloaded and
read off-line. Try to ensure your pages print out clearly and fit easily
on an A4 page.

Moving text creates problems for people with visual difficulties.
It also creates a difficulty for text-reading software.

Contents links should show which pages have been visited.

Wherever possible try to use hyperlinks at the end of sentences,
rather than in the middle of block of text.

There is much variation in the colour preferences of dyslexic users.
However, often for many the use of a dark text on a pale
background can be helpful - for example dark blue on cream.

Avoid green and red/pink as these are difficult for colour-blind
individuals.
Created By: IS
Page 15 of 17
Last Updated: 07/05/2017 16:25
Getting further help
Some of the guidelines above may make recommendations which you are not
sure how to implement on your pages. Do not worry about this, as there are
ways to get further help.
Any searches on accessibility on the web will give many references to sites
with further information. Some sites which have been found to be helpful are
listed in the Resources section below.
Tech-Dis has been set-up to help support staff in FE and HE on issues
surrounding accessibility and usability. They offer resources, training and
information which all staff creating any on-line material will find useful. There
is also a JISCmail mailing list which you can subscribe to. Details of the sites
are in the resources section below.
Within the University support for staff is provided by Information Services. In
particular, the Learning Development team offer a range of workshops which
you may find useful. These include:

Accessibility and Usability

Cascading Style Sheets

Web Design using Dreamweaver
Learning Development staff have the expertise to provide detailed guidance
on producing accessible on-line learning materials as well as standard webpages.
The IT Support team can assist with purchases and installation of software
which you may need to create your pages.
If you require assistance or are unsure how the guidelines apply to you should
contact Information Services on ext 3800 in the first instance.
Created By: IS
Page 16 of 17
Last Updated: 07/05/2017 16:25
Resources
The following links can be used to learn more about various aspects of
accessible web design and support tools available.

RNIB Accessible web design site www.rnib.org.uk/access/welcome.htm

Web Accessibility Initiative (WAI) guidelines - www.w3.org/WAI/

WAI resources - www.w3.org/WAI/Resources/

W3C validation service for HTML - validator.w3.org/

W3C Cascading Style Sheets pages:
o Tutorial - www.w3c.org/Style/CSS/
o Validator - jigsaw.w3.org/css-validator/

W3C - Alternative Web Browsing:
www.w3.org/WAI/References/Browsing

Bobby accessibility checker - bobby.watchfire.com

TechDis – JISC funded service supporting FE/HE in all aspects of
technology and disabilities - www.techdis.ac.uk

TechDis mailing list archives www.jiscmail.ac.uk/lists/TECH-DIS.html

Staffordshire University Betsie page www.staffs.ac.uk/services/ldc/betsie.html

BBC Betsie Pages - www.bbc.co.uk/education/betsie

Adobe Accessibility pages - http://access.adobe.com

Web design for dyslexia - www.dyslexia.com/qaweb.htm

IBM Home Page Reader - http://www-3.ibm.com/able/hpr.html.
[Reproduced with permission from the "See it right" pack published by Royal National Institute of the
Blind (RNIB). Copyright RNIB 2001. To purchase the "See it right" pack in full visit the RNIB website
www.rnib.org.uk/seeitright or email cservices@rnib/org.uk ]
Created By: IS
Page 17 of 17
Last Updated: 07/05/2017 16:25