Transcript accessTesting

Accessibility Testing
►
Code Validators – XHTML & CSS
►
Accessibility Validators – Page by Page
►
Listening to Your Pages
►
Screenreaders/Talking Browsers
►
Accessibility Reports
►
Practical Testing Plan
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
1
Valid Code
►
HTML & XHTML Validation http://validator.w3.org/
►
CSS Validation http://jigsaw.w3.org/css-validator/
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
2
Accessibility Validators - Page by Page
►
WebXact
►
The Wave
►
Web Developer for Firefox (extension)
►
Accessibility Toolbar for IE
Accessibility Testing Requires the Human Brain
Approximately 27% of Accessibility Issues can be tested automated
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
3
Accessibility Validators - Page by Page
Tool
WebXact
+
-
*New tool from the folks at Watchfire
(replaces bobby)
►
Doesn’t have visual info you used to
get from Bobby
►
Excellent resource
►
Wave
Good for seeing “reading order” & alt
text
►
Report not as intuitive
►
Doesn’t explain how to solve problems
►
Great tool that combines many
accessibility validators and simulations
Accessibility Toolbar
►
Web Developer Toolbar
►
Copyright © 2005 Knowbility, Inc.
Fantastic tool that combines many
accessibility tools
Only available on PC/IE
►
Only available in Firefox
►
Accessible Web Design Techniques
4
Evaluation of Free Accessibility Tools
►
www.webaim.org/techniques/articles/freetools/
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
5
Testing a Site
http://www.geocaching.com
►
►
WebXact – webxact.watchfire.com
►
The Wave - www.wave.webaim.org
►
Web Developer Toolbar for Firefox
https://addons.mozilla.org/extensions/moreinfo.php?id=60
►
Accessibility Toolbar for IE
http://www.nils.org.au/ais/web/resources/toolbar/
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
6
Listening to your pages
The real test – can users with disabilities actually use
your site?
Two examples of assistive technology
•JAWS by Freedom Scientific – popular screen reading software. Uses internal
speech synthesizer and computer’s sound card to read info from computer screen
aloud. www.freedomscientific.com
•Home Page Reader by IBM – a web access tool for blind and low vision users.
www.ibm.com/able/
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
7
Demo of Home Page Reader
►
Home Page Reader – a talking browser
►
►
Listen to UT Home Page
►
Link Lists
►
Skip to Main
Listen to Dreamworks
►
►
http://www.dreamworks.com/
Listen to Marvin Garden’s
►
http://www.thegarden.com
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
8
Demo of JAWS
►
JAWS – a true screenreader for PCs
►
►
►
Listen to UT Home Page
►
Links on page
►
Link Lists – alpha and page order
Listen to Dreamworks
►
►
reads IE, Word, Excel, Powerpoint, Desktop…
http://www.dreamworks.com/
Listen to Marvin Garden’s
►
http://www.thegarden.com
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
9
Hands On Exercise
Listening to a Web page
►
►
Assistive Technology Demonstration
Handout
Listen to the Knowbility Site using JAWS
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
10
Testing Your Site(s) - Running Reports
►
►
What site(s) do you need to test
►
_______________________
►
_______________________
Open a browser and run the home page of your
site(s) thru
►
webxact.watchfire.com
►
http://validator.w3.org/
Internet connection here can get busy. We will run these reports now and then come
back and review them later in class.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
11
LIFT Machine
►
Tests entire sites for accessibility
►
Builds accessibility reports
►
Results by checkpoints
►
Checkpoints expanded
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
12
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
13
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
14
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
15
A Practical Testing Plan
Test with your browser
1.
‣
Turn off images, Don’t use the mouse, Turn off your speakers,
Increase font size, Change window size.
Testing with Toolbars
2.
‣
Turn off CSS, Turn off Javascript, Set to Greyscale, Display
Structure (Headings, Lists…)
Run online Accessibility Tests on representative pages
3.
‣
use more than one tool, example: WebXact & Wave
Listen to your pages
4.
‣
JAWS or HomePage Reader
5.
If you have access, Run a LIFT Report
6.
Hands on Accessibility Testing with Users who have disabilities
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
16
Hands On Exercise
Testing Tools
►
►
►
Apply the practical testing plan on the previous page to
your web site starting with your home page.
Open excel to keep track of the issues you find.
Create a columns for the following:
►
►
►
►
►
►
►
►
Copyright © 2005 Knowbility, Inc.
URL
Problem
Line number(s)
Solution
Comments
Priority
As time permits, select another representative page of your
site and continue testing.
Send the excel spreadsheet to yourself in an email
Accessible Web Design Techniques
17