Presentation is loading. Please wait.

Presentation is loading. Please wait.

Strategy for Native Mobile App Testing Methodology iOS vs Android

Similar presentations


Presentation on theme: "Strategy for Native Mobile App Testing Methodology iOS vs Android"— Presentation transcript:

1 Strategy for Native Mobile App Testing Methodology iOS vs Android
Jatin Vaishnav Chris McMeeking

2 Introductions Jatin Vaishnav Deque Systems Inc Chris McMeeking
Accessibility Engineer Deque Systems Inc Chris McMeeking © All Rights Reserved

3 Agenda Scope & Standards Manual Testing Methodology
iOS iOS API Accessibility Inspector VoiceOver Android Android API Device Monitor TalkBack Automated Testing Tools Demo Q&A © All Rights Reserved

4 Scope Type of App Native App Hybrid App Web App
Scope & Standards Scope Type of App Native App Hybrid App Web App © All Rights Reserved

5 Native App Hybrid App Native App: Easy to discover in app store (Apple app store or Google Play Store), App can access to device’s hardware/software (location, GPS, Calendar etc), due to better user experience-> user can quickly learn the app Hybrid App: Easy portability (one source code for multiple platform), Access to device’s hardware/software through plugin, cheaper cost and faster to market

6 Standards:Apply WCAG to Native app using web components
WCAG 2.0 can be applied to native apps, and hybrid apps using web components inside native apps © All Rights Reserved

7 Accessibility API iOS isAccessibilityElement accessibilityLabel
accessibilityTraits (role) accessibilityHint (accessible description) accessibilityValue accessibilityFrame © All Rights Reserved

8 Accessibility Inspector (iOS)
Target Chooser Inspection Pointer Inspection Audit Setting © All Rights Reserved

9 isAccessibilityElement VoiceOver Output Enable Touch ID image
Comments isAccessibilityElement=True doesn’t hide the decorative content from assistive technology. Solution: Accessibility Enabled property of the control is unchecked (false); Image will be ignored by VoiceOver and will not be focusable. © All Rights Reserved

10 isAccessibilityElement VoiceOver Output
Comments isAccessibilityElement=False makes the UI element invisible to assistive technology. Solution: Apply isAccessibilityElement=True. VoiceOver Output: "User ID text field double tap to edit” © All Rights Reserved

11 isAccessibilityElement
VoiceOver Output This is a music player heading plays music Comments Parent view is applied isAccessibilityElement=True; as a result users are not able to interact with individual accessible children. Solution: By removing the parent view from the list of “Accessibility Elements”, the buttons within become focusable. © All Rights Reserved

12 VoiceOver Output Image_5162 button image
accessibilityLabel VoiceOver Output Image_5162 button image Comments In absence of accessible label, the file name with it's trait is announced by VoiceOver. Solution: accessibilityLabel is set to Sign On VoiceOver Output: "Sign On button image " © All Rights Reserved

13 VoiceOver Output PieChart image
accessibilityLabel VoiceOver Output PieChart image Comments VoiceOver announces the accessible label and trait information however the accessible label doesn't have the exact information as shown in the graph. Solution: accessibilityLabel is set to "A Pie Chart Representing the percentage of death attributed to various catastrophes: Volcano 0.1% Epidemic 19.8% Famine 9.2% Storm 3.2% Earthquake 1.0% War 66.8%"; VoiceOver Output: "A Pie Chart Representing the percentage of death attributed to various catastrophes: Volcano 0.1% Epidemic 19.8% Famine 9.2% Storm 3.2% Earthquake 1.0% War 66.8% image" © All Rights Reserved

14 accessibilityLabel VoiceOver Output 5
Comments For Two-dimensional data tables the association between column header and /or row header with the data cell is not conveyed. Solution: There are no HTML like TH and TD mechanism in the native app. The association needs to be defined and conveyed for each data cell. VoiceOver Output: "Age Jackie 5” © All Rights Reserved

15 Comments Click Here styled like link but applied button traits.
accessibilityTraits (role) VoiceOver Output Click Here button Comments Click Here styled like link but applied button traits. Solution: In Native Apps Link traits let the VoiceOver user know that the element will open a URL outside of the app in their Safari iOS Web Browser whereas Buttons do not exit the user outside of the app. VoiceOver Output: ”Register Link” © All Rights Reserved

16 accessibilityTraits (role) VoiceOver Output Continue button
Comments disabled button has not applied the disable state, as a result user can interact with disable button Solution: Applied Traits are Button and Not Enabled. VoiceOver Output: "Continue dimmed button" © All Rights Reserved

17 accessibilityValue VoiceOver Output Thirty Percent Adjustable swipe up or down with one finger to adjust the value Comments The slider value is defined in percentages instead of scale of 1 thru 5 and the visible label is not associated with the slider. Solution: VoiceOver Output: "Customer Satisfaction (1-5) 1 - Not Satisfied 5 - Very Satisfied 1" © All Rights Reserved

18 Tools & Technologies Android
Android Device Monitor Android and TalkBack Wireless Keyboard WorldSpace Attest for Android (iOS Coming Soon) © All Rights Reserved

19 Device Monitor (Potential Demo)
© All Rights Reserved

20 Device Monitor Get more detailed information.
Help understand and debug issues. Not good for identifying issues. Omits properties!!! (labelFor, EditText hints)

21 TalkBack Android Screen Reader Useful Options: Display Speech Output
SingleTap Selection!!! Node Tree Debugging

22 EditText Boxes EditText controls are interesting because you can get all of the properties “correct” and still have them be very inaccessible. Text: (editable) Hint: “First Name” How would you make this accessible?

23 TalkBack on EditText Views
Here we have an EditText control. If I enter “Chris” what should the spoken text be? What is it going to be?

24 TalkBack on EditText Views
As you can see, we have lost some important information!

25 EditText View Fixed Best fix: labelFor attribute.
Use a visible (or hidden) label as the “labelFor” the control.

26 Automated Testing (Product Demo)

27 Automated Testing Integrate automated tests into your Agile Development process and catch and fix many accessibility issues in development. Save time by allowing your Usability and Accessibility experts to focus on things that matter and not trivialities.

28 Jatin Vaishnav Deque Systems Inc jatin@deque.com Twitter: @1vjatin
Q&A Thank You! Jatin Vaishnav Deque Systems Inc Chris McMeeking Deque Systems Inc © All Rights Reserved

29 Deque’s Full CSUN Schedule:
Sign up to receive presentation slides: Deque’s Full CSUN Schedule: @dequesystems


Download ppt "Strategy for Native Mobile App Testing Methodology iOS vs Android"

Similar presentations


Ads by Google