Becky Gibson Sr. Technical Staff Member IBM Emerging HTML5 Accessibility

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

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

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

HTML5accessiblity.com AccessU

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

Semantic HTML Topics AccessU

Bad Header example AccessU

Good Header Example AccessU

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

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

New Semantic Elements AccessU

Completed Example AccessU

Simple Starting Point AccessU

Screen Reader Demo 1SimpleNewsletterHTML4.html AccessU

Warning: Code Ahead! AccessU

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

Simple Changes Change DOCTYPE Add and Add Add,, and AccessU

Changing the DOCTYPE is Easy! Original HTML5 AccessU

Use Header AccessU

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 AccessU

Nav AccessU

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

Footer AccessU

Use Footer Original Code HTML5 Code Footer Footer AccessU

Use Section, Article and Aside AccessU

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

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

Review Semantic Changes 2SimpleNewsletterHTML5Demo.html AccessU

Questions so far? AccessU

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

Add Required Attribute Subscribe! * AccessU

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

Add Search and Main Role Search Main My Newsletter Search: Top Stories AccessU

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

ARIA Changes 3SimpleNewsletterARIADemo.html AccessU

Add Styling and Content 4StyledNewsletterDemo.html AccessU

Questions? AccessU

More New Stuff! AccessU

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

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

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

Firefox Chrome Windows Browser Demo AccessU newInputTypes.html

iPad iPad url Mobile Keyboard Changes 1 AccessU

iPhone iOS iPhone iOS url Mobile Keyboard Changes 2 AccessU

Mobile Browser Demo InputTypeDemo.html AccessU

iPhone tel iPhone number Mobile Keyboard Changes 3 AccessU

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

Figure and Figcaption Example figureExample1.html AccessU

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

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

Figure demo figureExampleDemo.html imageWithAltDemo.html AccessU

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

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

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

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

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

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

Subtitles Example See: AccessU

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

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

Finished AccessU

We Made it! AccessU

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

References W3C HTML5 Specification  What are the Differences Between HTML5 and HTML 5.1?  WAI-ARIA section of HTML5 specification  w3cSchools.com HTML5 Audio and Video   HTML5 Video Captions – Current Browser Statushttp:// captions-current-browser-statushttp:// captions-current-browser-status HTML5 audio and video keyboard controls in Firefox  US&redirectslug=viewing-html5-audio-and-video#w_keyboard-controls US&redirectslug=viewing-html5-audio-and-video#w_keyboard-controls Video Subtitling and WebVTT  AccessU