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.

WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!


Published on

WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!

Wednesday 16 September, 2009:
W3C workshop: Web Applications Enabled

WAI-ARIA-example in the real world:
and http:/
Description of how WAI ARIA was implented and an overview of the real world challenges we face when using WAI ARIA: e.g. focus management and virtual buffer updates and the solutions. Additionally a small overview what is actually supported:

Published in: Technology
  • Be the first to comment

WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!

  1. 1. WAI-ARIA Real world Examples and Solutions September 2009 Techshare
  2. 2. Speaker <ul><li>Artur Ortega </li></ul><ul><li>Accessibility Evangelist </li></ul><ul><li>Yahoo! </li></ul>
  3. 3. Who is Artur Ortega? <ul><li>Blind Software Engineer </li></ul>
  4. 4. Real world examples <ul><li> </li></ul><ul><li>(sneak preview at ) </li></ul><ul><li> </li></ul>
  5. 5. <ul><li>Why WAI ARIA? </li></ul>
  6. 6. <ul><li>How did we implement it? </li></ul>
  7. 7. Yahoo! WAI ARIA Demo <ul><li> </li></ul><ul><li> </li></ul>
  8. 8. <ul><li>Javascript </li></ul>
  9. 9. WAI ARIA <ul><li>Creating the own </li></ul><ul><li>WAI ARIA </li></ul><ul><li>JavaScript service </li></ul>
  10. 10. The new Yahoo! Frontpage <ul><li>Implemented ARIA service using YUI </li></ul><ul><li>[courier new schriftart für den block] </li></ul><ul><li>YUI.add(&quot;aria_service&quot;, function(Y){ </li></ul><ul><li>var MP = Y.ModulePlatform, </li></ul><ul><li>SERVICES_NAMESPACE = &quot;MPServices&quot;, </li></ul><ul><li>SERVICE_PROVIDER = &quot;AriaProvider&quot;, </li></ul><ul><li>[...] </li></ul>
  11. 11. Virtual buffer <ul><li>update: function(){ </li></ul><ul><li>if(!bufferUpdater){ </li></ul><ul><li>bufferUpdater = document.createElement(&quot;input&quot;); </li></ul><ul><li>bufferUpdater.type = &quot;hidden&quot;; </li></ul><ul><li>bufferUpdater.value = 1; </li></ul><ul><li>document.body.appendChild(bufferUpdater); </li></ul><ul><li>} </li></ul><ul><li>bufferUpdater.value = (bufferUpdater.value == 1 ? 0 : </li></ul>
  12. 12. Focus Management <ul><li>focusable: function(node, enable){ </li></ul><ul><li>node.tabIndex = enable ? 0 : -1; </li></ul><ul><li>} </li></ul>
  13. 13. Check for WAI ARIA enabled browsers <ul><li>supported = ( </li></ul><ul><li> >= 8 || </li></ul><ul><li>Y.UA.gecko >= 1.9 || </li></ul><ul><li>Y.UA.webkit >= 530); </li></ul>
  14. 14. Setting the state <ul><li>setState: function(node, state){ </li></ul><ul><li>node.setAttribute(ARIA_PREFIX + state, true); </li></ul><ul><li>} </li></ul>
  15. 15. Setting a role <ul><li>setRole: function(node, role){ </li></ul><ul><li>return node.setAttribute(&quot;role&quot;, role); </li></ul><ul><li>} </li></ul>
  16. 16. Clearing Roles <ul><li>clearState: function(node, state){ </li></ul><ul><li>return node.removeAttribute(ARIA_PREFIX + state); </li></ul><ul><li>} </li></ul>
  17. 17. Unit Tests <ul><li>Storing the service provider on a global namespace </li></ul><ul><li>Easy access </li></ul><ul><li>for unit tests </li></ul><ul><li>Y.namespace(SERVICES_NAMESPACE); </li></ul><ul><li>Y[SERVICES_NAMESPACE][SERVICE_PROVIDER] = { </li></ul><ul><li>name: &quot;aria&quot;, </li></ul><ul><li>getService : function(moduleplatform, id) { </li></ul><ul><li>return AriaService; </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul>
  18. 18. Teststeps for ysearch <ul><li>Using different screen readers </li></ul><ul><li>- speaks the “Search query” label </li></ul><ul><li>- speaks the “Use the..” description </li></ul><ul><li>- transition to the list of suggested terms is announced along with </li></ul><ul><li>- the full instructions </li></ul><ul><li>- the selected item </li></ul><ul><li>- each focus transition is properly announced and the highlighted item read </li></ul>
  19. 19. Conclusion <ul><li>- Implementation </li></ul><ul><li>- Tests </li></ul>
  20. 20.
  21. 21. Artur Ortega <ul><li>Accessibility Evangelist </li></ul><ul><li>Yahoo! Europe Ltd </li></ul><ul><li>125 Shaftesbury Avenue </li></ul><ul><li>London WC2H 8AD </li></ul><ul><li>United Kingdom </li></ul><ul><li>[email_address] </li></ul>