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

HTML5 Accessibility - my journey

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. 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.
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. <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
  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. 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) …
  10. video as native object...why is it important? • keyboard accessibility

    built-in • “play nice” with rest of the page • Simple API for controls
  11. 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.
  12. <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
  13. 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
  14. 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/
  15. 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
  16. 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
  17. HTML5 accessibility to-do list <canvas> Modal dialogues Finalising HTML5/ ARIA

    mapping Hooking it all up in browsers Hooking it all up in screenreaders
  18. 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
  19. 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.