Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility for Hybrid Mobile

471 views

Published on

Best practices and work arounds in mobile hybrid applications

Published in: Technology
  • Be the first to comment

Accessibility for Hybrid Mobile

  1. 1. Best Practices and Work Around in Mobile Hybrid Applications #a11yTO Camp 2016 Bobby Bristol Senior Developer, TD
  2. 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. 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. 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. 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. 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. 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. 8. Proper: <input type=button value=Submit/> Wrong: <div onclick=“javascript:submit()” class=“button”> Submit</div>
  9. 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. 10. Possible Role values  alert  alertdialog  button  checkbox  dialog  menuitem  option  tab  banner  navigation
  11. 11. Common Issues with Tables
  12. 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. 13. Custom controls? Third party controls? Controls you can’t modify Labels that means something more? Common Problems: Incorrect/incomplete labels
  14. 14. Labels that means something more? Balance : (230.00) YTD Amount: 10,500.00
  15. 15. Work around: <span class=”font-size:0px;width:0;height:0; overflow-hidden;”> Text to Speak </span>
  16. 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. 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. 18. Common Problems: Incorrect focus All pop ups, modal windows, session timeout notifications, etc. must receive focus from the underlying application.
  19. 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. 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. 21. Accessibility on IOS Native BEST PRACTICE: Use the right IOS object semantics
  22. 22. Accessibility options in IOS
  23. 23. THANK YOU! Questions?
  24. 24. Resources http://accessibility.arl.org/standards-best-practices/ https://www.marcozehe.de/ IOS: https://developer.apple.com/accessibility/ios/
  25. 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

×