web and it accessibility testing
DESCRIPTION
Web and IT accessibility testing. Putting the pieces together Sharron Rush For AccessU at CSUN Feb, 2012. Learning Objectives. Understand accessibility standards and how to choose among them Learn to validate that web sites and applications meet standards Learn reporting techniques - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/1.jpg)
Creative Commons – some rights reserved Accessibility Testing
Web and IT accessibility testing
Putting the pieces together Sharron Rush
For AccessU at CSUNFeb, 2012
![Page 2: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/2.jpg)
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
![Page 3: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/3.jpg)
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
![Page 4: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/4.jpg)
Creative Commons – some rights reserved Accessibility Testing 4
Accessibility Standards
Section 508WCAG 2
…and there are others
![Page 5: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/5.jpg)
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
![Page 6: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/6.jpg)
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
![Page 7: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/7.jpg)
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
![Page 8: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/8.jpg)
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)
![Page 9: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/9.jpg)
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
![Page 10: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/10.jpg)
Creative Commons – some rights reserved Accessibility Testing
Why test for accessibility?
![Page 11: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/11.jpg)
Creative Commons – some rights reserved Accessibility Testing
Accessibility is user-centered
Content must be P.O.U.R– Perceivable– Operable– Understandable– Robust
![Page 12: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/12.jpg)
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.
![Page 13: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/13.jpg)
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
![Page 14: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/14.jpg)
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
![Page 15: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/15.jpg)
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
![Page 16: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/16.jpg)
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
![Page 17: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/17.jpg)
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
![Page 18: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/18.jpg)
Creative Commons – some rights reserved Accessibility Testing
I’ve chosen a standard, let’s get to work
![Page 19: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/19.jpg)
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
![Page 20: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/20.jpg)
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
![Page 21: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/21.jpg)
Creative Commons – some rights reserved Accessibility Testing
Let’s jump in!
• http://www.geocaching.comLet’s jump inhttp://www.geocaching.com/
![Page 22: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/22.jpg)
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
![Page 23: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/23.jpg)
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
![Page 24: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/24.jpg)
Creative Commons – some rights reserved Accessibility Testing
Screenshot of United Way Home page
http://worldwide.unitedway.org/
http://worldwide.unitedway.org/
![Page 25: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/25.jpg)
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
![Page 26: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/26.jpg)
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
![Page 27: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/27.jpg)
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
![Page 28: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/28.jpg)
Creative Commons – some rights reserved Accessibility Testing
Internet Explorer
List of alt text for images
• Using Accessibility toolbar, choose List Images
![Page 29: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/29.jpg)
Creative Commons – some rights reserved Accessibility Testing
IE Image List
• Images are listed in separate browser window with code, including alt text
![Page 30: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/30.jpg)
Creative Commons – some rights reserved Accessibility Testing
Firefox
List of alt text for images
• Using Accessibility Extension toolbar, choose List of images
![Page 31: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/31.jpg)
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.
![Page 32: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/32.jpg)
Creative Commons – some rights reserved Accessibility Testing
Internet Explorer
Replace image w/alt text
• Using Accessibility toolbar, choose Remove Images
![Page 33: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/33.jpg)
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
![Page 34: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/34.jpg)
Creative Commons – some rights reserved Accessibility Testing
Firefox
Replace image w/alt text
• Using Accessibility Extension for FF, choose Show Text Equivalents
![Page 35: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/35.jpg)
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
![Page 36: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/36.jpg)
Creative Commons – some rights reserved Accessibility Testing
FireEyes
Alt text for images
![Page 37: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/37.jpg)
Creative Commons – some rights reserved Accessibility Testing
Internet Explorer Color Contrast
Analysis
![Page 38: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/38.jpg)
Creative Commons – some rights reserved Accessibility Testing
Firefox Color Contrast
Analysis
![Page 39: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/39.jpg)
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes Color Contrast Analysis
![Page 40: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/40.jpg)
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
![Page 41: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/41.jpg)
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
![Page 42: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/42.jpg)
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes Features
• Issue Highlighting• Exportable
Reports• Built-in recording
capacity.• Content may be
divided into projects.
![Page 43: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/43.jpg)
Creative Commons – some rights reserved Accessibility Testing
Worldspace FireEyes Remediation
Built in remediation support for common issues.
![Page 44: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/44.jpg)
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
![Page 45: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/45.jpg)
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
![Page 46: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/46.jpg)
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.
![Page 47: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/47.jpg)
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
![Page 48: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/48.jpg)
Creative Commons – some rights reserved Accessibility Testing
JAWS screenreader www.freedomscientific.com
We heard JAWS earlier
![Page 49: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/49.jpg)
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
![Page 50: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/50.jpg)
Creative Commons – some rights reserved Accessibility Testing 5
0
Graphic of Worldspace findings, explanation in “Notes” section of this and next three slides
![Page 51: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/51.jpg)
Creative Commons – some rights reserved Accessibility Testing 5
1
Drilling down to auto report detail
![Page 52: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/52.jpg)
Creative Commons – some rights reserved Accessibility Testing 5
2
Screenshot of auto test report including graphs that illustrate compliance status
![Page 53: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/53.jpg)
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
![Page 54: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/54.jpg)
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
![Page 55: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/55.jpg)
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
![Page 56: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/56.jpg)
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
![Page 57: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/57.jpg)
Creative Commons – some rights reserved Accessibility Testing
Questions?
![Page 58: Web and IT accessibility testing](https://reader035.vdocuments.us/reader035/viewer/2022062314/5681362b550346895d9da64f/html5/thumbnails/58.jpg)
Creative Commons – some rights reserved Accessibility Testing
Thank you
You make all the difference!