Your SlideShare is downloading. ×
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and Accessibility sitting in a tree

2,749

Published on

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

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,749
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 and a11ySitting in a treeBruce Lawson
  • 2. Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
  • 3. 30 new elements
  • 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. 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. <content> ?
  • 7. HTML5 forms standardise commonly-usedrich form elements – without JavaScript
  • 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. <video> and <audio>
  • 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. <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. <video src=pudding.webm controls autoplay poster=poster.jpg width=320 height=240> <a href=video.webm>Download movie</a></video>
  • 13. <audio src=jedward.ogg controls autoplay> <a href=jedward.ogg>Download horrid pap</a></audio>
  • 14. <video src=pudding.webm loop>
  • 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. powerful (simple) API
  • 17. controlling <video> with JavaScriptvar v = document.getElementByTagName(video)[0];v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  • 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. video as native object...why is it important?● keyboard accessibility built-in● “play nice” with rest of the page● Simple API for controls
  • 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. audio formats mp3 Ogg/ Vobis wavOpera yes yesChrome yes yesFirefox yes yesSafari yes yesIE9 yes no
  • 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. <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. 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. 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. <video> accessibility
  • 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. <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. webVTTWEBVTT FILE101:23:45,678 --> 01:23:46,789Hello world!201:23:48,910 --> 01:23:49,101HelloWorld!
  • 30. WebVTT formatting Supports positioning of text Supports <b> and <i>Colouring individual speakers Support vertical text Supports RTL Supports ruby annotations
  • 31. <track> polyfillhttp://www.delphiki.com/html5/playr/
  • 32. Synchronising media elements @mediagroupwww.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising-multiple- media-elements
  • 33. getUserMedia API(previously known as "HTML5 <device>")
  • 34. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  • 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. 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. brucel@opera.com @brucel

×