This document discusses best practices for accessibility in hybrid mobile applications. It notes that hybrid apps combine native and web elements. For screen readers, iOS uses VoiceOver while Android uses Talkback, but Talkback requires internet and is less stable. ARIA tags work differently on each platform. The document recommends using proper HTML semantics and roles to label elements correctly. It also provides workarounds, such as invisible text, for custom controls and incomplete labels. Developers must ensure all pop-ups receive focus.

1. Best Practices and
Work Around in
Mobile Hybrid Applications
#a11yTO Camp 2016
Bobby Bristol
Senior Developer, TD

2. Hybrid Mobile Application
A hybrid application (hybrid app) is one that combines elements
of both native and Web applications.
DEVICE
APIS
PLUGIN
S DEVICE PLUGINS
HTML
Javascript
CSS
Objective
C/Swift
Java

3. Voiceover vs. Talkback
IOS – Voiceover
 Screen reader is embedded on the app.
 Does not require internet connection.
 Very stable.
Android – Talkback
 Web/hybrid app’s screen reader is injected on each pages.
 Will not work without internet connection.
 Standards keep changing on each Android version.
 Not as stable as Voiceover.

4. Note about Android
Websites or applications when opened in Android’s
Native Browser, or Chrome, or Firefox for Android
has different accessibility support.
They will give different results with Talkback.
Hybrid mobile application, by default uses the
native browser.

5. ARIA Tags
IOS : Ignored on span, div, p, blockquotes, tables
Android: Works as expected
<p aria-label=“Name”>This paragraph</p>
Voiceover reads: “This paragraph” and ignores “Name”
Talkback reads “Name” “This paragraph”
, aria-label aria-labelledby, aria-label
aria-describedby

6. Coding Best Practices & Work
Around
BEST PRACTICE:
Use the right HTML semantics
If you need to display a label as header, use header tag.
If you need a button, use the input button tag.

7. Proper:
<h1>Subject</h1>
Wrong:
<div class=“header1”>Subject</div>
Work around?
<div class=“header1” role=“heading”>
Subject</div>
Common Problems:
Incorrect Semantics

8. Proper:
<input type=button value=Submit/>
Wrong:
<div onclick=“javascript:submit()”
class=“button”> Submit</div>

9. Proper:
<input type=button value=Submit/>
Wrong:
<div onclick=“javascript:submit()”
class=“button”> Submit</div>
Work around:
<div role=“button”
onclick=“javascript:submit()”
class=“button”> Submit</div>

10. Possible Role values
 alert
 alertdialog
 button
 checkbox
 dialog
 menuitem
 option
 tab
 banner
 navigation

11. Common Issues with Tables

12. Proper:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
</tr>
<tbody>
</table>
Wrong:
<table>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
</tr>
</table>

13. Custom controls?
Third party controls?
Controls you can’t modify
Labels that means something
more?
Common Problems:
Incorrect/incomplete labels

14. Labels that means something more?
Balance : (230.00)
YTD Amount: 10,500.00

15. Work around:
<span class=”font-size:0px;width:0;height:0;
overflow-hidden;”> Text to Speak </span>

16. Balance : (230.00)
Balance: <span class=”a11yHidden”>-</span>
<span>230</span>
YTD Amount: 10,500.00
<span class=”a11yHidden”>Year to date</span>
<span aria-hidden=“true”>YTD </span>
<span>Amount: 10,500.00</span>
CSS:
. a11yHidden
{ font-size:0px; width:0; height:0; opacity:1;
overflow:hidden;}

17. <td>
<span class=”a11yHidden”>Header 1</span>
<span id=1>Content 1</span>
</td>
<td>
<span class=”a11yHidden”>Header 2</span>
<span id=2>Content 2</span>
</td>
How to fix the table and any
custom control?
1. Use Javascript
2. Use proper ID for the control or element
3. Once the control codes are loaded, find the elements from the
HTML’s DOM
4. For each element you need to change, inject the html code

18. Common Problems:
Incorrect focus
All pop ups, modal windows, session timeout
notifications, etc. must receive focus from the
underlying application.

19. 1. Once the popup window appears, change the
parent window to “aria-hidden=true”
2. By javascript, move the focus to the popup
window
popupNode.focus()
popupNode.tabindex = -1
3. When the popup window is closed, turn the
parent window back to “aria-hidden=false”
Parent
windowPopup,
dialog
If the popup is modal

20. 1. Once the popup window appears, change the parent
window to “aria-hidden=true”
2. By javascript, move the focus to the popup window
popupNode.focus()
popupNode.tabindex = -1
3. Set back the parent window to aria hidden to false
setTimeout(lang.hitch(this, function() {
parentWindow. aria-hidden = false;
}),3000);
Parent
window
Popup,
dialog
If the popup is non- modal

21. Accessibility on IOS Native
BEST PRACTICE:
Use the right IOS object semantics

22. Accessibility options in IOS

23. THANK YOU!
Questions?

24. Resources
http://accessibility.arl.org/standards-best-practices/
https://www.marcozehe.de/
IOS:
https://developer.apple.com/accessibility/ios/
For a copy of this deck:
http://www.slideshare.net/BobbyBristol/accessibility-for-hybrid-
mobile

25. About me
 Senior IOS developer in TD
 Worked on both hybrid and native IOS development
 Extensive background in web development
 Certified usability analyst and user experience designer
 Connect with me bobbybristol@yahoo.com