Dive into Mobile Guidelines for Testing Native, Hybrid, and Web Apps Susan Hewitt, Accessibility Consultant, Deque Systems Jeanine Lineback, Accessibility Subject Matter Expert, Deque Systems

Today’s Objectives Identify key success criteria to test for mobile. Learn which testing techniques can be used for each success criterion. Understand how to use these techniques on native apps and mobile websites.

Which Guidelines Can You Use for Mobile? WCAG 2.0 Mobile Web Application Best Practices (WBAP) Mobile Web Best Practices (MWBP) iOS and Android Developer Specs

What Tools Do We Use? Screen readers (VoiceOver and TalkBack) Jim Thatcher’s Favelets Paul Adam’s Bookmarklets Desktop Browsers with a User Agent Manual testing Bluetooth devices

Headings Applicable Guidelines: WCAG SC 1.3.1, 1 Considerations: – Not all browsers and devices announce headings the same. – iOS & Android native apps won’t announce heading levels. – Safari on iOS and Firefox on Android will announce headings.

Headings – How to Test iOS (Native and Web) – Using VoiceOver, choose “Headings” in rotor or swipe through the page items one by one. – Expected behavior: Elements that should be headings are announced as such. Web content in Safari should also announce the heading level. Android (Web) – Navigate through page items with screen reader on. Elements that should be headings are announced as such. Web content in Firefox should also announce the heading level.

Tables Applicable Guidelines: WCAG SC Considerations: Act differently depending on device

Tables – How to Test iOS (both) – Using VoiceOver, navigate horizontally through data tables by flicking left and right through each data cell. Make sure column headers are spoken by VoiceOver. – Navigate vertically through data table cells by switching to the Vertical Navigation Rotor setting and flicking up or down. Make sure the row headers are spoken. Android (Native & Web in Firefox only) – Using TalkBack, navigate horizontally through data tables by flicking left and right through each data cell. – Users must hear the content of row and column headers announced with the content of each data cell.

Form Labels and Grouping Applicable guidelines: WCAG SC & Special considerations: Form input types may present different keyboards.

Form Labels – How to Test iOS (both) – Native: Using VoiceOver navigate through screen and make sure each form field is announced as such (and is the appropriate type) as well as having a descriptive label. Make sure the labels are visible to all users at all times (No placeholders for labels!) and programmatically linked to the field. Android (both) – Native (both) Using TalkBack navigate through the screen and make sure each form field is announced as as well as having a descriptive label. Make sure the labels are visible to all users at all times. (No placeholders for labels!) For groups of related form elements (i.e. checkboxes & radio buttons,) the labeled controls must be associated with their common grouping element.

Text Resize & Magnification Applicable Guidelines: WCAG SC 1.4.4, MWBP Considerations: Some browsers and native apps will override a user’s chosen method of resizing.

Text Resize & Magnification – How to Test Android and iOS expectations – Web: Users must be able to “pinch-and-zoom” to enlarge the screen. (Note, this will make it necessary to pan horizontally to see all content.) – Native: Apps should enlarge according to user font settings in the device.

Color Contrast Applicable Guidelines: WCAG SC 1.4.3, Considerations: Viewing the screen in different environments and light can make poor contrast even worse.

Color Contrast – How to Test Android and iOS – Native: Use colors designated in the style guide to check with a contrast tool. If the style guide is not available, take screen shots and test using photo software/eyedropper tools. Note that this may not yield completely accurate results. Android and iOS – Web: Test the contrast ratio in HTML by using an automated tool, examining the style guide or style sheet for hex codes.

Keyboard Navigation & Visible Focus Applicable Guidelines: WCAG SC 2.1.1, Considerations: Behavior varies between OS, Web vs. native, and browser.

Keyboard Navigation – How to Test Android & iOS – With screen reader off, navigate using a Bluetooth keyboard. – Expectation for iOS: Native: Content should be functional and navigable using keyboard commands. Web: Keyboard functionality in Safari is not accessible. – Expectation for Android: Content should be functional and navigable using keyboard commands in both native and Web apps.

Visible Focus – How to Test With screen reader off, navigate via a Bluetooth keyboard. Visible focus must always show around active elements. Expectations – Android, Web & Native: The active element with focus is always visible. – iOS native: Same as Android. iOS web will not show a visible focus.

Touch Target Size Applicable Guidelines: WCAG SC 2.1.1, Developer Specs Considerations: This guideline is in draft for addition as a WCAG advisory technique.

Touch Target Size– How to Test All – Best method: Style guide. Native apps: iOS active items should be at least 44by44px. Android, 48. Web view: Check padding in style guide to ensure there’s a measurement equal to roughly 9mm

Names, Roles, and Values Applicable Guidelines: WCAG SC Considerations: UI controls must allow AT to accurately relay information about their function and state to users. Use of custom controls is most likely to cause issues with this guideline. Examples: “Hamburger menus,” links vs. buttons, tabs

Name, Role, and Value – How to Test iOS and Android (Native and Web) – Using a screen reader, set focus to all user interface elements such as form fields, links, and scripted controls elements. Make sure the element’s name/label makes sense and is accurate. – Make sure the role spoken (link, button, etc.) matches the functionality of the element. – Make sure the state of the element is announced. (E.g. expanded/collapsed/dimmed/disabled. ) Note: this is broken in iOS 9.1.

References W3C WCAG Mobile Web Application Best Practices Mobile Web Best Practices New WCAG 2.0 Techniques Wiki tf/wiki/New_WCAG_2.0_Techniques tf/wiki/New_WCAG_2.0_Techniques

Keep In Touch Susan Hewitt Jeanine Lineback