Transcript Accessibility - The University of Sydney

Accessibility and the web
Lecturer: Judy Kay
References:
Readings - W3C - Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WAI-WEBCONTENT/
Overview
• What is accessibility?
• Why you want to know about accessibility?
• W3C-WAI
– Guidelines
– Standards and conformance
• Automation
• Case studies
What is accessibility?
"The power of the Web is in its universality.
Access by everyone regardless
of disability is an essential aspect."
Tim Berners-Lee ,
W3C Director and Inventor of the World Wide Web
http://www.w3.org/WAI/wcag-curric/int2-0.htm
Usability is the extent to which
a product can be used by specified
users to achieve specified goals with
effectiveness, efficiency and satisfaction
in a specified context of use.
– Definition from ISO 9241-11
What is accessibility?
• Enabling web access to people with
disabilities…
• Web sites design so that people with
disabilities can use them effectively
• Browsers and media players
• Mesh with assistive technologies
• Authoring tools to produce accessible content
and for use by people with disabilities
Note: text small - hard for all to read and, next slide is what visually
Impaired users get
URL: http://www.nathan.com/
Blooper Category: navigation, accessibility, legibility
2001
http://deyalexander.com/blooper/report.php?id=20
Looks ok?
What is delivered
to blind user?
http://deyalexander.com/blooper/report.php?id=125
URL: http://www.melbfoodwinefest.com.au/
Blooper Category: accessibility, browser compatibility
2002
Fix: remove vacuous tags on layout images
Navigation links
Move across screen!
Vision impaired users?
Physically impaired?
http://deyalexander.com/blooper/report.php?id=149
URL: http://www.buddyleeattractions.com/
Blooper Category: navigation, accessibility
Date: 19 April 2002
Nature of disabilities
• Vision, blindness … low vision
– Problems with small visual elements
– Assistive technology reads site
• Hearing loss
– Problems with audio elements
• Physical limitations
– Challenges in keyboard input, assistive technology
• Cognitive and neurological
Nature of disabilities
• 10% of people with some disability eg
colour blindness…
• Context-dependent ‘disability’
– Noisy (audio)
– Screen glare (visual)
Roles for the Web
•
•
•
•
•
Digital libraries
Entertainment
News
Government services
Educational resources
The really good news?
• Good design helps everyone!
• Thinking about accessibility for those with
handcaps…
• Makes for sites that are more accessible to
others too
• Clarity over cuteness
Why you want to know about
accessibility?
Why you want to know about
accessibility?
• Important for millions of users with disabilities
• Generally results in better overall design
• Web is increasingly source of critical information
and services
• Legal requirements
• Financial merits
– For companies
– For you
Marketplace issues
• Disability is widespread already
• Aging population
• Potential legal costs
Overall approaches
• Good design for all
• Text is king
– For assistive technologies
– For search technologies
• Alternative modalities
– image plus text
– Audio + text caption
• Use of style sheets
W3C-WAI Guidelines
• 1. Provide equivalent alternatives to auditory and
visual content.
• 2. Don't rely on color alone.
• 3. Use markup and style sheets and do so properly.
• 4. Clarify natural language usage
• 5. Create tables that transform gracefully.
• 6. Ensure that pages featuring new technologies
transform gracefully.
• 7. Ensure user control of time-sensitive content
changes.
W3C-WAI Guidelines
• 8. Ensure direct accessibility of embedded user
interfaces.
• 9. Design for device-independence.
• 10. Use interim solutions.
• 11. Use W3C technologies and guidelines.
• 12. Provide context and orientation information.
• 13. Provide clear navigation mechanisms.
• 14. Ensure that documents are clear and simple.
W3C-WAI
• Priorities
– 1 must
– 2 should
– 3 may
Priority 1 guidelines
•
•
•
•
•
•
•
1.1 text equivalent of all visual elements
2.1 support interpretation of colour with other cues
4.1 clearly indicate changes of natural language
6.1 readable without style sheets
6.2 update dynamic equivalent with content
7.1 avoid flicker
14.1 clear, simple language matching purpose
Non-text elements:
•
•
•
•
•
•
•
•
•
•
1.1a - images and graphical buttons.
1.1b - graphical representations of text
1.1c - image map regions.
1.1d - animations (e.g., animated GIFs).
1.1e - applets and programmatic objects.
1.1f - ASCII art.
1.1g - a text equivalent for frames.
1.1h - scripts
1.1k-m - sounds, audio files (& in video)
1.1n - a text equivalent for video.
W3C-WAI standards,
conformance
•
•
•
•
The principles (see readings)
Apply them in your projects
Use as one set of heuristics
Examples
From
http://www.w3.org/WAI/wcag-curric/sam1-0.htm
1.1 text equivalent of all visual
elements
1.1a - text equivalent for
images and graphical buttons
Where this is a decoration:
• <IMG SRC="home.gif" ALT="
Drawing of a house .">
http://www.w3.org/WAI/wcag-curric/sam2-0.htm
1.1a - text equivalent for
images and graphical buttons
Where this is a link:
<A HREF="home.htm">
<IMG SRC="home.gif" ALT="Link to
the Home page."> </A>
1.1a - text equivalent for
images and graphical buttons
ALT is not enough:
Need text form available by some
means eg. Link to page with each
element described
http://www.w3.org/WAI/wcag-curric/sam3-0.htm
1.1d - text for animations (e.g.,
animated GIFs)
Explanation of animation:
<IMG SRC="ani-bal.gif" ALT="An
animated expanding and bursting
balloon.">
http://www.w3.org/WAI/wcag-curric/sam7-0.htm
1.1a - text equivalent for
images and graphical buttons
Images with text within:
<IMG SRC="wai.gif" ALT="Web
Accessibility Initiative">
http://www.w3.org/WAI/wcag-curric/sam11-0.htm
4.1 clearly indicate changes of
natural language
Mother, he's asking you to go.
He's saying, "Allons, Madame plaisante!"
Coded as:
Mother, he's asking you to go.
He's saying,
<SPAN lang="fr"> "Allons, Madame plaisante!"</SPAN>
http://www.w3.org/WAI/wcag-curric/sam40-0.htm
7.1 avoid flicker
Flicker
• Can cause seizures for some people with
epilepsy
• 4 - 59 Hz esp around 20 and esp changes
between light and dard
• Beware in design of gifs and similar
potential sources of flicker
• Movement is distracting for all - avoid it
Lower priority checkpoints
Eg 2.2
Ensure that foreground and background
color combinations provide sufficient contrast
when viewed by someone having color deficits
or when viewed on a black and white screen.
http://www.w3.org/WAI/wcag-curric/sam26-0.htm
Discussion
• Better for all
• Why only Priority 2?
– User has control of background at browser
W3C-WAI standards,
conformance
• 1.1 Text equivalent for every non-text element
–
–
–
–
–
–
Images
Graphical text
ASCII art
Images regions
Animations
Applets and other programmed elements….
• Use tags, alt, longdesc
Automation
• Ref:
• http://www.w3.org/WAI/ER/existingtools.html
• Evaluation - a static analysis report/rating for
accessibility.
• Repair tools - help author make problem
pages more accessible.
• Filter and transform tools - assist Web users
modify a page or supplement an assistive
technology or browser.
The browser as a tool
• Change the font to a larger size
• View pages without images
• View pages with styles sheets and pages
colours/fonts disabled
• View pages with an alternative, high contrast,
colour scheme
• Use the keyboard not the mouse to navigate
• Disable scripts, applets and/or plugins
• Try different browsers & versions
Colour checking
Colour Contrast
http://www.lighthouse.org/color_contrast.htm
Colour tester – colour blind
http://www.vischeck.com/
Legible text
http://www.lighthouse.org/print_leg.htm
Links
• Link checkers: non-existent URLs
• http://www.linkalarm.com/
• http://www.tetranetsoftware.com/
solutions/linkbot/looking-for-linkbot.asp
• http://www.cyberspyder.com/cslnkts1.html
• http://validator.w3.org/checklink
validators
• HTML Validator
– Eg W3C: http://validator.w3.org/
• CSS Validator
– W3C http://jigsaw.w3.org/css-validator/
• Commercial
http://www.usablenet.com/
https://www.cryptzone.com/products/contentgovernance/compliance-sheriff/accessibilitycompliance
Case study
• Australian University web sites
• Dey Alexander
Usability Specialist
IT Services Division
Monash University
• [email protected]
Challenges in accessibility
• Who creates web sites?
• What is their expertise in accessibility?
• The amateur factor
• Study of 4 main pages of 45 universities
WCAG 1.0 - 14 broad guidelines and 65
checkpoints
Following pages from Dey’s
online presentation
http://deyalexander.com/presentations/accessibility-universities/
Methodology
1. Pages viewed in IE 6
•
•
Screen was captured
Source was saved
2. Pages then viewed in IE 6 with stylesheet support
turned off
3. Pages then viewed using Delorie’s Web Page
Backward Compatibility Viewer
•
•
Once with stylesheet support turned off (simulates older GUI
browsers)
Once with scripting support turned off
Methodology (cont.)
4. Pages were viewed in Lynx 2.8.4
5. Screen capture of pages was taken with Delorie’s
Lynx Viewer
6. Pages were then checked with Webaim’s The
Wave
All pages were evaluated Jan 27 - Feb 15, 2003
So it is ok to share them now….
Research findings
• 98% (ie all but one) of Australian university sites
failed to meet all priority 1 WCAG 1.0
checkpoints
• 153 of the 180 pages failed on at least 1
checkpoint
• Most failures were against checkpoint 1.1 –
requirement to provide a text equivalent for nontext elements
– 138 page failures (across 98% of sites)
– Most of these (133 pages, 95.5% of sites) related to text
equivalents for images
Image-related checkpoint 1.1
failures
•
Seven types of problems were found (5 of these
were recorded as checkpoint failures)
1.
2.
3.
4.
5.
6.
7.
Text alternatives were not equivalent
Text alternative included unnecessary data
No text alternative – blank “alt” attribute
No Text alternative – no “alt” attribute
Background images with content
Decorative/layout images with unnecessary data
Decorative/layout images with no “alt” attribute
1. Text alternative not
“equivalent”
<img alt=“Orientation Week”> – no date given
<img alt=“Apply online”>
– no context (on or off campus)
given
41
pages
1. Text alternative not
“equivalent”
<img alt=“Staff directory”> – no
indication of restricted access was
provided
<img alt=“News”>
– no story details were given
1. Text alternative not
“equivalent”
<img alt=“ACU locations”> – as though the purpose of “alt” was for
meta data (info about the image, rather than an equivalent)
<img alt=“Location guide and Bond scenes ”>
– again, an apparent usage of alt=meta data
2. Text alternative includes
unnecessary data
21
pages
Image sliced in three – to align with three
navigation rows. Each slice has text alt of
“University of Western Australia”
Many images have text alt “Link to…”
3. No text alternative – blank
“alt” attribute
11
Link to enrolment information,
pages
but <img alt=“”> – no
information provided
Link to Orientation information,
but <img alt=“”> – no
information provided
4. No text alternative – no “alt”
65
pages
attribute
All images on this site: <img src=“filename.gif”>
– no “alt” attribute
5. Background image with
content
1 page
6. Layout image with
unnecessary data
53
pages
<img alt=“desert sand”> - not necessary and potentially confusing
Adding text alternatives
to spacer images can result
in annoying repetition of
useless information
7. Layout image with no “alt”
attribute
• Most common error of all
<img src=“spacer.gif”>
vs
<img src=“spacer.gif” alt=“”>
89
pages
Conclusions
• Results indicate that our sites are likely to present
significant accessibility problems for some users
• University web authors—including specialist web
teams—do not appear to have an acceptable
understanding of accessible web design techniques
• QA processes are either
– Not being adhered to
– Don’t include accessibility components
Acknowledgements on tools:
• Online presentations and sites:
• OZWAI site
– Jason White – Co-Chair, Web Content
Accessibility Guidelines Working Group
– Naomi Heagney – The Hiser Group
– Andrew Arch – Vision Australia Foundation