Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Accessibility - my journey

6f3ec7315ad0715ae2a5f89a52877218?s=47 bruce lawson
February 12, 2012

HTML5 Accessibility - my journey

How I went from being highly dubious about accessibility into HTML5 to being broadly optimistic.

Digital Barn, Barnsley, 11 February 2011


bruce lawson

February 12, 2012

More Decks by bruce lawson

Other Decks in Programming


  1. HTML5 and a11y My journey Bruce Lawson

  2. None
  3. AJAX

  4. <div role="region" aria-live="polite"> <!-- update with Ajax --> </div>

  5. WAI-ARIA provides a framework for adding attributes to identify features

    for user interaction, how they relate to each other, and their current state. WAI-ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures.
  6. None
  7. I discovered a paper today which explains in detail my

    opinions (based on verifiable scientific proof) on the dangers of promoting equality in reproduction. http://ln.hixie.ch/?start=1023537036&order=-1&count=1
  8. Over one-third of all mentally retarded people have a retarded

    parent. It therefore follows that if all mentally retarded people refrained from reproducing, mental retardation could be cut by one-third in one generation. http://www.eugenics.net/papers/mission.html
  9. We should at least produce humans that are our equals.

    The result I am concerned with is that we will produce sub- average humans. http://ln.hixie.ch/?start=1023731194&order=-1&count=1 Society has to agree to stop breeding without a license from the state. http://ln.hixie.ch/?start=1023585606&order=-1&count=1
  10. 80 /20

  11. None
  12. None
  13. 30 new elements 30 new elements

  14. None
  15. Top 20 class names 1. footer 11. button 2. menu

    12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  16. 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. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  17. Ambiguity

  18. None
  19. None
  20. None
  21. None
  22. exciting demo

  23. <b><i>Yo!</b></i>

  24. <b><i>Yo!</b></i> IE, Safari <!DOCTYPE HTML> <html><HEAD></HEAD><BODY> <B><I>Yo!</I></B><I></I> </BODY></html> Opera, Firefox,

    Chrome <!DOCTYPE HTML> <html><head></head><body> <b><i>Yo!</b></i> </body></html> http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A%3Cb%3E%3Ci%3EYo!%3C%2Fb%3E%3C%2Fi%3E
  25. HTML5 forms standardise commonly-used rich form elements – without JavaScript

  26. 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
  27. None
  28. None
  29. <video> and <audio>

  30. <video src=pudding.webm controls autoplay poster=poster.jpg width=320 height=240> <a href=video.webm>Download movie</a>

  31. <audio src=jedward.ogg controls autoplay> <a href=jedward.ogg>Download horrid pap</a> </audio>

  32. None
  33. powerful (simple) API

  34. controlling <video> with JavaScript var v = document.getElementByTagName('video') [0]; v.play();

    v.pause(); v.volume = … ; v.currentTime = … ; …
  35. 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) …
  36. video as native object...why is it important? • keyboard accessibility

    built-in • “play nice” with rest of the page • Simple API for controls
  37. <video> accessibility

  38. None
  39. WebM release does not support subtitles http://code.google.com/p/webm/issues/detail?id=11 Egg image Kacper

    "Kangel" Aniołek http://commons.wikimedia.org/wiki/File:Egg.jpg WHATWG / W3C RFC will release guidance on subtitles and other overlays in HTML5 <video> in the near future. WebM intends to follow that guidance.
  40. <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
  41. WebVTT or TTML ?

  42. webVTT WEBVTT FILE 1 01:23:45,678 --> 01:23:46,789 Hello world! 2

    01:23:48,910 --> 01:23:49,101 Mój poduszkowiec jest pełen węgorzy
  43. WebVTT formatting Supports positioning of text Supports <b> and <i>

    Colouring individual speakers Support vertical text Supports RTL Supports ruby annotations Validator: http://quuz.org/webvtt/
  44. subtitling polyfills

  45. playr http://www.delphiki.com/html5/playr/

  46. LeanBack Player http://leanbackplayer.com/

  47. MediaElement.js http://mediaelementjs.com/

  48. Synchronising media elements

  49. None
  50. Synchronising media elements Each media element can have a MediaController.

    A MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter track can be overlaid on a video track, with the two being kept in sync.... Media elements with a MediaController are said to be slaved to their controller. The MediaController modifies the playback rate and the playback volume of each of the media elements slaved to it, and ensures that when any of its slaved media elements unexpectedly stall, the others are stopped at the same time. When a media element is slaved to a MediaController, its playback rate is fixed to that of the other tracks in the same MediaController, and any looping is disabled. http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising- multiple-media-elements http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitrack_Media_API
  51. getUserMedia API (previously known as "HTML5 <device>")

  52. http://html5doctor.com/getusermedia/ my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

  53. WebRTC is a free, open project that enables web browsers

    with Real-Time Communications (RTC) capabilities via simple 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
  54. Biscuit and Chica photograph by Brittany Shaw. All rights reserved.

    Used with permission
  55. HTML5 accessibility to-do list <canvas> Modal dialogues Finalising HTML5/ ARIA

    mapping Hooking it all up in browsers Hooking it all up in screenreaders
  56. Transitional Strategies Don't use HTML5 if lots of IE6 users

    with JS disabled Polyfills (but dependancy on JavaScript) Mankini and thong: HTML5 elements+ ARIA roles
  57. None
  58. 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 Dad's 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.