Transcript Web Site Accessibility

Web Site Accessibility
Ian Senior
November 2004
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.
The problem
 1 in 10 visitors is disabled in some way.
Access is impeded by not allowing for
people:
 with forms of colour-impaired vision
 slow modems and lines
 turning off graphics
 who find it hard to read long sentences
The problem (2)
 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
 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
technologies like:
Synthetic speech (screen reader)
Paper printout
Dynamic braille
Keyboard only
Text-mode browsers
Web-enabled cars
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
disability
Fail to provide reasonable adjustments for
disabled students.
SENDA
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.
This also applies to any teaching documents.
Australian legal case
Maguire vs Sydney Olympic Games
Failed to provide accessible site
Defence of ‘unjustifiable hardship’ rejected
$20,000 fine
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
does something
 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 was that?
Web Standards
World Wide Web Consortium (W3C). They
develop interoperable technologies to:
‘Lead the web to its full potential as a
forum for commerce, information,
communication and collective
understanding’
Web Accessibility Initiative (WAI)
W3C programme to:
Ensure web technologies support accessibility
Developing guidelines for accessibility
Developing tools to evaluate and facilitate
accessibility
Conduct education and outreach
Co-ordinating web design with R & D
WAI checkpoints
WAI have produced a list of checkpoints for web content
accessibility guidelines (WCAG) 1.0
This is a hierarchical structure consisting of three priority
levels:
 Priority 1 (level A)
 Priority 2 (level AA)
 Priority 3 (level AAA)
Priority 1
 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
Priority 2
 Achieving this level will remove more barriers to
accessibility although some students will still be
excluded.
e.g. Link form elements with their labels
Priority 3
 Satisfying this highest level will provide access for
the vast majority of disabled people.
e.g. Separate adjacent links with more than white
space
Aim high
What priority level should you 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 backgrounds
Keep sentences below 20 words
Use white space
 Say one thing at a time
XHTML
 Current standard for HTML and is a form of XML
(eXtensible Markup Language)
 Comes in 3 versions:
Strict document type definition (DTD)
Transitional DTD
Frameset 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
HTML – Standard page
 Give DOCTYPE DTD
 State document language
 If table used in page design use an empty summary
tag
 Include ‘skip navigation’ link
 Use headers for structure only – style through CSS if
necessary
 Consider a CSS approach to page layout
More HTML
TITLE attribute
describe a link
Acronym element
Abbreviation element
ACCESSKEY
TABINDEX attribute
cycle logically through links
Coding Accessible Graphics





Use ‘alt’ attribute on all images
Spacer image used in design only alt=“”
Graphics used as bullets alt=“*”
Information graphics should have sensible alt text
Use longdesc attribute for complex images e.g.
graphs, detailed images. Alternatively link image via
‘D’ text
Accessible Tables
 Make your table as simple as possible
 Add summary of information for data tables
 Associate table column & row headings with
cells
Attributes include: TH, ID, headers, scope
THEAD, TBODY, TFOOT also available
 Give your table a caption
 Check readability when linearized using Lynx or
Opera
Accessible Forms
Use clear language
Use form accessibility tags:
For, ID, name, label,
Group related items together
fieldset, optgroup and legend
Add hints to text boxes
Tools to aid compliance
 Evaluation tools
analyse pages and produce a report
 Repair tools
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 & Accessibility
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:
Turn on/off graphics
 Turn on/off CSS author & user versions
 Zoom in on text
 Turn on/off JavaScript
 Linearize tables
WAVE software
 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. Problems are indicated by error
images.
WAVE in action – poor site
WAVE in action – good site
Cascading style sheets
 Allow for
- font family: serif, sans-serif, cursive
- font size: tiny or huge
- colour, background and foreground
- white space around objects
- control link format
- borders around things
- to be controlled in one place
- allow the user to override it.
 Not all browsers implement CSS
properly (Netscape 4).
CSS Accessibility
Aids accessibility of a site by:
Used to separate style from structure
Can construct page
With CSS
Without CSS
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 provide a text only selection (same information,
different view)
 We are developing an automatic accessibility XSLT style
sheet to check our content before it goes online.
 We are developing methods to transform Word
documents into XML.
Conclusions
Accessibility is all about people being able to
obtain information regardless of their
circumstances.
 Legal requirement through SENDA
Write W3C compliant code
Use XHTML strict DTD as your starting level
Aim for priority 2 as a standard
Use CSS for site style
 Use the validation tools from W3C and others to
check site compliance.
Useful sites
 Web Accessibility Initiative
http://www.w3c.org/WAI/
 W3 Consortium http://www.w3c.org
 TechDis (JISC Funded) http://www.techdis.ac.uk/
 RNIB http://www.rnib.org.uk/digital/
 Check your understanding of colour blindness
http://vischeck.com/
Validators & other tools
 Site Viewing Tool
http://www.anybrowser.com/siteviewer.html
 HTML Tidy Tool
http://www.w3c.org/People/Raggett/tidy/
 HTML Validator
http://validator.w3.org/
 CSS Validator
http://jigsaw.w3.org/css-validator/
Checking tools
 Wave
http://www.wave.webaim.org/index.jsp
 Bobby
http://bobby.watchfire.com/bobby/html/en/index.jsp
 Aprompt
http://aprompt.snow.utoronto.ca/
 Vischeck
http://www.vischeck.com/vischeck/vischeckURL.php
 Lift
http://www.usablenet.com/
Talk found at
http://users.ox.ac.uk/~ian/
PDF and PowerPoint versions available