This was presented at the online Accessibility Summit, September, 2014. It reviews the new features in HTML5 that help make pages more accessible to people with disabilities.
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
HTML5 Accessibility
1.
2. Agenda
Status of HTML5
Basic HTML Accessibility
Improved HTML5 Semantics
ARIA Integration
New Input Types & Attributes
New Figure & Figcaption elements
Media elements
Accessibility Summit 2014 2
3. HTML5 Status
HTML5 is in Candidate Recommendation
Expected completion in late 2014
Currently focused on responding to comments
HTML 5.1 is a public working draft
Target Recommendation by end of 2016
Accessibility Summit 2014 3
4. HTML5Accessibility.com
http://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 4
5. Basic HTML Accessibility
Semantic HTML
Alt text on images
Label form controls
Accessibility Summit 2014 5
6. Use Semantic HTML
<div class=“myCoolH1”>Topics</div>
<div class=”myCoolH1”
role=”heading”>Topics</div>
<h1 class=“myCoolH1”>Topics</div>
Accessibility Summit 2014 6
7. Add Alt text on Images
Add alt text to meaningful images
<img src=”youWin.png” alt=”You Win!”>
Empty alt text if decorative
<img src=”shelby.png” alt=””>
(gratuitous image)
Accessibility Summit 2014 7
8. HTML5 Alt Text Vocabulary
http://www.w3.org/html/wg/drafts/html/CR/embedded-Accessibility Summit 2014 content-0.html 8
9. Label Form Controls
<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">
Accessibility Summit 2014 9
13. Captioned
Screen Reader Demo
Flash Version
simpleNewsletter.flv
Web Version
http://www.weba11y.com/Examples/HTML5A11y/Capti
onDemo1.html
simpleNewsletter.html
Accessibility Summit 2014 13
14. Simple Newsletter Code 1
See SimpleNewsletter.html
HTML 4
Styled <divs>
No semantics
Accessibility Summit 2014 14
15. Update to HTML5
Change the DOCTYPE
Use nav
Use footer
Use header
Use section, article, aside
Accessibility Summit 2014 15
16. Change the DOCTYPE
Original
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
Accessibility Summit 2014 16
19. Use header
Original 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=banner
See http://www.w3.org/html/wg/drafts/html/CR/dom.html#wai-aria
Accessibility Summit 2014 19
20. Use section, article, aside
Original 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 20
21. ARIA Integration
Accessible Rich Internet Applications
Added semantics to generic HTML elements
<div role=“banner”>
Now incorporated into HTML5
<header>
Adds states and properties to elements
aria-label=“street address”
aria-required=“true”*
*required attribute now included in many HTML5 elements
Accessibility Summit 2014 21
24. Use ARIA Wisely
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 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 24
25. Use ARIA Wisely (2)
Implicit Native Semantics
Example: Section
default role=region
If 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 spec
http://www.w3.org/html/wg/drafts/html/CR/dom.html#sec-implicit-aria-semantics
Accessibility Summit 2014 25
26. Captioned
Screen Reader Demo
Flash Version
SimpleNewsletterHTML5.flv
Web Version
http://www.weba11y.com/Examples/HTML5A11y/Capti
onDemo2.html
SimpleNewsletterARIA.html
Accessibility Summit 2014 26
27. Figure & Figcaption Elements
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
Accessibility Summit 2014 27
28. Figure & Figcaption Example
figureExample1.html
Accessibility Summit 2014 28
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 29
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 30
31. New input Types
Color
date
Datetime*
email
Month*
number
range
search
tel
time
url
Week*
*Removed from 5 but remain in 5.1
Accessibility Summit 2014 31
41. Audio & Video Elements
Natively 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 41
42. Audio Format Support
Taken from:
http://www.w3schools.com/html/html5_audio.asp
Browser MP3 Wav Ogg
IE ✔ ✖ ✖
Chrome ✔ ✔ ✔
Firefox ✔ ✔ ✔
Safari ✔ ✔ ✖
Opera ✖ ✔ ✔
Accessibility Summit 2014 42
44. Video Format Support
Subject change
Taken from:
HTML5 Video Guide - All You Need to Know for 2014
Browser MP4 WEBM Ogv
IE ✔ ✖ ✖
Chrome ✔ ✔ ✔
Firefox ✖ ✔ ✔
Safari ✔ ✖ ✖
Opera ✖ ✔ ✔
Accessibility Summit 2014 44
46. Subtitles Example
Internet 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 46
47. Sample WebVTT File
WEBVTT
00:00:00.400 --> 00:00:01.070
simple new
00:00:01.940 --> 00:00:03.690
simple newsletter Mozilla Firefox
00:00:03.859 --> 00:00:04.770
simple newsletter
00:00:04.800 --> 00:00:06.690
page has 6 headings and 7 links
00:00:07.144 --> 00:00:09.784
simple newsletter heading level 1 My Newsletter search
Accessibility Summit 2014 47
49. HTML5 Accessibility Review
Improved Semantics
ARIA integration
figure & figcaption elements
New input types & attributes
Embedded audio and video
Make use of them!
Accessibility Summit 2014 49
Notas del editor
Partial screen shot of the HTML5Accessibility.com page showing the HTML5 Accessibility support score for:
Chrome: 67/100
Firefox: 88.5/100
IE: 37/100
Table of browser support for different formats repeated here in text format:
IE supports MP3; does not support wav and ogg
Chrome and Firefox support MP3,Wav, Ogg
Safari supports MP3, Wav; does not support ogg
Opera supports Wav, Ogg; does not support wav
Table of browser support for different formats repeated here in text format.
IE and Safari support MP4; do not support webm and ogv
Chrome supports MP4,WEBM, Ogv
Firefox and Opera support WEBM, Ogv; do not support mp4