HTML5 and web accessibility

A look through some interesting stuff in html5 and upcoming web technologies with respect to web accessibility.

Transcript

1. html5 and web accessibility Shwetank Dixit
2. about me Shwetank Dixit Developer Relations, Opera @shwetank shwetankd@opera.com
3. Do you think this pie chart is accessible?
4. html5 and other upcoming web technologies
6. Growing interest because of mobile, tablets, TVs and other devices in web accessibility
7. HTML5 semantics
8. New elements
9. we know the usuals <nav>, <header>, <footer>, <section>, <article> etc
10. <time> proposed, dropped, and then re-instated
11. <time> ‘fuzzy’ dates are now possible ! <time datetime = “1984”> <time datetime = “1984-07”> <time datetime = “1984-W26”>
12. <time> time can be expressed in a 24 hour clock ! <time datetime = “1984-12-11T22:46”> <time datetime = “1984-12-11 22:46”>
13. <time> localize times ! <time datetime = “09:00Z”> UTC <time datetime = “09:00+05:30”> UTC+5:30 = IST
14. <time> specify durations ! <time datetime = “P5D”> Duration of 5 days <time datetime="PT22H 7M 2.54S”> Duration of 22 hours, 7 minutes, 2.54 seconds
15. <main> It’s fresh!
16. <main> added mainly to map aria role=“main” to html
17. <main> “the main content of the body of document or application” - W3C HTML Editor’s Draft
18. <main> “the main content … is directly related to or expands upon the central topic of a document or central functionality of an application” - W3C HTML Editor’s Draft
19. <main> Three alternative approaches were first considered before adding this element:- 1. The “Scooby Doo” approach* 2. First article element approach 3. Readability heuristic approach *anything apart from <article>, <aside>, <header>, <footer> and <nav>
20. <main> On testing, all three of those approaches failed on most sites to find the main content.
21. <main> Hence the need to a new <main> element signifying the main content of the document.
22. <main> Not allowed more than once in a document
23. <main> Isn’t a sectioning element.
24. <main> so won’t affect document outline in same way as <nav>, <article>, <section> do.
25. <main> Can’t be used as a descendant of ! <header> <footer> <nav> <article> <aside>
26. <main> - browser support Opera, Firefox, Chrome, Safari all support it. role=“main” is mapped to <main> so assistive technologies can use it fine.
27. <details> and <summary> providing additional information
28. <details> and <summary> <details> ! <summary> Question 1: What is the air speed velocity of an unladen swallow? </summary> <p>It is an african swallow.</p> </details> click
29. <details> and <summary> <details open> ! <summary> Question 1: What is the air speed velocity of an unladen swallow? </summary> <p>It is an african swallow.</p> </details>
30. <details> and <summary> <details> <summary>Copying… <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details> From: http://mathiasbynens.be/demo/html5-details-jquery
31. <details> and <summary> What about assistive technologies?
32. <details> and <summary> What about assistive technologies? - Use ARIA
33. <details> and <summary> <details aria-expanded=“false” role=“group”> ! <summary role=“button”> Question 1: What is the air speed velocity of an unladen swallow? </summary> <p>It is an african swallow.</p> </details>
34. <details> and <summary> <details open aria-expanded=“true” role=“group”> ! <summary role=“button”> Question 1: What is the air speed velocity of an unladen swallow? </summary> <p>It is an african swallow.</p> </details>
35. <summary> not be confused with the summary attribute table summary attribute is obsolete in html5
37. WebVTT and the <track> element
38. make subtitles in .webtt format use <track> element inside a <video> element to include that .webtt file in the video.
39. making subtitles in .webtt [idstring] [hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings] Text string
40. making subtitles in .webtt WEBVTT ! Cue-8 00:00:52.000 --> 00:00:54.000 You’re not paying attention! ! Cue-9 00:00:55.167 --> 00:00:57.042 Listen, listen to the sounds of the machine.
41. demo of subtitling with webvtt
42. Identifying voices WEBVTT ! 00:00:00.000 --> 00:00:20.000 align:left <v Fred>Hi, my name is Fred ! 00:00:02.500 --> 00:00:22.500 align:right <v Bill>Hi, I'm Bill ! //in the CSS ! ::cue(v[voice="Fred"]) { color: blue } ::cue(v[voice="Bill"]) { color: green }
43. Add subtitles to <video> <video controls> <source src="samplevideo.webm" type="video/webm"> <track label="English subtitles" kind="subtitles" srclang="en" src="samplevideo-en.vtt" default> <track label="Deutsche Untertitel" kind="subtitles" srclang="de" src="samplevideo-de.vtt"> </video>
44. taking webTT further: html 00:00:00.000 --> 00:00:20.000 region:fred align:left <p>Hi, I’m Fred</p> ! 00:00:02.500 --> 00:00:22.500 region:bill align:right <p>Hi!, I’m Bill</p>
45. taking webTT further: JSON 00:00:00.000 --> 00:00:20.000 { “name”: “fred”, “text”: “Hi!, I’m Fred” } ! 00:00:02.500 --> 00:00:22.500 { “name”: “Bill”, “text”: “Hi!, I’m Bill” }
46. webvtt validator http://quuz.org/webvtt/
47. <canvas> how to make it accessible?
48. <canvas> “When an author renders text on a canvas with fillText or strokeText, they must also add an html element (div or span) with the same text, styling and position to the canvas subdom….This enables user agents to use the subdom text to deliver an accessible experience, as the subdom text acts as a proxy for the rendered text in the bitmap.” ! - The W3C Reading text in Canvas document
49. <canvas> <canvas id="coolstuff" height="400" width="500"> <div>The image here shows market share data of a product in the form of a pie chart. <ol> <li>Our product has 45% market share</li> <li>Competitor 1 has 20%</li> <li>Competitor 2 has 15%</li> <li>Others have 20% market share combined</li> </ol> </div> </canvas>
50. Other interesting tech 1. Web Audio API 2. Web Speech API (limited browser support for now)
51. Cheers Shwetank Dixit Any questions? ! @shwetank shwetankd@opera.com