Unleash Your Potential - Namagunga Girls Coding Club
Accessibility for Hybrid Mobile
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.
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
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
Editor's Notes
Hybrid app should be installed on the device. There are hybrid apps that the source code (html, javascript, css), some its just webview inside the app.
This talk will focus more on hybrid app because naturally, mobile apps that are done in native code are usually good enough for accessibiltiy. Normally, minimal changes.
But html on a mobile, there are always issues.
With no internet connection, it will always just say “webview”
Rules that apply on html also applies on an hybrid mobile application. Therefore, ARIA tags would be the same.
Remind everyone that Voiceover is the name of the screenreader for IOS. Talkback is the screen reader for Android.
Role only applies to HTML5
What accessibility guideline are we violating here? “Ensure users can complete and submit all forms”
Role is only applicable in HTML 5, which is perfectly fine for mobile, all browsers are in HTML 5
Voiceover will ignore the the parentheses and will not say the number is of negative value
YTD may be something you want to the whole word not the acronym.
Sometimes you can only put the acronym, sometimes in table.
Document Object Model
Tabindex is needed to make sure the element will be put first from the list of elements.
Tabindex is needed to make sure the element will be put first from the list of elements