HTML5 and a11ySitting in a treeBruce Lawson
Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
30 new elements
Top 20 class names   1. footer                                       11. button   2. menu                                 ...
Top 20 id names    1. footer                                        11. search   2. content                               ...
<content> ?
HTML5 forms      standardise commonly-usedrich form elements – without JavaScript
built-in validation           (of course you should still validate on the server)                 <input type=email>      ...
<video> and <audio>
Anne van Kesteren annevk at opera.comWed Feb 28 05:47:56 PST 2007Hi,Opera has some internal expiremental builds with an im...
<object width="425" height="344">  <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>  <...
<video src=pudding.webm  controls  autoplay  poster=poster.jpg  width=320 height=240>    <a href=video.webm>Download movie...
<audio src=jedward.ogg  controls  autoplay>     <a href=jedward.ogg>Download horrid pap</a></audio>
<video src=pudding.webm loop>
<audio   src=jedward.ogg   preload><audio   src=jedward.ogg   preload=auto><audio   src=jedward.ogg   preload=none><audio ...
powerful (simple) API
controlling <video> with JavaScriptvar v = document.getElementByTagName(video)[0];v.play();v.pause();v.volume = … ;v.curre...
events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.add...
video as native object...why is it important?●    keyboard accessibility built-in●    “play nice” with rest of the page●  ...
video formats               webM            Ogg/ Theora    mp4/ h264Opera            yes               yesChrome          ...
audio formats          mp3      Ogg/ Vobis   wavOpera                 yes       yesChrome     yes        yesFirefox       ...
Giving everybody video<video controls autoplay poster=… width=… height=…>  <source src=pudding.mp4 type=video/mp4>  <sourc...
<video controls poster="…" width="…" height="…">   <source src="movie.mp4" type="video/mp4" />   <source src="movie.webm" ...
Help●    archive.org converts and hosts creative-commons    licensed media●   vid.ly has a free conversion/ hosting servic...
Full-screen video●  Currently, WebkitEnterFullscreen();●  May 11, WebKit announced its implementing Gecko API  https://wik...
<video> accessibility
WebM release does not support subtitlesWHATWG / W3C RFC will release guidance on subtitles and otheroverlays in HTML5 <vid...
<track> element<video controls poster=… width=… height=…>    <source src=movie.webm type=video/webm>    <track src=subtitl...
webVTTWEBVTT FILE101:23:45,678 --> 01:23:46,789Hello world!201:23:48,910 --> 01:23:49,101HelloWorld!
WebVTT formatting Supports positioning of text   Supports <b> and <i>Colouring individual speakers    Support vertical tex...
<track> polyfillhttp://www.delphiki.com/html5/playr/
Synchronising media elements                               @mediagroupwww.whatwg.org/specs/web-apps/current-work/multipage...
getUserMedia API(previously known as "HTML5 <device>")
my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
WebRTC is a free, open project that enables web browsers   with Real-Time Communications (RTC) capabilities viasimple Java...
All rights reserved corner Thanks Takara Tomy for permission to use Gigapudding                video. Buy the pudding.  HT...
brucel@opera.com     @brucel
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
Upcoming SlideShare
Loading in...5
×

HTML5 and Accessibility sitting in a tree

2,847

Published on

21 September 2011 presentation to Accessibility London (#a11yldn) unconference on HTML5 and accessibility by Bruce Lawson of Opera.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,847
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 and Accessibility sitting in a tree

  1. 1. HTML5 and a11ySitting in a treeBruce Lawson
  2. 2. Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
  3. 3. 30 new elements
  4. 4. Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style34. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  5. 5. Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  6. 6. <content> ?
  7. 7. HTML5 forms standardise commonly-usedrich form elements – without JavaScript
  8. 8. built-in validation (of course you should still validate on the server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31><input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html
  9. 9. <video> and <audio>
  10. 10. Anne van Kesteren annevk at opera.comWed Feb 28 05:47:56 PST 2007Hi,Opera has some internal expiremental builds with an implementation of a <video> element. The elementexposes a simple API (for the moment) much like the Audio() object: play() pause() Stop()The idea is that it works like <object> except that it has special <video> semantics much like <img> hasimage semantics. In markup you could prolly use it as follows: <figure> <video src=news-snippet.ogg> ... </video> <legend>HTML5 in BBC News</legend> </figure>I attached a proposal for the element and as you can see there are still some open issues. The element andits API are of course open for debate. Were not enforcing this upon the world ;-)Cheers, http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
  11. 11. <object width="425" height="344"> <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <embedsrc="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  12. 12. <video src=pudding.webm controls autoplay poster=poster.jpg width=320 height=240> <a href=video.webm>Download movie</a></video>
  13. 13. <audio src=jedward.ogg controls autoplay> <a href=jedward.ogg>Download horrid pap</a></audio>
  14. 14. <video src=pudding.webm loop>
  15. 15. <audio src=jedward.ogg preload><audio src=jedward.ogg preload=auto><audio src=jedward.ogg preload=none><audio src=jedward.ogg preload=metadata>
  16. 16. powerful (simple) API
  17. 17. controlling <video> with JavaScriptvar v = document.getElementByTagName(video)[0];v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  18. 18. events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.addEventListener(play, function() { … }, true)v.addEventListener(pause, function() { … }, true)v.addEventListener(timeupdate, function() { … }, true)v.addEventListener(ended, function() { … }, true)…
  19. 19. video as native object...why is it important?● keyboard accessibility built-in● “play nice” with rest of the page● Simple API for controls
  20. 20. video formats webM Ogg/ Theora mp4/ h264Opera yes yesChrome yes yes Nope (Chrome.soon)Firefox Yes (FF4) yesSafari yesIE9 Yes (if installed) yes
  21. 21. audio formats mp3 Ogg/ Vobis wavOpera yes yesChrome yes yesFirefox yes yesSafari yes yesIE9 yes no
  22. 22. Giving everybody video<video controls autoplay poster=… width=… height=…> <source src=pudding.mp4 type=video/mp4> <source src=pudding.webm type=video/webm> <source src=pudding.ogv type=video/ogg> <!-- fallback content --></video>
  23. 23. <video controls poster="…" width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <object width="…" height="…" type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" … file=movie.mp4" /> <!-- fallback content --> </object></video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  24. 24. Help● archive.org converts and hosts creative-commons licensed media● vid.ly has a free conversion/ hosting service (max 1GB source file) see vid.ly/5u4h3e● Miro video converter is a drag and drop GUI skin on FFMPEG
  25. 25. Full-screen video● Currently, WebkitEnterFullscreen();● May 11, WebKit announced its implementing Gecko API https://wiki.mozilla.org/Gecko:FullScreenAPI● Opera likes this approach, too
  26. 26. <video> accessibility
  27. 27. WebM release does not support subtitlesWHATWG / W3C RFC will release guidance on subtitles and otheroverlays in HTML5 <video> in the near future. WebM intends to followthat guidance. http://code.google.com/p/webm/issues/detail?id=11 Egg image Kacper "Kangel" Aniołek http://commons.wikimedia.org/wiki/File:Egg.jpg
  28. 28. <track> element<video controls poster=… width=… height=…> <source src=movie.webm type=video/webm> <track src=subtitles-en.vtt kind=subtitles srclang=en> <track src=subtitles-de.vtt kind=subtitles srclang=de> <!-- fallback content --></video>http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
  29. 29. webVTTWEBVTT FILE101:23:45,678 --> 01:23:46,789Hello world!201:23:48,910 --> 01:23:49,101HelloWorld!
  30. 30. WebVTT formatting Supports positioning of text Supports <b> and <i>Colouring individual speakers Support vertical text Supports RTL Supports ruby annotations
  31. 31. <track> polyfillhttp://www.delphiki.com/html5/playr/
  32. 32. Synchronising media elements @mediagroupwww.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising-multiple- media-elements
  33. 33. getUserMedia API(previously known as "HTML5 <device>")
  34. 34. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  35. 35. WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities viasimple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. The WebRTC initiative is a project supported by Google, Mozilla and Opera. http://sites.google.com/site/webrtc/http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing- and-peer-to-peer-communication.html
  36. 36. All rights reserved corner Thanks Takara Tomy for permission to use Gigapudding video. Buy the pudding. HTML5 nazi-killing Bruce on unicorn picture by Marina Lawson. Buy her Dads book.Thanks Brittany Shaw for permission to use her Biscuit and Chica photo. Buy a rabbit pie. All others by me or (I believe) public domain.
  37. 37. brucel@opera.com @brucel
  1. A particular slide catching your eye?

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

×