Web Site Accessibility
Aim of talk
To give an overview of the problem
To describe the legal situation
To show some good and bad practice
To point to some help
What is Accessibility?
Web content can be obtained and understood by
as many potential viewers as possible,
regardless of the user agent they employ or the
constraints under which they operate.
University of Buffalo NY State.
1 in 10 visitors is disabled in some way.
Access is impeded by not allowing for
with forms of colour-impaired vision
slow modems and lines
turning off graphics
who find it hard to read long sentences
who only have a 640 x 480 monochrome screen
unable to read small fonts
who prefer to use Linux
who cannot use a mouse
who cannot hear properly
oh, yes, and people who cannot see!
Ways to use the web
Remember that viewing sites with IE is not
the only way to use the web. Think of
Synthetic speech (screen reader)
Mobile phones and PDAs
The legal situation
The 1995 Disability Discrimination Act
(DDA) is relevant.
Since 1st September 2002, the Special
Educational Needs and Disability Act (SENDA)
has been in force. This act became part IV of the
DDA and bring higher and further education under
the protection of this legislation.
What does SENDA say?
SENDA makes it unlawful to:
Treat disabled people less favourably than their
non-disabled peers, for a reason relating to their
Fail to provide reasonable adjustments for
SENDA seeks to provide disabled students with access
to all the facilities and services of FE/HE organisation.
SENDA is an anticipatory Act, meaning organisations
have to adjust their working practices for disabled
people regardless of whether they are presently at the
organisation or not.
This means web sites have to be accessible to all
visitors and not just registered users.
Australian legal case
Maguire vs Sydney Olympic Games
Failed to provide accessible site
Defence of ‘unjustifiable hardship’ rejected
Case could be used in UK
There have been no legal test cases in the
UK so far.
Poor excuses for non-compliance
Sorry, I am not interested
We don't have any disabled people
We don't have the time or expertise
It's not my problem, I'll wait until everyone else
My system won't let me
No-one else is fixing their sites
I don't know what to fix
How not to help your visitors…
Who’s page is that?
World Wide Web Consortium (W3C).
They develop interoperable technologies
‘Lead the web to its full potential as a
forum for commerce, information,
communication and collective
Web Accessibility Initiative (WAI)
W3C programme to:
Ensure web technologies support accessibility
Developing guidelines for accessibility
Developing tools to evaluate and facilitate
Conduct education and outreach
Co-ordinating web design with R & D
WAI have produced a list of checkpoints
for web content accessibility guidelines
This is a hierarchical structure consisting
of three priority levels
Priority 1 (level A)
Priority 2 (level AA)
Priority 3 (level AAA)
This is the minimum level of accessibility
web developers should be working
towards. While this removes some
accessibility barriers, many disabled
students would still be excluded from
using a site.
e.g Use Alt tags on images
Achieving this level will remove more
barriers to accessibility although some
students will still be excluded.
e.g. Link form elements with their labels
Satisfying this highest level will provide
access for the vast majority of disabled
e.g. separate adjacent links with more than
What priority level should we achieve?
FE/HE institutions should regard priority 1
as the starting point for a web site.
Priority 2 is the standard level expected
Priority 3 is the ideal level
Basic web design issues
It is not hard to get the simple things right:
1. Be realistic: don't make technology assumptions
2. Don't be lazy and do it all with images
3. Don't use non-intuitive navigation aids
4. Make your site consistent
5. Use simple language
6. Provide text versions
7. Leave control of appearance to CSS
8. Structure your web pages correctly (H1 tags etc.)
Make consistency rules
Make house rules and stick to them. Keep
your pages consistent.
Create a visual identity that holds all your
pages together. This will help everyone.
Decide on a technology and make
everyone use it. Don't mix Flash and XML
and PDF in the same small site.
Dyslexia and cognitive disabilities
Write short sentences
Use consistent layout
Don't flash at people or use multi-coloured
Keep sentences below 20 words
Use white space
Say one thing at a time
Current standard for HTML
Comes in 3 versions:
Strict document type definition (DTD)
The strict DTD will produce a web site that
complies to all three priority levels, the other two
make compliance very difficult above level 1
Tools to aid compliance
analyse pages and produce a report
Identify and help to fix page problems
Filter and transformation tools
Assist web users by modifying a page or
supplement assistive technology or browser
Opera browser features
When developing a site it is helpful to
see how accessible your new site is.
A very quick way is to use Opera. This
has accessibility options:
• Linearize tables
• Turn on/off graphics
• Turn on/off CSS author & user versions
• Zoom in on text
Allows you to add a button to the links bar
of your browser.
Clicking the button opens up WAVE which
examines the page for accessibility.
WAVE home page
WAVE in action – good site
WAVE in action – poor site
HTML – Standard page
Give DOCTYPE DTD
State document language
If table used in page design use the
summary tag & ‘layout table’ text
Include ‘skip navigation’ link
Use headers for structure only – style
through CSS if necessary
Consider a CSS approach to page layout
describe a link
cycle logically through links
Use ‘alt’ attribute on all images
Spacer image used in design only alt=“”
Graphics used as bullets alt=“*”
Information graphics should have sensible
Use longdesc attribute for complex images
e.g. graphs, detailed images. Alternatively
link image via ‘D’ text
HTML - Tables
Make your table as simple as possible
Add summary of information for data tables
Associate table column & row headings with
Attributes include: TH, ID, headers, scope
THEAD, TBODY, TFOOT also available
Give your table a caption
Check readability when linearized using Lynx or
Use clear language
Use form accessibility tags:
For, ID, name, label,
Group related items together
fieldset, optgroup and legend
Add hints to text boxes
Make PDF documents more accessible using
Cascading style sheets
- font family: serif, sans-serif, cursive
- font size: tiny or huge
- colour, background and foreground
- white space around objects
- what links look like
- borders around things
- to be controlled in one place
- allow the user to override it.
Not all browsers implement CSS
properly (Netscape 4).
What are we doing?
We use XML to mark up our pages
We can deliver pages in different forms: PDF,
print ready, XML, HTML
We are developing a method to allow users
to select their own colour schemes
We provide a text only selection
We are developing an automatic accessibility
XSLT style sheet.
What are we going to do?
Make our tables more accessible
Make our forms more accessible
Try to future proof our site as much as
Accessibility is all about people being
able to obtain information from the web.
Legal requirement through SENDA
Write W3C compliant code
Use HTML 4.01 strict DTD as your starting level
Aim for at least priority 2 standard
Use CSS for site styles
Use the validation tools from W3C and
others to check site compliance.
Web Accessibility Initiative
TechDis (JISC Funded)
The RNIB's practical take on web access
Industry commentary on useability of web
Check your understanding of colour
Validators & other tools
Site Viewing Tool
HTML Tidy Tool
Talk found at
This talk is downloadable from:
PDF and PowerPoint versions available