HTML 5 & WAI ARIA Steve Faulkner TPG  [email_address] Accessibility 2.0, September 22, 2009
HTML 5 - the Future <ul><li>It’s the next version of HTML </li></ul><ul><li>Many new features are not yet implemented or d...
WAI-ARIA NOW <ul><li>Allows the adding of name, role, state and property information to any element using attributes </li>...
Future Potential <ul><li>Semantic elements </li></ul><ul><ul><li><nav> <article> <footer> etc. </li></ul></ul><ul><ul><ul>...
Future Potential <ul><li>Old Way HTML 4 </li></ul>New Way HTML5
Future NOW <ul><li>Landmark roles </li></ul><ul><ul><li>Banner, mainNavigation etc. </li></ul></ul><ul><ul><ul><li>Chunk p...
ARIA NOW <ul><li>HTML 4 + ARIA </li></ul>HTML5 + ARIA
<ul><ul><li>datalist  </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ </li></ul></ul></ul><ul><ul><ul><li>Keyboar...
<ul><ul><li>Input type=&quot;number&quot;  </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ </li></ul></ul></ul><u...
Potential -  HTML5 Form controls <ul><ul><li>Input type=&quot;date&quot; </li></ul></ul><ul><ul><ul><li>Implemented in Ope...
<ul><ul><li>Input type=&quot;range&quot; </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+  & Safari 4+ </li></ul><...
<ul><ul><ul><li>Slider  demo </li></ul></ul></ul><ul><ul><ul><li>Combobox  demo </li></ul></ul></ul><ul><ul><ul><li>Date p...
<ul><ul><li>required </li></ul></ul><ul><ul><ul><li><input type=&quot;text&quot;  required > </li></ul></ul></ul><ul><ul><...
HTML 5 Audio & Video <ul><ul><li>Native accessible controls </li></ul></ul><ul><ul><ul><ul><li>Implemented in Firefox 3.5 ...
HTML 5 Audio & Video <ul><ul><li><video src=&quot;movie.ogg&quot;> Your browser is not video-enabled ; <a href=&quot;movie...
Potential  shit fight <ul><li>Canvas </li></ul><ul><ul><li>Is being used to produce UI’s e.g. Bespin </li></ul></ul><ul><u...
HTML5 Canvas element It’s a black hole <canvas> </canvas> On browsers that support canvas –  you can’t  access to the fall...
HTML5 Canvas element “ When authors use the canvas element, they must also provide content that, when presented to the use...
HTML5 Canvas element Canvas based graph depicting amount of emails, issues and bugs  to be processed over time.
HTML5 Canvas element The data is provided in tabular format inside the <canvas> element. BUT  nobody using a canvas suppor...
HTML5 Canvas element Maybe we will have better luck viewing it in IE ,  a browser that does not support canvas...
Potential <ul><li>Drag & Drop </li></ul><ul><ul><li>native keyboard support - not mentioned in HTML 5 </li></ul></ul><ul><...
ARIA & HTML 5 Potential <ul><li>Integration of ARIA started </li></ul><ul><li>Integration is about defining what bits of A...
ARIA & HTML 5 <ul><li>ARIA validates in HTML5 </li></ul><ul><ul><li>Validator.nu & W3C validator have HTML5+ARIA checking ...
ARIA NOW
ARIA NOW
ARIA NOW
References <ul><li>HTML5 </li></ul><ul><li>HTML 5 Specification </li></ul><ul><li>HTML 5: The Markup Language </li></ul><u...
References <ul><li>WAI ARIA </li></ul><ul><li>Accessible Rich Internet Applications (WAI-ARIA) (internal editor's draft) <...
Upcoming SlideShare
Loading in...5
×

HTML5 & WAI-ARIA - Happy Families

7,051

Published on

Published in: Technology, Design
1 Comment
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,051
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
69
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

HTML5 & WAI-ARIA - Happy Families

  1. 1. HTML 5 & WAI ARIA Steve Faulkner TPG [email_address] Accessibility 2.0, September 22, 2009
  2. 2. HTML 5 - the Future <ul><li>It’s the next version of HTML </li></ul><ul><li>Many new features are not yet implemented or decided upon. </li></ul><ul><li>Many new features that will make it easier for developers to provide accessible and inaccessible content </li></ul><ul><li>Its huge! 808 pages </li></ul>
  3. 3. WAI-ARIA NOW <ul><li>Allows the adding of name, role, state and property information to any element using attributes </li></ul><ul><ul><ul><li><div role=“slider” > </li></ul></ul></ul><ul><ul><ul><li><input aria-required=“true” > </li></ul></ul></ul><ul><ul><ul><li><img role=“presentation” > </li></ul></ul></ul><ul><ul><ul><li><input type=“text” aria-haspopup=“true” > </li></ul></ul></ul><ul><li>Its still in development, but many features are stable and implemented in browsers and AT </li></ul><ul><li>It can be used with HTML, XHTML, SVG, XUL and others. </li></ul>
  4. 4. Future Potential <ul><li>Semantic elements </li></ul><ul><ul><li><nav> <article> <footer> etc. </li></ul></ul><ul><ul><ul><li>Will provide semantic structure </li></ul></ul></ul><ul><ul><ul><li>Not implemented in browsers </li></ul></ul></ul><ul><ul><ul><li>Not supported by AT </li></ul></ul></ul>
  5. 5. Future Potential <ul><li>Old Way HTML 4 </li></ul>New Way HTML5
  6. 6. Future NOW <ul><li>Landmark roles </li></ul><ul><ul><li>Banner, mainNavigation etc. </li></ul></ul><ul><ul><ul><li>Chunk pages into large perceivable regions </li></ul></ul></ul><ul><ul><ul><li>Navigation of page in a few keystrokes </li></ul></ul></ul><ul><ul><ul><li>Implemented in browsers </li></ul></ul></ul><ul><ul><ul><li>Supported by AT (JAWS, NVDA, ORCA) </li></ul></ul></ul><ul><ul><ul><li>Compatible with HTML 4,5 & XHTML </li></ul></ul></ul><ul><ul><ul><li>Do not serve the same function as the new HTML5 semantic elements </li></ul></ul></ul><ul><ul><ul><li>Landmarks demo </li></ul></ul></ul>
  7. 7. ARIA NOW <ul><li>HTML 4 + ARIA </li></ul>HTML5 + ARIA
  8. 8. <ul><ul><li>datalist </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ </li></ul></ul></ul><ul><ul><ul><li>Keyboard accessibility  </li></ul></ul></ul><ul><ul><ul><li>Not exposed to AT X </li></ul></ul></ul><ul><ul><ul><li>Form control demo </li></ul></ul></ul>Potential - HTML5 Form controls
  9. 9. <ul><ul><li>Input type=&quot;number&quot; </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ </li></ul></ul></ul><ul><ul><ul><li>Keyboard accessibility  </li></ul></ul></ul><ul><ul><ul><li>Not exposed to AT X </li></ul></ul></ul>Potential - HTML5 Form controls
  10. 10. Potential - HTML5 Form controls <ul><ul><li>Input type=&quot;date&quot; </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ </li></ul></ul></ul><ul><ul><ul><li>Keyboard accessibility X </li></ul></ul></ul><ul><ul><ul><li>Not exposed to AT X </li></ul></ul></ul>
  11. 11. <ul><ul><li>Input type=&quot;range&quot; </li></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ & Safari 4+ </li></ul></ul></ul><ul><ul><ul><li>Keyboard accessibility  partial </li></ul></ul></ul><ul><ul><ul><li>Not exposed to AT X </li></ul></ul></ul>Potential - HTML5 Form controls
  12. 12. <ul><ul><ul><li>Slider demo </li></ul></ul></ul><ul><ul><ul><li>Combobox demo </li></ul></ul></ul><ul><ul><ul><li>Date picker demo </li></ul></ul></ul><ul><ul><ul><li>Spin box demo </li></ul></ul></ul><ul><ul><ul><ul><li>Keyboard accessibility  </li></ul></ul></ul></ul><ul><ul><ul><ul><li>name, role, properties and states exposed to AT  </li></ul></ul></ul></ul>ARIA enabled Form controls
  13. 13. <ul><ul><li>required </li></ul></ul><ul><ul><ul><li><input type=&quot;text&quot; required > </li></ul></ul></ul><ul><ul><ul><li>Implemented in Opera 9.5+ & Safari 4+ </li></ul></ul></ul><ul><ul><ul><li>Not exposed to AT X </li></ul></ul></ul><ul><ul><li>aria-required </li></ul></ul><ul><ul><ul><li><input type=&quot;text&quot; aria-required=“true” > </li></ul></ul></ul><ul><ul><ul><li>Implemented in Firefox 3+ and IE 8 </li></ul></ul></ul><ul><ul><ul><li>Exposed to AT  </li></ul></ul></ul>Potential - HTML5 Form controls ARIA - NOW
  14. 14. HTML 5 Audio & Video <ul><ul><li>Native accessible controls </li></ul></ul><ul><ul><ul><ul><li>Implemented in Firefox 3.5 </li></ul></ul></ul></ul><ul><ul><li>Captioning and annotations </li></ul></ul><ul><ul><li>Fallback </li></ul></ul><ul><ul><li>“ It has been decided that the first version of HTML5 <video> </li></ul></ul><ul><ul><li>(and <audio>) will not have an in-built solution for captions, audio </li></ul></ul><ul><ul><li>annotations and the like, because it is possible to do such with </li></ul></ul><ul><ul><li>javascript and external files.“ </li></ul></ul><ul><ul><li>Silvia Pfeiffer </li></ul></ul><ul><ul><li>Video Demo </li></ul></ul>
  15. 15. HTML 5 Audio & Video <ul><ul><li><video src=&quot;movie.ogg&quot;> Your browser is not video-enabled ; <a href=&quot;movie.ogg&quot;>download the video</a> and <a href=&quot;movie.txt&quot;>transcript</a>. </video> </li></ul></ul><ul><ul><li><audio src=&quot;horse.wav&quot;> Your browser does not support the audio element. </li></ul></ul><ul><ul><li><a href=“horse.txt&quot;>transcript</a> </audio> </li></ul></ul>If you want users to access content, don’t put it inside the video or audio elements
  16. 16. Potential shit fight <ul><li>Canvas </li></ul><ul><ul><li>Is being used to produce UI’s e.g. Bespin </li></ul></ul><ul><ul><li>Only way to make accessible is to create a duplicate of what’s created using canvas i.e. big dirty bolt on accessibility </li></ul></ul>
  17. 17. HTML5 Canvas element It’s a black hole <canvas> </canvas> On browsers that support canvas – you can’t access to the fallback content
  18. 18. HTML5 Canvas element “ When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.” Source: http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element BAD advice – don’t do it. Make fallback available outside of the canvas element!
  19. 19. HTML5 Canvas element Canvas based graph depicting amount of emails, issues and bugs to be processed over time.
  20. 20. HTML5 Canvas element The data is provided in tabular format inside the <canvas> element. BUT nobody using a canvas supporting browser can access it unless they ‘view source’
  21. 21. HTML5 Canvas element Maybe we will have better luck viewing it in IE , a browser that does not support canvas...
  22. 22. Potential <ul><li>Drag & Drop </li></ul><ul><ul><li>native keyboard support - not mentioned in HTML 5 </li></ul></ul><ul><ul><li>Pretty much maps on to ARIA drag & drop except for providing state info about item being dragged. </li></ul></ul><ul><ul><li>Limited support for ARIA drag and drop in JAWS and NVDA </li></ul></ul>
  23. 23. ARIA & HTML 5 Potential <ul><li>Integration of ARIA started </li></ul><ul><li>Integration is about defining what bits of ARIA can be used with what bits of HTML </li></ul><ul><li>ARIA is a separate spec – not dependent </li></ul><ul><li>Does not really matter </li></ul><ul><ul><li>Validation checking is available </li></ul></ul><ul><ul><li>Support in AT and Browsers is good </li></ul></ul>
  24. 24. ARIA & HTML 5 <ul><li>ARIA validates in HTML5 </li></ul><ul><ul><li>Validator.nu & W3C validator have HTML5+ARIA checking </li></ul></ul>
  25. 25. ARIA NOW
  26. 26. ARIA NOW
  27. 27. ARIA NOW
  28. 28. References <ul><li>HTML5 </li></ul><ul><li>HTML 5 Specification </li></ul><ul><li>HTML 5: The Markup Language </li></ul><ul><li>Form controls </li></ul><ul><li>HTML 5 Specification: 4.10 Forms </li></ul><ul><li>HTML5 Forms Demo Bruce Lawson </li></ul><ul><li>Video </li></ul><ul><li>First experiments with itext Silvia Pfeiffer </li></ul><ul><li>The most pressing Accessibility issue in HTML5 today? <video> John Foliot </li></ul><ul><li>Accessibility of HTML 5 video bruce lawson </li></ul><ul><li>Keyboard control of html5 video elements David Bolter </li></ul><ul><li>Canvas </li></ul><ul><li>HTML 5 Specification:4.8.11 The canvas element </li></ul><ul><li>Canvas, accessibility and SVG Bruce Lawson </li></ul>
  29. 29. References <ul><li>WAI ARIA </li></ul><ul><li>Accessible Rich Internet Applications (WAI-ARIA) (internal editor's draft) </li></ul><ul><li>WAI-ARIA Best Practices (internal editor's draft) </li></ul><ul><li>WAI-ARIA Primer (internal editor's draft) </li></ul><ul><ul><ul><ul><li>Accessible drag and drop using WAI-ARIA Gez lemon </li></ul></ul></ul></ul><ul><ul><ul><ul><li>WAI-ARIA Implementation in JavaScript UI Libraries </li></ul></ul></ul></ul><ul><li>Using WAI ARIA Landmark Roles </li></ul>
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×