Upload
bobby-bristol
View
349
Download
4
Embed Size (px)
Citation preview
Best Practices and Work Around in
Mobile Hybrid Applications#a11yTO Camp 2016
Bobby BristolSenior Developer, TD
Hybrid Mobile ApplicationA hybrid application (hybrid app) is one that combines
elements of both native and Web applications.
DEVICEAPIS PLUGINS DEVICE PLUGINS
HTML Javascript
CSS
Objective C/Swift
Java
Voiceover vs. TalkbackIOS – 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.
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.
ARIA Tags
IOS : Ignored on span, div, p, blockquotes, tablesAndroid: 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-labelaria-describedby
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.
Proper:<h1>Subject</h1>
Wrong:<div class=“header1”>Subject</div>
Work around?<div class=“header1” role=“heading”>Subject</div>
Common Problems:Incorrect Semantics
Proper:<input type=button value=Submit/>
Wrong:<div onclick=“javascript:submit()” class=“button”> Submit</div>
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>
Possible Role valuesalertalertdialogbuttoncheckboxdialogmenuitemoptiontab
bannernavigation
Common Issues with Tables
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>
Custom controls? Third party controls?
Controls you can’t modify
Labels that means something more?
Common Problems:Incorrect/incomplete
labels
Labels that means something more?
Balance : (230.00)
YTD Amount: 10,500.00
Work around:
<span class=”font-size:0px;width:0;height:0;overflow-hidden;”> Text to Speak </span>
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;}
<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 Javascript2. Use proper ID for the control or element3. Once the control codes are loaded, find the elements
from the HTML’s DOM4. For each element you need to change, inject the html
code
Common Problems:
Incorrect focus
All pop ups, modal windows, session timeout notifications, etc. must receive focus from the underlying application.
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
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
Accessibility on IOS Native
BEST PRACTICE: Use the right IOS object semantics
Accessibility options in IOS
THANK YOU!
Questions?
Resources
http://accessibility.arl.org/standards-best-practices/
https://www.marcozehe.de/
IOS:
https://developer.apple.com/accessibility/ios/
About meSenior IOS developer in TDWorked on both hybrid and native IOS
developmentExtensive background in web development Certified usability analyst and user experience
designerConnect with me [email protected]