1 / 58

Web and IT accessibility testing

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

lucius-lancaster
Download Presentation

Web and IT accessibility testing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web and IT accessibility testing Putting the pieces together Sharron Rush For AccessU at CSUN Feb, 2012

  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

  3. 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

  4. Accessibility Standards Section 508 WCAG 2 …and there are others

  5. Role of Standards • Shared understanding of requirements among: • Consumers • Authoring Toolmakers • Developers • Makers of browsers and AT devices • “How to” Techniques and testing criteria for content creators

  6. 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

  7. WCAG 2.0 • www.w3.org/WAI/intro/wcag • Three levels of conformance • Technology neutral • Final release December 2008

  8. Components of Web Accessibility ATAG(authoring tools) 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) UAAG(user agent)

  9. 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

  10. Why test for accessibility?

  11. Accessibility is user-centered Content must be P.O.U.R • Perceivable • Operable • Understandable • Robust

  12. Learn about various disabilities and related accessibility requirements: Cognitive Auditory Motor Seizure and Neurological Visual Aging See Dive into Accessibility’s Tips by Disability, WebAIM’sConsidering the Users’ Perspective: A Summary of Design Issues, and W3C-WAI’s Web Accessibility and Older People. Understand Users’ Needs

  13. 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

  14. Know where testing fits in holistic plan …testing is just one (important) part of overall accessibility and customer service strategy

  15. Create testing template Choose a standard explicitly • Section 508 • WCAG 2 • Conformance Level A • Conformance Level AA • Other …reflected in procedures and materials

  16. 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

  17. Section 508 to WCAG2 Map • Created by Tom Jewett and Wayne Dick for CSUN 2009 http://www.tomjewett.com/accessibility/508-WCAG2.html

  18. I’ve chosen a standard, let’s get to work

  19. Choose reporting template Knowbilitystandard form Other reporting templates online Customized by request www.w3.org/WAI/eval/template.html

  20. Automated one-page tests • ACheckerhttp://achecker.ca/checker/index.php • The Wave http://wave.webaim.org/ • Worldspacehttp://tinyurl.com/Worldspace-onepage Results emailed to you by • AMP Expresshttps://amp.ssbbartgroup.com/express

  21. Let’s jump in! • http://www.geocaching.com Let’s jump in http://www.geocaching.com/

  22. Manual Testing with toolbars • Tools we use (and there are more…) • Accessibility Extension for Firefox • Accessibility Toolbar for IE • DequeWorldspaceFireEyes • FANGS • Jim Thatcher’s Favelets • Web developer toolbar

  23. 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

  24. http://worldwide.unitedway.org/ Screenshot of United Way Home page http://worldwide.unitedway.org/

  25. 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

  26. 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

  27. Deque’sWorldspaceFireEyes • 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

  28. Internet ExplorerList of alt text for images • Using Accessibility toolbar, choose List Images

  29. IE Image List • Images are listed in separate browser window with code, including alt text

  30. FirefoxList of alt text for images • Using Accessibility Extension toolbar, choose List of images

  31. Firefox Image List • Images are listed in alert window with alt text displayed and missing alt text highlighted in red.

  32. Internet ExplorerReplace image w/alt text • Using Accessibility toolbar, choose Remove Images

  33. IE Images Replaced • Images alt text is displayed with error message for missing alt in alert window that says “5 images without alt text

  34. FirefoxReplace image w/alt text • Using Accessibility Extension for FF, choose Show Text Equivalents

  35. Firefox Images Replaced • Alt text is displayed but you would have to remember where all the images had been to know which is missing

  36. FireEyesAlt text for images

  37. Internet Explorer Color Contrast Analysis

  38. Firefox Color Contrast Analysis

  39. WorldspaceFireEyes Color Contrast Analysis

  40. 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

  41. Functional accessibility • Developers can test • In the browser • With toolbar extensions • Modify in development • Basic techniques for development

  42. WorldspaceFireEyes Features • Issue Highlighting • Exportable Reports • Built-in recording capacity. • Content may be divided into projects.

  43. WorldspaceFireEyes Remediation • Built in remediation support for common issues.

  44. WorldspaceFireEyesScope • Define specific content to analyze • Select specific accessibility issues • Select events to record • Analysis of dynamic events

  45. WorldspaceFireEyesReading Order Analysis An example of how FireEyes calls out reading order errors, taken from the United Way Facebook page

  46. WorldSpaceFireEyesEvent 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.

  47. 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

  48. We heard JAWS earlier JAWSscreenreaderwww.freedomscientific.com

  49. Enterprise tools • Automated testing and reporting • Manage accessibility across enterprise • Multiple report formats, trend analysis • Remediation prioritization • Track multiple divisions, departments • Compare over time

  50. Graphic of Worldspace findings, explanation in “Notes” section of this and next three slides

More Related