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 bobbybristol@yahoo.com