Web and IT accessibility testing
-
Upload
lucius-lancaster -
Category
Documents
-
view
29 -
download
0
description
Transcript of Web and IT accessibility testing
Creative Commons – some rights reserved Accessibility Testing
Web and IT accessibility testing
Putting the pieces together Sharron Rush
For AccessU at CSUNFeb, 2012
Creative Commons – some rights reserved Accessibility Testing 2
Learning Objectives• Understand accessibility standards and how to
choose among them
• Learn to validate that web sites and applications meet standards
• Learn reporting techniques
• Gain understanding of how various tools can be configured and used
• Understand value and limitations of auto testing
• Develop competence in creating testing protocols appropriate to organizational goals and standards
Creative Commons – some rights reserved Accessibility Testing
Agenda• Review accessibility standards• Develop testing matrix• Introduce manual testing tools• Use manual tools to perform tests
and record findings• Introduce automated testing tools• Discuss user testing
Creative Commons – some rights reserved Accessibility Testing 4
Accessibility Standards
Section 508WCAG 2
…and there are others
Creative Commons – some rights reserved Accessibility Testing
Role of Standards
• Shared understanding of requirements among:
o Consumerso Authoring Toolmakerso Developerso Makers of browsers and AT devices
• “How to” Techniques and testing criteria for content creators
Creative Commons – some rights reserved Accessibility Testing
Section 508
• www.Section508.gov • Web requirements are 16 rules• Some software requirements apply• Rehabilitation Act NOT the ADA• Refresh expected in 20?? to
conform closely to WCAG 2
Creative Commons – some rights reserved Accessibility Testing
WCAG 2.0
• www.w3.org/WAI/intro/wcag• Three levels of conformance• Technology neutral• Final release December 2008
Creative Commons – some rights reserved Accessibility Testing
Components of Web Accessibility
Diagram of the relationship between authoring and evaluation tools, Web content, and user agent tools such as browsers and assistive technologies. As each component adheres to common standards, accessibility and interoperability are improved. At the W3c, groups of experts work in collaboration on the
ATAG – authoring tools accessibility group;
WCAG – web content accessibility group; and UAAG – user agent accessibility group, and others.
WCAG(web
content)
ATAG(authoring
tools)
UAAG(user agent)
Creative Commons – some rights reserved Accessibility Testing
Global Standards
• WCAG - Web Content Accessibility Guidelines. International standards for the web
• ATAG - Authoring Tool Accessibility Guidelines. Vendor standards for interoperability
• UAAG - User Accessibility Guidelines for browsers and assistive technologies
• ARIA - Accessible Rich Internet Application research for emerging technologies
www.w3.org/WAI
Creative Commons – some rights reserved Accessibility Testing
Why test for accessibility?
Creative Commons – some rights reserved Accessibility Testing
Accessibility is user-centered
Content must be P.O.U.R– Perceivable– Operable– Understandable– Robust
Creative Commons – some rights reserved Accessibility Testing
Understand Users’ NeedsLearn about various disabilities and related accessibility requirements:
– Cognitive– Auditory– Motor– Seizure and Neurological– Visual– Aging
See Dive into Accessibility’s Tips by Disability, WebAIM’s Considering the Users’ Perspective: A Summary of Design Issues, and W3C-WAI’s Web Accessibility and Older People.
Creative Commons – some rights reserved Accessibility Testing
Testing for Accessibility
• Structure based on internal policies• Specific protocols will depend on
goals• Should be part of overall QA• Will be iterative• Can improve user experience for
all
Creative Commons – some rights reserved Accessibility Testing
…testing is just one (important) part of overall accessibility and customer service strategy
Know where testing fits in holistic plan
Creative Commons – some rights reserved Accessibility Testing
Create testing template
Choose a standard explicitly– Section 508– WCAG 2
• Conformance Level A• Conformance Level AA
– Other
…reflected in procedures and materials
Creative Commons – some rights reserved Accessibility Testing
International• Canada has Common Look and
Feel for the Internet• Philippines has PWAG Web Design
Accessibility Recommendation (WDAR) Checkpoints
• UK has Web Accessibility Code of Practice
• Some European countries remain with WCAG1
• Companies develop internal standards
Creative Commons – some rights reserved Accessibility Testing
Section 508 to WCAG2 Map
• Created by Tom Jewett and Wayne Dick for CSUN 2009 http://www.tomjewett.com/accessibility/508-WCAG2.html
Creative Commons – some rights reserved Accessibility Testing
I’ve chosen a standard, let’s get to work
Creative Commons – some rights reserved Accessibility Testing
Choose reporting template
Knowbility standard form
Other reporting templates online
Customized by request
www.w3.org/WAI/eval/template.html
Creative Commons – some rights reserved Accessibility Testing 2
0
Automated one-page tests• AChecker
http://achecker.ca/checker/index.php
• The Wave http://wave.webaim.org/
• Worldspace http://tinyurl.com/Worldspace-onepage
Results emailed to you by
• AMP Express https://amp.ssbbartgroup.com/express
Creative Commons – some rights reserved Accessibility Testing
Let’s jump in!
• http://www.geocaching.comLet’s jump inhttp://www.geocaching.com/
Creative Commons – some rights reserved Accessibility Testing 2
2
Manual Testing with toolbars
• Tools we use (and there are more…) Accessibility Extension for Firefox Accessibility Toolbar for IE Deque Worldspace FireEyes FANGS Jim Thatcher’s Favelets Web developer toolbar
Creative Commons – some rights reserved Accessibility Testing
Let’s try it out!
• Visit www.unitedway.org/worldwide • Open the site in both browsers (IE
and Firefox)• Step by step through the features
Creative Commons – some rights reserved Accessibility Testing
Screenshot of United Way Home page
http://worldwide.unitedway.org/
http://worldwide.unitedway.org/
Creative Commons – some rights reserved Accessibility Testing
Web Accessibility toolbar for IE
• Free tool for IE • Download http://www.wat-c.org/tools/ • Includes WAVE, contrast analyzers,
etc• Easy to use and report• Jim Thatcher’s Favelet’s are add-on
option
Creative Commons – some rights reserved Accessibility Testing
Accessibility Extension for Firefox
• Free Extension from University of Illinois• Download
https://addons.mozilla.org/en-US/firefox/addon/5809/
• Useful with Firefox Web Developer Toolbar
• Similar features, different presentation
Creative Commons – some rights reserved Accessibility Testing
Deque’s Worldspace FireEyes
• Free tool from Deque• Download at
http://www.deque.com/products/deque-labs/worldspace-fireeyes
• For developers, those who need to get to code level
• Powerful, customizable but somewhat more difficult UI
Creative Commons – some rights reserved Accessibility Testing
Internet Explorer
List of alt text for images
• Using Accessibility toolbar, choose List Images
Creative Commons – some rights reserved Accessibility Testing
IE Image List
• Images are listed in separate browser window with code, including alt text
Creative Commons – some rights reserved Accessibility Testing
Firefox
List of alt text for images
• Using Accessibility Extension toolbar, choose List of images
Creative Commons – some rights reserved Accessibility Testing
Firefox Image List
• Images are listed in alert window with alt text displayed and missing alt text highlighted in red.
Creative Commons – some rights reserved Accessibility Testing
Internet Explorer
Replace image w/alt text
• Using Accessibility toolbar, choose Remove Images
Creative Commons – some rights reserved Accessibility Testing
IE Images Replaced
• Images alt text is displayed with error message for missing alt in alert window that says “5 images without alt text
Creative Commons – some rights reserved Accessibility Testing
Firefox
Replace image w/alt text
• Using Accessibility Extension for FF, choose Show Text Equivalents
Creative Commons – some rights reserved Accessibility Testing
Firefox Images Replaced
• Alt text is displayed but you would have to remember where all the images had been to know which is missing
Creative Commons – some rights reserved Accessibility Testing
FireEyes
Alt text for images
Creative Commons – some rights reserved Accessibility Testing
Internet Explorer Color Contrast
Analysis
Creative Commons – some rights reserved Accessibility Testing
Firefox Color Contrast
Analysis
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes Color Contrast Analysis
Creative Commons – some rights reserved Accessibility Testing
Functional test criteria• Text alternatives for non-text content
includes graphics, audio, video etc• Keyboard access to all info and function• Logical reading order• No dependency on color alone• Separate presentation from meaning• Contrast of 4.5 to 1 or higher• Form controls, validation, error messages• Role, state, properties of dynamic elements
Creative Commons – some rights reserved Accessibility Testing
Functional accessibility
• Developers can test – In the browser– With toolbar extensions
• Modify in development• Basic techniques for developme
nt
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes Features
• Issue Highlighting• Exportable
Reports• Built-in recording
capacity.• Content may be
divided into projects.
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes Remediation
Built in remediation support for common issues.
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes
Scope• Define specific
content to analyze• Select specific
accessibility issues• Select events to
record• Analysis of
dynamic events
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes
Reading Order Analysis
An example of how FireEyes calls out reading order errors, taken from the United Way Facebook page
Creative Commons – some rights reserved Accessibility Testing
WorldSpace FireEyes
Event Recording• Configurable script
event recording. • Events recorded
include the xpath• Content entries
and timings during replay can be adjusted.
• Record on development play back on QA or Production.
Creative Commons – some rights reserved Accessibility Testing
Testing with a screen reader
• Common method for understanding user experience.
• JAWS is expensive, demo is free• NVDA free open source for
Windows• SystemAccess from Serotek• FANGS is screen reader emulator
Creative Commons – some rights reserved Accessibility Testing
JAWS screenreader www.freedomscientific.com
We heard JAWS earlier
Creative Commons – some rights reserved Accessibility Testing 4
9
Enterprise tools
• Automated testing and reporting• Manage accessibility across
enterprise• Multiple report formats, trend
analysis• Remediation prioritization• Track multiple divisions,
departments• Compare over time
Creative Commons – some rights reserved Accessibility Testing 5
0
Graphic of Worldspace findings, explanation in “Notes” section of this and next three slides
Creative Commons – some rights reserved Accessibility Testing 5
1
Drilling down to auto report detail
Creative Commons – some rights reserved Accessibility Testing 5
2
Screenshot of auto test report including graphs that illustrate compliance status
Creative Commons – some rights reserved Accessibility Testing
• If usability is part of your process, include users with various disabilities
• Post to user groups• Remote testing through
AccessWorks http://tinyurl.com/accessworks
User testing
Creative Commons – some rights reserved Accessibility Testing 5
4
1. Choose a standard to test by2. Create shared reporting templates,
procedures3. Incorporate accessibility testing into
QA4. Run manual tests with multiple tools5. Listen to pages with a screen reader6. Run enterprise level auto tests if
available, monitor progress 7. Incorporate users with disabilities in
any user testing
Practical Testing Plan
Creative Commons – some rights reserved Accessibility Testing
Resources
• W3C – Web Accessibility Initiative How to Meet WCAG2
http://www.w3.org/WAI/WCAG20/quickref/
• Jim Thatcher.comTesting for Accessibility http://jimthatcher.com/testing.htm
• WebAIM’s WCAG2 ChecklistUnofficial guidancehttp://webaim.org/standards/wcag/checklist
Creative Commons – some rights reserved Accessibility Testing
We test so we don’t do this to our users
• Woman sits at computer with finger on mouse clicker. The screen says Repetitive Stress Injury – click here 100 times to enter
Creative Commons – some rights reserved Accessibility Testing
Questions?
Creative Commons – some rights reserved Accessibility Testing
Thank you
You make all the difference!