HTML5 Accessibility

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

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

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

Basic HTML Accessibility
 Semantic HTML
 Alt text on images
 Label form controls

Use Semantic HTML
 <div class=“myCoolH1”>Topics</div>
 <div class=”myCoolH1”
role=”heading”>Topics</div>
 <h1 class=“myCoolH1”>Topics</div>

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)

HTML5 Alt Text Vocabulary
http://www.w3.org/html/wg/drafts/html/CR/embedded-Accessibility Summit 2014 content-0.html 8

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">

Improved HTML 5 Semantics
 <nav>
 <section>
 <article>
 <header>
 <footer>
 <aside>

Example: Newsletter

Simple Newsletter

Captioned
Screen Reader Demo
 Flash Version
 simpleNewsletter.flv
 Web Version
 http://www.weba11y.com/Examples/HTML5A11y/Capti
onDemo1.html
simpleNewsletter.html

Simple Newsletter Code 1
 See SimpleNewsletter.html
 HTML 4
 Styled <divs>
 No semantics

Update to HTML5
 Change the DOCTYPE
 Use nav
 Use footer
 Use header
 Use section, article, aside

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>

Use nav
 Original  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>

Use footer
<div>
<p style="margin-right:1em;">
Footer
</p>
</div>
<footer>
<p style="margin-right:1em;">
Footer
</p>
</footer>

Use header
<h1> My Newsletter </h1>
<div>
<form>
<label for="search">Search:
</label>
<input type="text" id="search”>
<input type="submit" value="Go">
</form>
</div>
<header>
<section>
<form action="#">
<label for="search">Search: </label>
<input type="text" id="search">
</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

Use section, article, aside
<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">
</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">
</p>
</aside>
</article>
…. other articles
</section>

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

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>

ARIA Landmarks
 Search
 Main
<header role="banner">
<section role="search">
<form action="#">
<label for="search">Search: </label>
<input type="text" id="search">
</form>
</section>
</header>
<section role="main">
<header>
<a name="top"></a><h2> Top Stories</h2>
</header>

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.

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

Captioned
Screen Reader Demo
 Flash Version
 SimpleNewsletterHTML5.flv
 Web Version
 http://www.weba11y.com/Examples/HTML5A11y/Capti
onDemo2.html
SimpleNewsletterARIA.html

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

Figure & Figcaption Example
figureExample1.html

Figure & Figcaption Code 1
<p>The Three Stooges were an American vaudeville and comedy act of the
mid&dash;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>

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/

New input Types
 Color
 date
 Datetime*
 email
 Month*
 number
 range
 search
 tel
 time
 url
 Week*
*Removed from 5 but remain in 5.1

New input Attributes
 autocomplete
 autofocus
 autosave
 list
 max/min/step
 maxlength
 pattern
 required
 spellcheck

Windows Browser Demo
Firefox 31 Chrome 37.0.2062.94
newInputTypes.html
Both flag errors on form submission

Mobile Support for Input Types
ASUS 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

ASUS Color Picker

ASUS Date & Week

iPad Date & Month

iPad Email & URL

iPhone 4S Email & URL

iPhone Date & Number

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

Audio Format Support
 Taken from:
http://www.w3schools.com/html/html5_audio.asp
Browser MP3 Wav Ogg
IE ✔ ✖ ✖
Chrome ✔ ✔ ✔
Firefox ✔ ✔ ✔
Safari ✔ ✔ ✖
Opera ✖ ✔ ✔

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
audioExample.html IE 11

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 ✖ ✔ ✔

Simple Video Example
<video controls>
<source src="small.mp4” type=“video/mp4” />
<source src="small.ogv" type=“video/ogg” />
</video>
videoExample.html
Firefox

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>

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

Example of Multiple Tracks (IE)

HTML5 Accessibility Review
 Improved Semantics
 ARIA integration
 figure & figcaption elements
 New input types & attributes
 Embedded audio and video
Make use of them!

HTML5 Accessibility

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML5 Accessibility (20)

Recently uploaded (20)

HTML5 Accessibility

Editor's Notes