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


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


Accessibility Standards

Section 508WCAG 2

…and there are others


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


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

http://www.section508.gov/


WCAG 2.0

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

http://www.w3.org/WAI/intro/wcag


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)


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

http://www.w3.org/WAI


Why test for accessibility?


Accessibility is user-centered

Content must be P.O.U.R– Perceivable– Operable– Understandable– Robust


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.

http://diveintoaccessibility.org/by_disability.html

http://webaim.org/articles/userperspective/

http://webaim.org/articles/userperspective/

http://www.w3.org/WAI/older-users/


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


…testing is just one (important) part of overall accessibility and customer service strategy

Know where testing fits in holistic plan


Create testing template

Choose a standard explicitly– Section 508– WCAG 2

• Conformance Level A• Conformance Level AA

– Other

…reflected in procedures and materials


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


Section 508 to WCAG2 Map

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

http://www.tomjewett.com/accessibility/508-WCAG2.html





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


Choose reporting template

Knowbility standard form

Other reporting templates online

Customized by request

www.w3.org/WAI/eval/template.html


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



http://wave.webaim.org/

http://tinyurl.com/Worldspace-onepage

http://tinyurl.com/Worldspace-onepage

https://amp.ssbbartgroup.com/express




Let’s jump in!

• http://www.geocaching.comLet’s jump inhttp://www.geocaching.com/


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


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

http://www.unitedway.org/worldwide


Screenshot of United Way Home page

http://worldwide.unitedway.org/




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

http://www.wat-c.org/tools/


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




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




Internet Explorer

List of alt text for images

• Using Accessibility toolbar, choose List Images


IE Image List

• Images are listed in separate browser window with code, including alt text


Firefox

List of alt text for images

• Using Accessibility Extension toolbar, choose List of images


Firefox Image List

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


Internet Explorer

Replace image w/alt text

• Using Accessibility toolbar, choose Remove Images


IE Images Replaced

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


Firefox

Replace image w/alt text

• Using Accessibility Extension for FF, choose Show Text Equivalents


Firefox Images Replaced

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


FireEyes

Alt text for images


Internet Explorer Color Contrast

Analysis


Firefox Color Contrast

Analysis


Worldspace FireEyes Color Contrast Analysis


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


Functional accessibility

• Developers can test – In the browser– With toolbar extensions

• Modify in development• Basic techniques for developme

nt

http://www.air-rallies.org/training/accessible_html/

http://www.air-rallies.org/training/accessible_html/


Worldspace FireEyes Features

• Issue Highlighting• Exportable

Reports• Built-in recording

capacity.• Content may be

divided into projects.


Worldspace FireEyes Remediation

Built in remediation support for common issues.


Worldspace FireEyes

Scope• Define specific

content to analyze• Select specific

accessibility issues• Select events to

record• Analysis of

dynamic events


Worldspace FireEyes

Reading Order Analysis

An example of how FireEyes calls out reading order errors, taken from the United Way Facebook page


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.


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


JAWS screenreader www.freedomscientific.com

We heard JAWS earlier


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


0

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


1

Drilling down to auto report detail


2

Screenshot of auto test report including graphs that illustrate compliance status


• 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

http://tinyurl.com/accessworks

http://tinyurl.com/accessworks


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


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

http://www.w3.org/WAI/eval/



http://webaim.org/standards/wcag/checklist

http://webaim.org/standards/wcag/checklist


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


Questions?


Thank you

You make all the difference!

[email protected]

mailto:[email protected]

web and it accessibility testing

Documents

powerpoint accessibility

testing process

wcag standard

standardscreative commons

testing criteria

web requirements

wcag2 standard

testing protocols appropriate