1. Becky Gibson Sr. Technical Staff Member IBM Emerging Technologies @becka11y HTML5 Accessibility

2. Agenda Status of HTML5 Basic HTML Accessibility New Semantic Elements Integrating ARIA New Input Elements and Attributes figure and figcaption Elements Media support Summary AccessU 2015 2

3. Status of HTML5 Reached W3C recommendation status in 2014! HTML5.1 is expected in Q4 2016  Additional elements  Table sorting  New APIs AccessU 2015 3

4. Does HTML5 Require Extra Work? How different is it from HTML 4? Can I still use HTML4? Why should I use it? How well is it supported? AccessU 2015 4

5. HTML5accessiblity.com AccessU 2015 5

6. Basic HTML5 Accessibility Semantic HTML Alt text on images Labels on form elements AccessU 2015 6

7. Semantic HTML Topics AccessU 2015 7

8. Bad Header example AccessU 2015 8

9. Good Header Example AccessU 2015 9

10. Alt text on images Add alt text to meaningful images Empty alt text if decorative (gratuitous image) AccessU 2015 10

11. Label Form Elements element with for attribute Alternatives if the designer insists on no visible text Address: or AccessU 2015 11

12. New Semantic Elements AccessU 2015 12

13. Completed Example AccessU 2015 13

14. Simple Starting Point AccessU 2015 14

15. Screen Reader Demo 1SimpleNewsletterHTML4.html AccessU 2015 15 http://weba11y.com/Examples/HTML5A11y2015/demos/1SimpleNewsletterHTML4.html

16. Warning: Code Ahead! AccessU 2015 16

17. Starting Point SimpleNewsletter.html HTML 4 Styled Incomplete semantics Top Stories Story 1 Here is the first top story More info about top story 1 Story 2 Here is the next top story More info about top story 2 Story 3 Here is the next top story AccessU 2015 17

18. Simple Changes Change DOCTYPE Add and Add Add,, and AccessU 2015 18

19. Changing the DOCTYPE is Easy! Original HTML5 AccessU 2015 19

20. Use Header AccessU 2015 20

21. Use Header Original Code HTML5 Code My Newsletter Search: My Newsletter Search: When is NOT a descendant of an article or section the default role=banner See http://www.w3.org/html/wg/drafts/html/CR/dom.html#wai-ariahttp://www.w3.org/html/wg/drafts/html/CR/dom.html#wai-aria AccessU 2015 21

22. Nav AccessU 2015 22

23. Use Nav Original Code HTML5 Code Top Stories Events Photos Archives Subscribe Top Stories Events Photos Archives Subscribe AccessU 2015 23

24. Footer AccessU 2015 24

25. Use Footer Original Code HTML5 Code Footer Footer AccessU 2015 25

26. Use Section, Article and Aside AccessU 2015 26

27. Section, Article, and Aside Section  The section element represents a generic section of a document or application. Article  The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. Aside  The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Info copied directly from the W3C HTML5 Specification AccessU 2015 27

28. Use Section, Article, and Aside Original Code HTML5 Code Top Stories Story 1 Here is the first top story More info about story 1 Story 2 Here is the next story More info about story 2 Story 3 Here is the next story Top Stories Story 1 Here is the first story More info about story 1 Story 2 Here is the next story // Other stories go here // end of Stories section AccessU 2015 28

29. Review Semantic Changes 2SimpleNewsletterHTML5Demo.html AccessU 2015 29 http://weba11y.com/Examples/HTML5A11y2015/demos/2SimpleNewsletterHTML5Demo.html

30. Questions so far? AccessU 2015 30

31. ARIA Integration Accessible Rich Internet Applications Added semantics to generic HTML elements  Now incorporated into HTML5  Adds states and properties to elements  aria-label=“street address”  aria-required=“true”* *required attribute now included in many HTML5 elements AccessU 2015 31

32. Add Required Attribute Subscribe! Email: * AccessU 2015 32

33. ARIA Landmarks List of landmarks  application, banner, complementary, contentinfo, form, main, navigation, search Provide programmatic access to sections of page Helpful for screen reader navigation  Removes the requirement for skip links Add search and main role into our example AccessU 2015 33

34. Add Search and Main Role Search Main My Newsletter Search: Top Stories AccessU 2015 34

35. Use ARIA wisely Strong Native Semantics  Example: header that is not a descendant of section or article, default native role is banner - not recommended*  May cause screen reader to speak banner twice See WAI-ARIA section of HTML5 specWAI-ARIA section of HTML5 *Note: In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser. AccessU 2015 35

36. ARIA Changes 3SimpleNewsletterARIADemo.html AccessU 2015 36 http://weba11y.com/Examples/HTML5A11y2015/demos/3SimpleNewsletterARIADemo.html

37. Add Styling and Content 4StyledNewsletterDemo.html AccessU 2015 37 http://weba11y.com/Examples/HTML5A11y2015/demos/4StyledNewsletterDemo.html

38. Questions? AccessU 2015 38

39. More New Stuff! AccessU 2015 39

40. HTML5 new input types Coming in HTML5.1 color date email number range search tel time url contextmenu datetime dialog menu menuitem month week New Elements AccessU 2015 40

41. New Input Attributes autocomplete autofocus autosave list max/min/step maxlength pattern required spellcheck AccessU 2015 41

42. Why are these good for A11y? Built-in keyboard support Some restriction of input Visual Feedback on format error when submit Easier mobile input Some announcements of type by screen reader AccessU 2015 42

43. Firefox Chrome Windows Browser Demo AccessU 2015 43 newInputTypes.html

44. iPad email iPad url Mobile Keyboard Changes 1 AccessU 2015 44

45. iPhone iOS 8.3 - email iPhone iOS 8.3 - url Mobile Keyboard Changes 2 AccessU 2015 45

46. Mobile Browser Demo emailInputTypeDemo.html AccessU 2015 46 http://weba11y.com/Examples/HTML5A11y2015/demos/emailInputTypeDemo.html

47. iPhone tel iPhone number Mobile Keyboard Changes 3 AccessU 2015 47

48. Figure and Figcaption figure identifies stand-alone content (that may be) referenced from the main body of work  illustrations  diagrams  image(s)  code listings figcaption provides the description AccessU 2015 48

49. Figure and Figcaption Example figureExample1.html AccessU 2015 49

50. Figure & Figcaption Code 1 The Three Stooges were an American vaudeville and comedy act of the mid‐20th century best known for their numerous short subject films, still syndicated to television. Their hallmark was physical farce and slapstick. Figure 1 shows the original 3 Stooges. Figure 1: Shemp Howard, Moe Howard, and Larry Fine in "Soup To Nuts" AccessU 2015 50

51. Figure & Figcaption Code 2 Shemp left the trio and was replaced by Curly Howard, creating the most common trio as shown in Figure 2. Source: Wikipedia Three Stooges Reference Figure 2: Individual photos of Moe Howard, Curly Howard,and Larry Fine AccessU 2015 51

52. Figure demo figureExampleDemo.html imageWithAltDemo.html AccessU 2015 52 http://weba11y.com/Examples/HTML5A11y2015/demos/figureExampleDemo.html http://weba11y.com/Examples/HTML5A11y2015/demos/imageWithAltDemo.html

53. Media Support Native and elements No plug-ins required Browser provides the (accessible) UI Opportunity for  synchronized captions  Audio descriptions  Sign language JavaScript APIs Format incompatibility across browsers AccessU 2015 53

54. Audio Format Support Taken from w3cSchools.com HTML5 Audiow3cSchools.com HTML5 Audio BrowserMP3WavOgg IE ✔✖✖ Chrome ✔✔✔ Firefox ✔✔✔ Safari ✔✔✖ Opera ✔✔✔ AccessU 2015 54

55. Audio Example A refreshing sound to many.... Your browser does not support the audio element a beer being opened! audioExample.html Firefox Chrome IE 11 AccessU 2015 55

56. Video Format Support Taken from w3cSchools.com HTML5 Videow3cSchools.com HTML5 Video BrowserMP4WEBMOgv IE ✔✖✖ Chrome ✔✔✔ Firefox ✖✔✔ Safari ✔✖✖ Opera ✔✔✔ AccessU 2015 56

57. Video example Your browser does not support the video element videoExample.html Firefox AccessU 2015 57

58. Adding Subtitles Uses webVTT file  See HTML5 Doctor - Video Subtitling and WebVTTVideo Subtitling and WebVTT <track default label="English" kind="subtitles” srclang="en-US" id="englishTrack” src="ReadiumFirefoxJAWS.vtt"> Your browser does not support the video element AccessU 2015 58

59. Subtitles Example See: http://weba11y.com/Examples/Readium/ReadiumFFDemo.htmlhttp://weba11y.com/Examples/Readium/ReadiumFFDemo.html AccessU 2015 59

60. Support for Multiple Text Tracks Data from Ian Devlin’s HTML5 Video Captions – Current Browser StatusHTML5 Video Captions – Current Browser Status All tracks accessible via JavaScript BrowserTrack MenuDefault IE ✔ Loads Default Chrome ✖ Loads matching language or default Firefox ✖ Loads 1 st if default Safari ✔ Loads Default Opera ✖ Loads matching language or default AccessU 2015 60

61. Accessibility of Media Controls Keyboard accessibility of media controls Tested in Windows 7 BrowserAudioVideo IE 11 ✔✔ Chrome 42.0.23.. ✔✔ Firefox 37.0.2 Poor focus, specific key combinations needed Poor visible focus, specific key combinations needed Safari 8.0.5 (OS X 10.10.3) Via VoiceOver Opera 29.0.17.. ✔✔ AccessU 2015 61

62. Finished AccessU 2015 62

63. We Made it! AccessU 2015 63

64. Summary New Semantic Elements ARIA Integration New input elements and attributes figure and figcaption elements Media elements Questions? AccessU 2015 64

65. References W3C HTML5 Specification  http://www.w3.org/TR/html5/ http://www.w3.org/TR/html5/ What are the Differences Between HTML5 and HTML 5.1?  http://www.lesliesikos.com/what-are-the-differences-between-html5-and-html-5-1/ http://www.lesliesikos.com/what-are-the-differences-between-html5-and-html-5-1/ WAI-ARIA section of HTML5 specification  http://www.w3.org/TR/html5/dom.html#wai-aria http://www.w3.org/TR/html5/dom.html#wai-aria w3cSchools.com HTML5 Audio and Video  http://www.w3schools.com/html/html5_audio.asp http://www.w3schools.com/html/html5_audio.asp  http://www.w3schools.com/html/html5_video.asp http://www.w3schools.com/html/html5_video.asp HTML5 Video Captions – Current Browser Statushttp://www.iandevlin.com/blog/2015/04/html5/html5-video- captions-current-browser-statushttp://www.iandevlin.com/blog/2015/04/html5/html5-video- captions-current-browser-status HTML5 audio and video keyboard controls in Firefox  https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox?redirectlocale=en- US&redirectslug=viewing-html5-audio-and-video#w_keyboard-controls https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox?redirectlocale=en- US&redirectslug=viewing-html5-audio-and-video#w_keyboard-controls Video Subtitling and WebVTT  http://html5doctor.com/video-subtitling-and-webvtt/ http://html5doctor.com/video-subtitling-and-webvtt/ AccessU 2015 65