HTML5 Accessibility - my journey

HTML5 and a11y My journey Bruce Lawson

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.

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

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

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

80 /20

30 new elements 30 new elements

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

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

Ambiguity

exciting demo

<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

HTML5 forms standardise commonly-used rich form elements – without JavaScript

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

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

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

powerful (simple) API

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

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) …

video as native object...why is it important? • keyboard accessibility
built-in • “play nice” with rest of the page • Simple API for controls

<video> accessibility

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.

<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>  </video> http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element

WebVTT or TTML ?

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

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/

subtitling polyfills

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

LeanBack Player http://leanbackplayer.com/

MediaElement.js http://mediaelementjs.com/

Synchronising media elements

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

getUserMedia API (previously known as "HTML5 <device>")

http://html5doctor.com/getusermedia/ 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 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

HTML5 accessibility to-do list <canvas> Modal dialogues Finalising HTML5/ ARIA
mapping Hooking it all up in browsers Hooking it all up in screenreaders

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

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.

HTML5 Accessibility - my journey

HTML5 Accessibility - my journey

More Decks by bruce lawson

Other Decks in Programming

Featured

Transcript