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


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


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

http://www.html5accessibility.com/

http://www.paciellogroup.com/




Basic HTML AccessibilitySemantic 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 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)


HTML5 Alt Text Vocabulary

http://www.w3.org/html/wg/drafts/html/CR/embedded-content-0.html

http://www.w3.org/html/wg/drafts/html/CR/embedded-content-0.html


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


Improved HTML 5 Semantics<nav>

<section>

<article>

<header>

<footer>

<aside>


Example: Newsletter


Simple Newsletter


CaptionedScreen Reader Demo

Flash VersionsimpleNewsletter.flv

Web Versionhttp://www.weba11y.com/Examples/HTML5A11y/Capti

onDemo1.html

simpleNewsletter.html

http://www.weba11y.com/Examples/HTML5A11y/CaptionDemo1.html



Simple Newsletter Code 1See SimpleNewsletter.html

HTML 4

Styled <divs>

No semantics


Update to HTML5Change the DOCTYPE

Use nav

Use footer

Use header

Use section, article, aside


Change the DOCTYPEOriginal

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>


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>


Use footerOriginal HTML5

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

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


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

http://www.w3.org/html/wg/drafts/html/CR/dom.html


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>


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


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


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.



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



CaptionedScreen Reader Demo

Flash VersionSimpleNewsletterHTML5.flv

Web Versionhttp://www.weba11y.com/Examples/HTML5A11y/Capti

onDemo2.html

SimpleNewsletterARIA.html




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


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/

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 DemoFirefox 31 Chrome 37.0.2062.94

newInputTypes.html

Both flag errors on form submission


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


ASUS Color Picker


ASUS Date & Week


iPad Date & Month


iPad Email & URL


iPhone 4S Email & URL


iPhone Date & Number


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


Audio Format SupportTaken from:

http://www.w3schools.com/html/html5_audio.asp

Browser MP3 Wav OggIE ✔ ✖ ✖

Chrome ✔ ✔ ✔

Firefox ✔ ✔ ✔

Safari ✔ ✔ ✖

Opera ✖ ✔ ✔

http://www.w3schools.com/html/html5_audio.asp


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


Video Format SupportSubject change

Taken from:HTML5 Video Guide - All You Need to Know for 2014

Browser MP4 WEBM OgvIE ✔ ✖ ✖

Chrome ✔ ✔ ✔

Firefox ✖ ✔ ✔

Safari ✔ ✖ ✖

Opera ✖ ✔ ✔

http://www.overdigital.com/2013/10/28/html5-video-guide-need-know-2014/


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

videoExample.html

Firefox


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>

http://samples.msdn.microsoft.com/iedevcenter/TextTrack/scenario1.html

http://html5doctor.com/video-subtitling-and-webvtt/

http://html5doctor.com/video-subtitling-and-webvtt/


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


Example of Multiple Tracks (IE)


HTML5 Accessibility ReviewImproved Semantics

ARIA integration

figure & figcaption elements

New input types & attributes

Embedded audio and video

Make use of them!