HTML 5 Accessibility Becky Gibson Sr Technical Staff
HTML 5 Accessibility Becky Gibson Sr. Technical Staff Member IBM Emerging Technologies @becka 11 y
Agenda 2 �Status of HTML 5 �Basic HTML Accessibility �New Semantic Elements �Integrating ARIA �New Input Elements and Attributes �figure and figcaption Elements �Media support �Summary Access. U 2015
Status of HTML 5 3 �Reached W 3 C recommendation status in 2014! �HTML 5. 1 is expected in Q 4 2016 Additional elements Table sorting New APIs Access. U 2015
Does HTML 5 Require Extra Work? 4 �How different is it from HTML 4? �Can I still use HTML 4? �Why should I use it? �How well is it supported? Access. U 2015
HTML 5 accessiblity. com 5 Access. U 2015
Basic HTML 5 Accessibility 6 �Semantic HTML �Alt text on images �Labels on form elements Access. U 2015
Semantic HTML 7 �<div class=“my. Cool. H 1”>Topics</div> �<div class=”my. Cool. H 1” role=”heading”>Topics</div> �<h 1 class=“my. Cool. H 1”>Topics</h 1> Access. U 2015
Bad Header example 8 Access. U 2015
Good Header Example 9 Access. U 2015
Alt text on images 10 �Add alt text to meaningful images <img src=”you. Win. png” alt=”You Win!”> �Empty alt text if decorative <img src=”shelby. png” alt=””> (gratuitous image) Access. U 2015
Label Form Elements 11 �<label> element with for attribute <label for=”addr”>Address: </label> <input type=”text” id=”addr” name=”addr”> �Alternatives if the designer insists on no visible text <img src=”house. png” alt=””> <input type=”text” id=”addr” name=”addr” size=“ 50” aria-label=”enter address”> or <label for="addr"><img src="home. png” alt="enter address” title=“enter address”> </label> <input id="addr" name=“addr” type="text" size="50"> Access. U 2015
New Semantic Elements 12 �<header> �<nav> �<section> �<article> �<aside> �<footer> Access. U 2015
Completed Example 13 Access. U 2015
Simple Starting Point 14 Access. U 2015
Screen Reader Demo 15 1 Simple. Newsletter. HTML 4. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/1 Simple. Newsletter. HTML 4. html Access. U 2015
Warning: Code Ahead! 16 Access. U 2015
Starting Point 17 �Simple. Newsletter. html �HTML 4 �Styled <divs> �Incomplete semantics Access. U 2015 <div> <a name="top"></a><h 2> Top Stories</h 2> <h 3> Story 1 </h 3> <p>Here is the first top story</p> <p><a href="more. Story 1. html">More info about top story 1</a> </p> <h 3> Story 2 </h 3> <div>Here is the next top story</div> <p><a href="more. Story 2. html">More info about top story 2</a> </p> <h 3> Story 3 </h 3> <div>Here is the next top story</div>
Simple Changes 18 �Change DOCTYPE �Add <header> and <footer> �Add <nav> �Add <section>, <article>, and <aside> Access. U 2015
Changing the DOCTYPE is Easy! 19 �Original <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> �HTML 5 <!DOCTYPE html> Access. U 2015
Use Header 20 Access. U 2015
Use Header 21 �Original Code <h 1> My Newsletter </h 1> <div> <form> <label for="search">Search: </label> <input type="text" id="search”> <input type="submit" value="Go"> </form> </div> �HTML 5 Code <header> <h 1> My Newsletter </h 1> <div> <form action="#"> <label for="search">Search: </label> <input type="text" id="search"> <input type="submit" value="Go"> </form> </div> </header> When <header> is NOT a descendant of an article or section the default role=banner See http: //www. w 3. org/html/wg/drafts/html/CR/dom. html#wai-aria Access. U 2015
Nav 22 Access. U 2015
Use Nav 23 �Original Code �HTML 5 Code <nav> <div> <ul> <li><a href="#top">Top Stories</a> </li> <li><ahref="evts. html">Events</a> </li> <li><a href="phs. html">Photos</a> </li> <li><a href="arch. html">Archives</a> </li> <li><a href="#subs">Subscribe</a> </li> </ul> </nav> </div> Access. U 2015
Footer 24 Access. U 2015
Use Footer 25 �Original Code <div> <p style="marginright: 1 em; "> Footer </p> </div> Access. U 2015 �HTML 5 Code <footer> <p style="marginright: 1 em; "> Footer </p> </footer>
Use Section, Article and Aside 26 Access. U 2015
Section, Article, and Aside 27 �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 W 3 C HTML 5 Specification Access. U 2015
Use Section, Article, and Aside 28 �Original Code <div> <h 2> Top Stories</h 2> <h 3> Story 1 </h 3> <p>Here is the first top story</p> <p><a href="more. Story 1. html"> More info about story 1</a> </p> <h 3> Story 2 </h 3> <p>Here is the next story</p> <p><a href="more. Story 2. html"> More info about story 2</a> </p> <h 3> Story 3 </h 3> <p>Here is the next story</p> </div> �HTML 5 Code <section> <header> <h 2> Top Stories</h 2></header> <article> <header> <h 3> Story 1 </h 3></header> <p>Here is the first story</p> <aside> <p> <a href="more. Story 1. html"> More info about story 1</a> </p> </aside> </article> <header> <h 3> Story 2 </h 3></header> <p>Here is the next story</p> // Other stories go here </section> // end of Stories section Access. U 2015
Review Semantic Changes 29 2 Simple. Newsletter. HTML 5 Demo. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/2 Simple. Newsletter. HTML 5 Demo. html Access. U 2015
Questions so far? 30 Access. U 2015
ARIA Integration 31 �Accessible Rich Internet Applications �Added semantics to generic HTML elements <div role=“banner”> �Now incorporated into HTML 5 <header> �Adds states and properties to elements aria-label=“street address” aria-required=“true”* *required attribute now included in many HTML 5 elements Access. U 2015
Add Required Attribute 32 <section> <header> <a name="subscribe"></a><h 3>Subscribe!</h 3> </header> <section> <form action="mailing. List"> <label for="email">Email: </label> <input type="text" id="email" required>* <input type="submit" value="Sign me up!"> </form> </section> Access. U 2015
ARIA Landmarks 33 �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 Access. U 2015
Add Search and Main Role 34 �Search �Main <header role="banner"> <h 1> My Newsletter </h 1> <section role="search"> <form action="#"> <label for="search">Search: </label> <input type="text" id="search"> <input type="submit" value="Go"> </form> </section> </header> <section role="main"> <header> <a name="top"></a><h 2> Top Stories</h 2> </header> Access. U 2015
Use ARIA wisely 35 �Strong Native Semantics Example: header that is not a descendant of section or article, default native role is banner �<header role=“banner”> - not recommended* May cause screen reader to speak banner twice �See WAI-ARIA section of HTML 5 spec *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. Access. U 2015
ARIA Changes 36 3 Simple. Newsletter. ARIADemo. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/3 Simple. Newsletter. ARIADemo. html Access. U 2015
Add Styling and Content 37 4 Styled. Newsletter. Demo. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/4 Styled. Newsletter. Demo. html Access. U 2015
Questions? 38 Access. U 2015
More New Stuff! 39 Access. U 2015
New Elements 40 HTML 5 new input types Coming in HTML 5. 1 �color �contextmenu �date �email �number �range �datetime �dialog �menu �search �menuitem �tel �month �time �week �url Access. U 2015
New Input Attributes 41 �autocomplete �maxlength �autofocus �pattern �autosave �required �list �spellcheck �max/min/step Access. U 2015
Why are these good for A 11 y? 42 �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 Access. U 2015
Windows Browser Demo 43 Firefox new. Input. Types. html Access. U 2015 Chrome
Mobile Keyboard Changes 1 44 i. Pad email Access. U 2015 i. Pad url
Mobile Keyboard Changes 2 45 i. Phone i. OS 8. 3 - email Access. U 2015 i. Phone i. OS 8. 3 - url
Mobile Browser Demo 46 email. Input. Type. Demo. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/email. Input. Type. Demo. html Access. U 2015
Mobile Keyboard Changes 3 47 i. Phone tel Access. U 2015 i. Phone number
Figure and Figcaption 48 �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 Access. U 2015
Figure and Figcaption Example 49 figure. Example 1. html Access. U 2015
Figure & Figcaption Code 1 50 <p>The Three Stooges were an American vaudeville and comedy act of the mid‐ 20 th century best known for their numerous short subject films, still syndicated to television. Their hallmark was physical farce and slapstick. <a href="#fig 1">Figure 1 </a>shows the original 3 Stooges. </p> <figure id="fig 1"> <img src=". . /images/Souptonuts. jpg"> <figcaption>Figure 1: Shemp Howard, Moe Howard, and Larry Fine in " Soup To Nuts" </figcaption> </figure> Access. U 2015
Figure & Figcaption Code 2 51 <p>Shemp left the trio and was replaced by Curly Howard, creating the most common trio as shown in <a href="#fig 2">Figure 2. </a> Source: <a href="http: //en. wikipedia. org/wiki/The_Three_Stooges"> Wikipedia Three Stooges Reference</a> </p> <figure id="fig 2"> <img src=". . /images/moe. jpg? "> <img src=". . /images/curly. jpg"> <img src=". . /images/larry. jpg"> <figcaption>Figure 2: Individual photos of Moe Howard, Curly Howard, and Larry Fine <figcaption> </figure> Access. U 2015
Figure demo 52 figure. Example. Demo. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/figure. Example. Demo. html image. With. Alt. Demo. html http: //weba 11 y. com/Examples/HTML 5 A 11 y 2015/demos/image. With. Alt. Demo. html Access. U 2015
Media Support 53 �Native <audio> and <video> elements �No plug-ins required �Browser provides the (accessible) UI �Opportunity for synchronized captions Audio descriptions Sign language �Java. Script APIs �Format incompatibility across browsers Access. U 2015
Audio Format Support 54 �Taken from w 3 c. Schools. com HTML 5 Audio Browser MP 3 Wav Ogg IE ✔ ✖ ✖ Chrome ✔ ✔ ✔ Firefox ✔ ✔ ✔ Safari ✔ ✔ ✖ Opera ✔ ✔ ✔ Access. U 2015
Audio Example 55 <p>A refreshing sound to many. . </p> <audio autoplay controls> <source src="beer. ogg” type="audio/ogg" /> <source src="beer. mp 3" type="audio/mpeg"/> <source src="beer. wav" type="audio/wav"/> <p>Your browser does not support the <code>audio</code> element </p> </audio> <p>a beer being opened!</p> Firefox Chrome audio. Example. html Access. U 2015 IE 11
Video Format Support 56 �Taken from w 3 c. Schools. com HTML 5 Video Browser MP 4 WEBM Ogv IE ✔ ✖ ✖ Chrome ✔ ✔ ✔ Firefox ✖ ✔ ✔ Safari ✔ ✖ ✖ Opera ✔ ✔ ✔ Access. U 2015
Video example 57 <video controls> <source src="small. mp 4" type="video/mp 4"/> <source src="small. ogv” type="video/ogg" /> <p>Your browser does not support the <code>video</code> element </p> </video> Firefox video. Example. html Access. U 2015
Adding Subtitles 58 �Uses web. VTT file See HTML 5 Doctor - Video Subtitling and Web. VTT <video controls style="height: 718 px; width: 882 px"> <source src="Readium. JAWSFF 5. mp 4" type="video/mp 4"> <source src="Readium. JAWSFF 5. webm" type="video/webm"> <source src="Readium. JAWSFF 5. ogv" type="video/ogg"> <track default label="English" kind="subtitles” srclang="en-US" id="english. Track” src="Readium. Firefox. JAWS. vtt"> Your browser does not support the video element </video> Access. U 2015
Subtitles Example 59 See: http: //weba 11 y. com/Examples/Readium. FFDemo. html Access. U 2015
Support for Multiple Text Tracks 60 �Data from Ian Devlin’s HTML 5 Video Captions – Current Browser Status �All tracks accessible via Java. Script Access. U 2015 Browser Track Menu Default IE ✔ Loads Default Chrome ✖ Loads matching language or default Firefox ✖ Loads 1 st if default Safari ✔ Loads Default Opera ✖ Loads matching language or default
Accessibility of Media Controls 61 �Keyboard accessibility of media controls � Tested in Windows 7 Access. U 2015 Browser Audio Video 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. 3) Via Voice. Over Opera 29. 0. 17. . ✔ ✔
Finished 62 Access. U 2015
We Made it! 63 Access. U 2015
Summary 64 �New Semantic Elements �ARIA Integration �New input elements and attributes �figure and figcaption elements �Media elements �Questions? Access. U 2015
References 65 � W 3 C HTML 5 Specification http: //www. w 3. org/TR/html 5/ � What are the Differences Between HTML 5 and HTML 5. 1? http: //www. lesliesikos. com/what-are-the-differences-between-html 5 -and-html-5 -1/ � WAI-ARIA section of HTML 5 specification http: //www. w 3. org/TR/html 5/dom. html#wai-aria � w 3 c. Schools. com HTML 5 Audio and Video http: //www. w 3 schools. com/html 5_audio. asp http: //www. w 3 schools. com/html 5_video. asp � HTML 5 Video Captions – Current Browser Statushttp: //www. iandevlin. com/blog/2015/04/html 5 -videocaptions-current-browser-status � HTML 5 audio and video keyboard controls in Firefox https: //support. mozilla. org/en-US/kb/html 5 -audio-and-video-firefox? redirectlocale=en. US&redirectslug=viewing-html 5 -audio-and-video#w_keyboard-controls � Video Subtitling and Web. VTT http: //html 5 doctor. com/video-subtitling-and-webvtt/ Access. U 2015
- Slides: 65
