Web and IT accessibility testing

Creative Commons – some rights reserved 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

WCAG 2.0

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

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

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.

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

…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

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

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

Let’s jump in!

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

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

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

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

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

Enterprise tools

• Automated testing and reporting• Manage accessibility across

enterprise• Multiple report formats, trend

analysis• Remediation prioritization• Track multiple divisions,

departments• Compare over time

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

Drilling down to auto report detail

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

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

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!

srush@knowbility.org

Web and IT accessibility testing

Documents

Transcript of Web and IT accessibility testing

Accessibility testing technology, human touch and value

Accessing Higher Ground: Practical Accessibility Testing

KS Accessibility Target & Testing Responsibilities

Web Application Accessibility Testing - IJSRP · 2017-03-31 · Web Application Accessibility Testing Archana Pandey * R&D Dept., Syscom Corporation Ltd. Abstract - Web Accessibility

Follett Accessibility Conformance Report Discover... · Follett Accessibility Conformance Report ... included manual accessibility testing, automated accessibility tools, and testing

Accessibility Requirements These slides are at goo.gl ... · 18F Accessibility Guide WAVE (free page accessibility testing tool) SortSite Desktop (paid site testing tool, including

Website Accessibility Testing Todd M. Weissenberger Web Accessibility Coordinator University of Iowa .

Hands-on accessibility...accessibility Testing methods overview Automated testing Manual testing User testing Automated testing Quick Not all errors need human eye Can review hundreds

Accessibility and the importance of user testing

Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.

Practical Accessibility Testing

Conducting your own Unified Testing for Accessibility ... Guide.pdf · The Unified Testing for Accessibility Project ... of the concept that the development teams ... Testing for

Website Accessibility Testing

Quick Testing for Web Accessibility UCCSC 2013

The 2020 ICT Accessibility Testing Symposium: Provisional ......Final Program Posted October 7, 2020 The 5th Annual ICT Accessibility Testing Symposium: Time for Testing in Testing

Experience IT: Testing IT For Accessibility

Accessibility Testing - Using Asqatasun - Meetup Webinar

Website Accessibility Testing Presented By:. Agenda.

Codefest2014 - Web Accessibility Testing Using NVDA

Accessibility testing-Gyani and Siddhanth