Accessibility of HTML5 and Rich Internet Applications (Part 2)
HTML5 Accessibility
-
Upload
bgibson -
Category
Technology
-
view
900 -
download
3
description
Transcript of HTML5 Accessibility
HTML5 Accessibility
Becky GibsonIBM Emerging Technologies Group
Accessibility Summit 2014 2
AgendaStatus of HTML5
Basic HTML Accessibility
Improved HTML5 Semantics
ARIA Integration
New Input Types & Attributes
New Figure & Figcaption elements
Media elements
Accessibility Summit 2014 3
HTML5 StatusHTML5 is in Candidate Recommendation
Expected completion in late 2014Currently focused on responding to comments
HTML 5.1 is a public working draftTarget Recommendation by end of 2016
Accessibility Summit 2014 4
HTML5Accessibility.comhttp://www.html5accessibility.com
Under Development by The Paciello Group
Provides table showing what HTML5 Accessibility features are supported in different browsers
June 23, 2014
Accessibility Summit 2014 5
Basic HTML AccessibilitySemantic HTML
Alt text on images
Label form controls
Accessibility Summit 2014 6
Use Semantic HTML
<div class=“myCoolH1”>Topics</div>
<div class=”myCoolH1” role=”heading”>Topics</div>
<h1 class=“myCoolH1”>Topics</div>
Accessibility Summit 2014 7
Add Alt text on ImagesAdd alt text to meaningful images
Empty alt text if decorative
<img src=”youWin.png” alt=”You Win!”>
<img src=”shelby.png” alt=””>
(gratuitous image)
Accessibility Summit 2014 8
HTML5 Alt Text Vocabulary
http://www.w3.org/html/wg/drafts/html/CR/embedded-content-0.html
Accessibility Summit 2014 9
Label Form Controls<label> element with for attribute
Alternatives if the designer insists on no visible text
<label for=”addr”>Address: </label><input type=”text” id=”addr” name=”addr”>
<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">
Accessibility Summit 2014 10
Improved HTML 5 Semantics<nav>
<section>
<article>
<header>
<footer>
<aside>
Accessibility Summit 2014 11
Example: Newsletter
Accessibility Summit 2014 12
Simple Newsletter
Accessibility Summit 2014 13
CaptionedScreen Reader Demo
Flash VersionsimpleNewsletter.flv
Web Versionhttp://www.weba11y.com/Examples/HTML5A11y/Capti
onDemo1.html
simpleNewsletter.html
Accessibility Summit 2014 14
Simple Newsletter Code 1See SimpleNewsletter.html
HTML 4
Styled <divs>
No semantics
Accessibility Summit 2014 15
Update to HTML5Change the DOCTYPE
Use nav
Use footer
Use header
Use section, article, aside
Accessibility Summit 2014 16
Change the DOCTYPEOriginal
HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
Accessibility Summit 2014 17
Use navOriginal HTML5
<div> <ul> <li><a href="#top">Top Stories</a></li> <li><a href="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> </div>
<nav> <ul> <li><a href="#top">Top Stories</a></li> <li><a href="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>
Accessibility Summit 2014 18
Use footerOriginal HTML5
<div> <p style="margin-right:1em;"> Footer </p> </div>
<footer> <p style="margin-right:1em;"> Footer </p> </footer>
Accessibility Summit 2014 19
Use headerOriginal HTML5
<h1> My Newsletter </h1><div> <form> <label for="search">Search: </label> <input type="text" id="search”> <input type="submit" value="Go"> </form> </div>
<header> <h1> My Newsletter </h1> <section> <form action="#"> <label for="search">Search: </label> <input type="text" id="search"> <input type="submit" value="Go"> </form> </section> </header>
When <header> is NOT a descendant of an article or section the default role=bannerSee http://www.w3.org/html/wg/drafts/html/CR/dom.html#wai-aria
Accessibility Summit 2014 20
Use section, article, asideOriginal HTML5
<div> <h2> Top Stories</h2> <h3> Story 1 </h3> <p>Here is the first top story</p> <p><a href="moreStory1.html"> More info about top story 1</a> </p> <h3> Story 2 </h3> <p>Here is the next top story</p> <p><a href="moreStory2.html"> More info about top story 2</a> </p> <h3> Story 3 </h3> <p>Here is the next top story</p> </div>
<section> <header> <h2> Top Stories</h2></header> <article> <header> <h3> Story 1 </h3></header> <p>Here is the first top story</p> <aside> <p> <a href="moreStory1.html"> More info about top story 1</a> </p> </aside> </article>
…. other articles</section>
Accessibility Summit 2014 21
ARIA IntegrationAccessible Rich Internet Applications
Added semantics to generic HTML elements<div role=“banner”>
Now incorporated into HTML5<header>
Adds states and properties to elementsaria-label=“street address”aria-required=“true”*
*required attribute now included in many HTML5 elements
Accessibility Summit 2014 22
Add required Attribute<section> <header> <a name="subscribe"></a><h3>Subscribe!</h3> </header> <section> <form action="mailingList"> <label for="email">Email: </label> <input type="text" id="email" required>*
<input type="submit" value="Sign me up!"> </form> </section> </section>
Accessibility Summit 2014 23
ARIA LandmarksSearch
Main
<header role="banner"> <h1> My Newsletter </h1> <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><h2> Top Stories</h2> </header>
Accessibility Summit 2014 24
Use ARIA WiselyStrong 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 HTML5 spechttp://www.w3.org/html/wg/drafts/html/CR/dom.html#sec-strong-native-semantics
*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.
Accessibility Summit 2014 25
Use ARIA Wisely (2) Implicit Native Semantics
Example: Section default role=regionIf specified, role must be one of the following: alert,
alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, status or presentation
See WAI-ARIA section of HTML5 spechttp://www.w3.org/html/wg/drafts/html/CR/dom.html#sec-implicit-aria-semantics
Accessibility Summit 2014 26
CaptionedScreen Reader Demo
Flash VersionSimpleNewsletterHTML5.flv
Web Versionhttp://www.weba11y.com/Examples/HTML5A11y/Capti
onDemo2.html
SimpleNewsletterARIA.html
Accessibility Summit 2014 27
Figure & Figcaption Elementsfigure identifies stand-alone content (that may be)
referenced from the main body of work illustrations diagrams image(s)code listings
figcaption provides the description
Accessibility Summit 2014 28
Figure & Figcaption Example
figureExample1.html
Accessibility Summit 2014 29
Figure & Figcaption Code 1
<p>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. <a href="#fig1">Figure 1 </a>shows the original 3 Stooges.</p><figure id="fig1">
<img src="../images/Souptonuts.jpg"><figcaption>Figure 1: Shemp Howard, Moe Howard, and Larry Fine
in "Soup To Nuts"</figcaption>
</figure>
Accessibility Summit 2014 30
Figure & Figcaption Code 2<p>Shemp left the trio and was replaced by Curly Howard, creating the most common trio as shown in <a href="#fig2">Figure 2.</a> Source: <a href="http://en.wikipedia.org/wiki/The_Three_Stooges"> Wikipedia Three Stooges Reference</a></p><figure id="fig2">
<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>
No alt text?? See: http://html5doctor.com/html5-simplequiz-4-figures-captions-and-alt-text/
Accessibility Summit 2014 31
New input Types
Color
date
Datetime*
Month*
number
range
search
tel
time
url
Week**Removed from 5 but remain in 5.1
Accessibility Summit 2014 32
New input Attributes
autocomplete
autofocus
autosave
list
max/min/step
maxlength
pattern
required
spellcheck
Accessibility Summit 2014 33
Windows Browser DemoFirefox 31 Chrome 37.0.2062.94
newInputTypes.html
Both flag errors on form submission
Accessibility Summit 2014 34
Mobile Support for Input TypesASUS TF300T Android
4.2.1 Chrome Interactive Keyboards
email - / _ @ .com url - : _ / .com tel – number pad number (check phone)
date, time, month
color
week
iPhone 4S iOS 7.1.2, iPad 2 iOS7.1.1
Interactive keyboards email – _123 @ . _ - url - @123 . / .com : _ - tel – number pad numbers number - symbol keyboard
date, time, month
Accessibility Summit 2014 35
ASUS Color Picker
Accessibility Summit 2014 36
ASUS Date & Week
Accessibility Summit 2014 37
iPad Date & Month
Accessibility Summit 2014 38
iPad Email & URL
Accessibility Summit 2014 39
iPhone 4S Email & URL
Accessibility Summit 2014 40
iPhone Date & Number
Accessibility Summit 2014 41
Audio & Video ElementsNatively play audio and video files
No plug-ins required
Browser provides the (accessible) UI
Opportunity for synchronized captions Audio descriptions Sign language
JavaScript APIs
Format compatibility issues across browsers
Accessibility Summit 2014 42
Audio Format SupportTaken from:
http://www.w3schools.com/html/html5_audio.asp
Browser MP3 Wav OggIE ✔ ✖ ✖
Chrome ✔ ✔ ✔
Firefox ✔ ✔ ✔
Safari ✔ ✔ ✖
Opera ✖ ✔ ✔
Accessibility Summit 2014 43
Audio Example
<p>A refreshing sound to many....</p><audio autoplay controls> <source src="beer.ogg" type=“audio/ogg” /> <source src="beer.mp3” type=“audio/mpeg” /> <source src="beer.wav” type=“audio/wav” /> </audio><p>a beer being opened!</p>
Firefox
Chrome
IE 11audioExample.html
Accessibility Summit 2014 44
Video Format SupportSubject change
Taken from:HTML5 Video Guide - All You Need to Know for 2014
Browser MP4 WEBM OgvIE ✔ ✖ ✖
Chrome ✔ ✔ ✔
Firefox ✖ ✔ ✔
Safari ✔ ✖ ✖
Opera ✖ ✔ ✔
Accessibility Summit 2014 45
Simple Video Example<video controls> <source src="small.mp4” type=“video/mp4” /> <source src="small.ogv" type=“video/ogg” /> </video>
videoExample.html
Firefox
Accessibility Summit 2014 46
Subtitles ExampleInternet Explorer Dev Center
Basic timed text track example
Uses webVTT file See HTML5 Doctor - Video Subtitling and WebVTT
<video controls autoplay loop> <source src="video.mp4" type="video/mp4">
<track id="enTrack" src="entrack.vtt" label="English" kind="subtitles” srclang="en" default>
<track id="esTrack" src="sptrack.vtt" label="Spanish" kind="subtitles" srclang="es”>
<track id="deTrack" src="detrack.vtt" label="German" kind="subtitles" srclang="de”>
HTML5 video not supported</video>
Accessibility Summit 2014 47
Sample WebVTT FileWEBVTT
00:00:00.400 --> 00:00:01.070simple new
00:00:01.940 --> 00:00:03.690simple newsletter Mozilla Firefox
00:00:03.859 --> 00:00:04.770simple newsletter
00:00:04.800 --> 00:00:06.690page has 6 headings and 7 links
00:00:07.144 --> 00:00:09.784simple newsletter heading level 1 My Newsletter search
Accessibility Summit 2014 48
Example of Multiple Tracks (IE)
Accessibility Summit 2014 49
HTML5 Accessibility ReviewImproved Semantics
ARIA integration
figure & figcaption elements
New input types & attributes
Embedded audio and video
Make use of them!