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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à HTML5 Accessibility

Similaire à HTML5 Accessibility (20)

Dernier

Dernier (20)

HTML5 Accessibility

Notes de l'éditeur