0
WAI-ARIA Real world Examples and Solutions September 2009 Techshare
Speaker <ul><li>Artur Ortega </li></ul><ul><li>Accessibility Evangelist </li></ul><ul><li>Yahoo! </li></ul>
Who is Artur Ortega? <ul><li>Blind Software Engineer </li></ul>
Real world examples <ul><li>m.www.yahoo.com </li></ul><ul><li>(sneak preview at http://uk.yahoo.com/trynew ) </li></ul><ul...
<ul><li>Why WAI ARIA? </li></ul>
<ul><li>How did we implement it? </li></ul>
Yahoo! WAI ARIA Demo <ul><li>m.www.yahoo.com </li></ul><ul><li>www.ysearch.com </li></ul>
<ul><li>Javascript </li></ul>
WAI ARIA <ul><li>Creating the own </li></ul><ul><li>WAI ARIA </li></ul><ul><li>JavaScript service </li></ul>
The new Yahoo! Frontpage <ul><li>Implemented ARIA service using YUI </li></ul><ul><li>[courier new schriftart für den bloc...
Virtual buffer <ul><li>update: function(){ </li></ul><ul><li>if(!bufferUpdater){ </li></ul><ul><li>bufferUpdater = documen...
Focus Management <ul><li>focusable: function(node, enable){ </li></ul><ul><li>node.tabIndex = enable ? 0 : -1; </li></ul><...
Check for WAI ARIA enabled browsers <ul><li>supported = ( </li></ul><ul><li>Y.UA.ie >= 8 ||  </li></ul><ul><li>Y.UA.gecko ...
Setting the state <ul><li>setState: function(node, state){ </li></ul><ul><li>node.setAttribute(ARIA_PREFIX + state, true);...
Setting a role <ul><li>setRole: function(node, role){  </li></ul><ul><li>return node.setAttribute(&quot;role&quot;, role);...
Clearing Roles <ul><li>clearState: function(node, state){ </li></ul><ul><li>return node.removeAttribute(ARIA_PREFIX + stat...
Unit Tests <ul><li>Storing the service provider on a global namespace </li></ul><ul><li>Easy access </li></ul><ul><li>for ...
Teststeps for ysearch <ul><li>Using different screen readers </li></ul><ul><li>- speaks the “Search query” label </li></ul...
Conclusion <ul><li>- Implementation </li></ul><ul><li>- Tests </li></ul>
Artur Ortega <ul><li>Accessibility Evangelist </li></ul><ul><li>Yahoo! Europe Ltd </li></ul><ul><li>125 Shaftesbury Avenue...
Upcoming SlideShare
Loading in...5
×

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

2,199

Published on

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

Wednesday 16 September, 2009:
W3C workshop: Web Applications Enabled
http://www.w3.org/WAI/presentations/2009/techshare#session5

WAI-ARIA-example in the real world: http://m.www.yahoo.com
and http:/www.ysearch.com.
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:
http://www.marcozehe.de/2009/07/01/the-wai-aria-windows-screen-reader-shootout/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,199
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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>m.www.yahoo.com </li></ul><ul><li>(sneak preview at http://uk.yahoo.com/trynew ) </li></ul><ul><li>www.ysearch.com </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>m.www.yahoo.com </li></ul><ul><li>www.ysearch.com </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>Y.UA.ie >= 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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×