Web and Mobile App Accessibility Testing

4/23/15

1

1

WEB AND MOBILE APP ACCESSIBILITY TESTING NANCY KASTL, SPR CONSULTING

STRATEGY BUILD INTEGRATE TEST MANAGE

Our mission is to make enterprises more efficient.

Our

E

xper

tise

MOBILE DATA CLOUD SOCIAL

Our Services

4/23/15

2

LEARNING OBJECTIVES •  What is app accessibility.

•  Laws in place and lawsuits filed.

•  How people with disabilities access apps.

•  Difference between accessibility compliance and usability.

•  How following standards can make content accessible and usable.

•  Ways to build and test for accessibility throughout a project.

1

DISABILITY STATISTICS •  56 million people with disabilities. 25.2 million adults have problems

seeing. (US)

•  124 million people with low vision and 37 million people legally blind. (world-wide)

•  1 in 28 Americans older than 40 years have low vision.

•  Diabetes is the leading cause of new cases of adult blindness. 28.5 million children and adults have diabetes. (US)

•  According to Diversity Inc. people with disabilities represent about $220 billion in aggregate spending power.

2

4/23/15

3

WHAT IS APP ACCESSIBILITY

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, Director World Wide Web Consortium

LAWS REGARDING ACCESSIBILITY

•  Section 508 of the Rehabilitation Act of 1973 Applies to electronic and information technology (including apps) developed by the Federal Government and for federal agencies.. www.section508.gov.

•  RIN 1190-AA61 Notice of Proposed Rulemaking Potential Department of Justice revision to ADA regulations. Goods, services, facilities, etc. offered by public Internet sites must be accessible. http://www.reginfo.gov/

4

4/23/15

4

LAWSUITS FILED National Federation of the Blind (NFB) vs. Target Corporation

February 2006. Target $6 million settlement and $ 3.7 million in attorney’s fees.

Ramada.com and Priceline.com vs. New York Attorney General Eliot Spitzer

Ramada $40,000 and Priceline $37,500.

National Association of the Deaf, et al vs. Netflix

June 2011. Netflix paid plaintiffs’ attorneys’ fees $755,000.

Kit Lau vs. Charles Schwab & Co. Inc.

October 2011. Charles Schwab agreed to implement WCAG 2.0.

National Federation of the Blind (NFB) vs. HRB Digital LLC

March 2014. H&R Block paid $55,000 to the DOJ and $45,000 to the plaintiffs.

5

ASSISTIVE TECHNOLOGIES Screen Reading Software Job Access with Speech (JAWS) by Freedom Scientific.(desktop)

Window-Eyes by G. W. Micro (desktop) VoiceOver by Apple (desktop & mobile) TalkBack by Google (mobile)

Screen Magnification Software

ZoomText by AI Squared Magic by Freedom Scientific

Voice Recognition Software Dragon Naturally Speaking by Nuance Communications

6

4/23/15

5

ACCESSIBILITY ON MOBILE

•  Accessibility option is in settings. •  Single tap to hear item on screen described. •  Double tap to select the item. This is the same as a single tap for

a sighted user. •  Some gestures use more than one figure. •  Swiping is up and down using two fingers. •  Swiping left to right with three fingers moves from screen to screen. •  Powering off does not reset accessibility.

Try it ….. to experience it!

7

COMPLIANCE VS. USABILITY •  Compliance to accessibility standards helps to make the application

usable.

•  A compliant application can still have usability issues. A non-compliant application will always have usability issues.

•  Test for both compliance and usability.

•  Usability criteria and ratings (good, fair, poor) - Ease of screen navigation - Ease of finding information - Ease of understanding information - Ease of entering information - Ease of understanding screen structure

8

4/23/15

6

EXAMPLE USABILITY CONSIDERATIONS ü  Skipping over content and parts of a screen to get to content ü  Going back to previous content on a screen ü  Moving back and forth to related screens ü  Understanding the organization of information in tables ü  Using search capabilities within the app ü  Using form fields for entry, check boxes and radio buttons ü  Select items from drop down lists and combo boxes ü  Clarity of page and table headings

9

ACCESSIBILITY ORGANIZATIONS W3C

WAI

WCAG 2.0

Section 508

World Wide Web Consortium – International community that develops standards to ensure the web reaches its full potential.

Web Accessibility Initiative – Strategies, guidelines, resources to make the Web accessible.

Web Content Accessibility Guidelines-Recommendations to developers and authors on how to make Web content accessible.

Section 508 – Based on WCAG 2.0 but does not include all WCAG guidelines.

10

4/23/15

7

SECTION 508 BASED ON WCAG 2.0

Principle 1: Perceivable - Information and UI components must be recognizable by assistive technologies.

Principle 2: Operable - The user must be able to use navigation and other UI components.

Principle 3: Understandable - The user must be able to comprehend the information and how the UI works.

Principle 4: Robust - The content must be presented so that it can be interpreted reliably by a wide variety assistive technologies on multiple platforms and devices.

4 Guidelines 22 Success Criteria




11

SECTION 508 STANDARDS

Text Equivalents Multimedia Independent

of Color Independent

of Style Sheets

Image Maps

Data Tables Frames Flicker Text Only Page Scripts

Applets & Plug-Ins Forms Skip

Navigation Timed

Response

a b c d e - f

g - h i j k l

m n o p

12

4/23/15

8

SECTION 508 STANDARDS (a) Text Equivalent: A text equivalent for every non-text element shall be

provided (e.g., via "alt", "longdesc", or in element content).

(b) Multimedia: Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(c) Color: Pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

(d) Style Sheet: Documents shall be organized so they are readable without requiring an associated style sheets. (not applicable to native mobile apps)

Section 508 13

SECTION 508 STANDARDS (e) Image Maps: Redundant text links shall be provided for each active region

of a server-side image map.

(f) Image Maps: Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(g) Data Tables: Row and column headers shall be identified for data tables.

(h) Data Tables: Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Section 508 14

4/23/15

9

SECTION 508 STANDARDS (i) Frames: Frames shall be titled with text that facilitates frame

identification and navigation. (not applicable to native mobile)

(j) Flicker: Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(k) Text-Only Page: A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

Section 508 15

SECTION 508 STANDARDS (l) Scripts: When pages utilize scripting languages to display content, or to

create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) Applets & Plug-Ins: When a web page requires that an applet, plug-in or

other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

(n) Forms: When electronic forms are designed to be completed on-line, the

form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Section 508 16

4/23/15

10

SECTION 508 STANDARDS

(o) Skip Navigation: A method shall be provided that permits users to skip repetitive navigation links. (not applicable to native mobile)

(p) Timed Response: When a timed response is required, the user shall be

alerted and given sufficient time to indicate more time is required.

Section 508 17

ACCESSIBILITY DEVELOPERS GUIDELINES

Android: Making Applications Accessible | Android Developers http://developer.android.com/guide/topics/ui/accessibility/apps.html Accessibility Developer Checklist | Android Developers http://developer.android.com/guide/topics/ui/accessibility/checklist.html Apple: Accessibility Programming Guide for IOS: Making Your IOS App Accessible https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Making_Application_Accessible/Making_Application_Accessible.html

18

4/23/15

11

ANDROID DEVELOPER CHECKLIST Accessibility Developer Checklist http://developer.android.com/guide/topics/ui/accessibility/checklist.html

•  Describe UI controls meaningfully that do not have visible text •  Enable focus-based navigation for logical user actions •  Implement accessibility interfaces for custom view controls •  Provide secondary feedback method for audio feedback •  Use standard framework provided controls or enable TalkBack for custom

controls •  Avoid UI controls that are hidden or time fade-out; provide an alternative

interface •  Test accessibility by navigating app using directional controls and using

eyes-free navigation

19

APPLE ACCESSIBILITY GUIDE •  Make user interface elements accessible

- Custom individual views - Contents of custom container views

•  Supply accurate and helpful attribute information - Enhance default attribute information - Craft useful labels and hints - Identify appropriate traits - Define custom attribute information in interface builder - Define custom attribute information programmatically

•  Enhance the accessibility of table views •  Make dynamic elements accessible •  Make non textual data accessible

20

4/23/15

12

FULL LIFECYCLE ACCESSIBILITY

Requirements Architecture Design

Development Test Deployment Initiation

Project Management

Accessibility Requirements Awareness: Add accessibility requirements into the project’s scope and requirements. Create awareness of accessibility standards through training.

Accessibility Design Review: Early detection of non-compliance to accessibility standards. Perform an accessibility review of prototype, wireframes, or comps.

Accessibility Code Review: Using accessibility standards perform code walkthroughs. Correct non-compliance prior to testing.

Accessibility Testing: During QA testing or UAT, leverage screen reader technology to test the app against accessibility standards and evaluate usability. Report findings and suggest remediation.

Accessibility Audit: If the app or site is already launched, perform a formal audit and usability evaluation. Report audit findings against applicable standards.

21

ACCESSIBILITY TESTING

Automated Testing

•  Purchased Tools (Rational Policy Tester) •  Open Source Tools (Achecker, FAE, WAVE) •  Multiple Standards (Section 508, WCAG2.0) •  Violations vs. Warnings

Manual + Automated

•  Paired Testing (Blind & Sighted Testers) •  Open Source Tool •  Reconcile Findings •  Test Windows, PC, Mac •  Test desktop, tablet, phone

Manual Testing

•  Screen Reader (desktop and mobile) •  Native Users (Visually impaired) •  Standards Compliance •  Usability

22

4/23/15

13

EXAMPLE USABILITY SUMMARY

Screen Name iPhone iPad Android Phone Android Tablet

1 Screen Name 1 Good Good Fair Fair

2 Screen Name 2 Poor Poor Poor Poor

3 Screen Name 3 Good Good Good Good

4 Screen Name 4 Poor Poor Poor Poor

5 Screen Name 5 Good Good Fair Fair

6 Screen Name 6 Good Good Good Fair

7 Screen Name 7 Good Good Good Fair

8 Screen Name 8 Good Good Poor Fair

9 Screen Name 9 Good Poor Good Poor

10 Screen name 10 Poor Good Good Good

23

EXAMPLE DETAILED COMPLIANCE

ID Sec6on 508 Compliance Guideline Descrip6on

Compliance

Ra6ng iPhone

Compliance Ra6ng Android Phone

Compliance

Ra6ng ipad

Compliance Ra6ng

Android Tablet

A Offer Text Equivalents 5 5 5 5

C Remain Independent of Color 10 10 10 10

G Label Row and Column Headers in Data Tables 10 5 10 5

H Use Header ARributes in Complex Tables NA NA NA NA

L Write Accessible Scripts NA NA NA NA

M Specify Accessible Applets and Plug-‐ins 0 0 0 0

N Design Accessible Forms 10 0 10 0

P Alert Users to Timed Responses 0 0 0 0

24

4/23/15

14

YOUR ROLE IN ACCESSIBILITY Project Sponsor

Project Manager

Business Analyst

Support and fund accessible web & mobile applications.

Include app accessibility in project charter. Add app accessibility activities in project plans. Gather and document app accessibility requirements.

Architect / Designer

Developer

QA Tester

Follow accessibility developer guidelines. Use screen readers during unit testing.

Add accessibility test cases to functional test plans. Perform screen reader tests on apps and sites.

Design apps to meet 508 standards and usability.

25

The power of the Web is in its universality. Access by everyone

regardless of disability is an essential aspect.

Tim Berners-Lee, Director, World Wide Web Consortium

Nancy Kastl Director, Testing Services Practice [email protected] 630.910.0589

26