html5 accessibility · accessibility of media controls ! keyboard accessibility of media controls !...

Becky Gibson S r . T e c h n i c a l S t a f f M e m b e r

I B M E m e r g i n g T e c h n o l o g i e s @ b e c k a 1 1 y

HTML5 Accessibility

Agenda

!  Status of HTML5 !  Basic HTML Accessibility !  New Semantic Elements !  Integrating ARIA !  New Input Elements and Attributes !  figure and figcaption Elements !  Media support !  Summary

AccessU 2015

2

Status of HTML5

!  Reached W3C recommendation status in 2014! !  HTML5.1 is expected in Q4 2016

!  Additional elements !  Table sorting !  New APIs

AccessU 2015

3

Does HTML5 Require Extra Work?

!  How different is it from HTML 4?

!  Can I still use HTML4? !  Why should I use it? !  How well is it supported?

AccessU 2015

4

HTML5accessiblity.com

AccessU 2015

5

Basic HTML5 Accessibility

!  Semantic HTML !  Alt text on images !  Labels on form elements

AccessU 2015

6

Semantic HTML

!  <div class=“myCoolH1”>Topics</div>

!  <div class=”myCoolH1” role=”heading”>Topics</div>

!  <h1 class=“myCoolH1”>Topics</h1>

AccessU 2015

7

Bad Header example

AccessU 2015

8

Good Header Example

AccessU 2015

9

Alt text on images

!  Add alt text to meaningful images

!  Empty alt text if decorative

<img src=”youWin.png” alt=”You Win!”>

<img src=”shelby.png” alt=””>

(gratuitous image)

AccessU 2015

10

Label Form Elements

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

AccessU 2015

11

New Semantic Elements

!  <header> !  <nav> !  <section> !  <article> !  <aside> !  <footer>

AccessU 2015

12

Completed Example

AccessU 2015

13

Simple Starting Point

AccessU 2015

14

Screen Reader Demo

1SimpleNewsletterHTML4.html

AccessU 2015

15

http://weba11y.com/Examples/HTML5A11y2015/demos/1SimpleNewsletterHTML4.html

Warning: Code Ahead!

AccessU 2015

16

Starting Point !  SimpleNewsletter.html !  HTML 4 !  Styled <divs> !  Incomplete semantics

<div> <a name="top"></a><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> <div>Here is the next top story</div> <p><a href="moreStory2.html">More info about top story 2</a>

</p> <h3> Story 3 </h3> <div>Here is the next top story</div> </div>

AccessU 2015

17

Simple Changes

!  Change DOCTYPE !  Add <header> and <footer> !  Add <nav> !  Add <section>, <article>, and <aside>

AccessU 2015

18

Changing the DOCTYPE is Easy!

!  Original

!  HTML5

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

<!DOCTYPE html>

AccessU 2015

19

Use Header

AccessU 2015

20

Use Header !  Original Code !  HTML5 Code <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>

<div> <form action="#"> <label for="search">Search: </label> <input type="text" id="search"> <input type="submit" value="Go"> </form>

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

AccessU 2015

21

Nav

AccessU 2015

22

Use Nav !  Original Code !  HTML5 Code

<div> <ul> <li><a href="#top">Top Stories</a> </li> <li><ahref="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><ahref="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>

AccessU 2015

23

Footer

AccessU 2015

24

Use Footer !  Original Code !  HTML5 Code

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

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

AccessU 2015

25

Use Section, Article and Aside

AccessU 2015

26

Section, Article, and Aside

!  Section !  The section element represents a generic section of a document or

application.

!  Article !  The article element represents a complete, or self-contained,

composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

!  Aside !  The aside element represents a section of a page that consists of

content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

Info copied directly from the W3C HTML5 Specification AccessU 2015

27

Use Section, Article, and Aside !  Original Code !  HTML5 Code <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 story 1</a> </p> <h3> Story 2 </h3> <p>Here is the next story</p> <p><a href="moreStory2.html"> More info about story 2</a> </p> <h3> Story 3 </h3> <p>Here is the next story</p> </div>

<section> <header> <h2> Top Stories</h2></header> <article> <header> <h3> Story 1 </h3></header> <p>Here is the first story</p> <aside> <p> <a href="moreStory1.html"> More info about story 1</a> </p> </aside> </article>

</article> <header> <h3> Story 2 </h3></header>

<p>Here is the next story</p>

// Other stories go here

</section> // end of Stories section

AccessU 2015

28

Review Semantic Changes

2SimpleNewsletterHTML5Demo.html

AccessU 2015

29

http://weba11y.com/Examples/HTML5A11y2015/demos/2SimpleNewsletterHTML5Demo.html

Questions so far?

AccessU 2015

30

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

31

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>

AccessU 2015

32

ARIA Landmarks

!  List of landmarks !  application, banner, complementary, contentinfo, form, main,

navigation, search !  Provide programmatic access to sections of page !  Helpful for screen reader navigation

!  Removes the requirement for skip links

!  Add search and main role into our example

AccessU 2015

33

Add Search and Main Role

!  Search

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

AccessU 2015

34

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 spec

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

AccessU 2015

35

ARIA Changes

3SimpleNewsletterARIADemo.html

AccessU 2015

36

http://weba11y.com/Examples/HTML5A11y2015/demos/3SimpleNewsletterARIADemo.html

Add Styling and Content

4StyledNewsletterDemo.html

AccessU 2015

37

http://weba11y.com/Examples/HTML5A11y2015/demos/4StyledNewsletterDemo.html

Questions?

AccessU 2015

38

More New Stuff!

AccessU 2015

39

HTML5 new input types Coming in HTML5.1

!  color !  date !  email !  number !  range !  search !  tel !  time !  url

!  contextmenu !  datetime !  dialog !  menu !  menuitem !  month !  week

New Elements

AccessU 2015

40

New Input Attributes !  autocomplete !  autofocus !  autosave !  list !  max/min/step

!  maxlength !  pattern !  required !  spellcheck

AccessU 2015

41

Why are these good for A11y?

!  Built-in keyboard support !  Some restriction of input !  Visual Feedback on format error when submit !  Easier mobile input !  Some announcements of type by screen reader

AccessU 2015

42

Firefox Chrome

Windows Browser Demo

AccessU 2015

43

newInputTypes.html

iPad email iPad url

Mobile Keyboard Changes 1

AccessU 2015

44

iPhone iOS 8.3 - email iPhone iOS 8.3 - url


AccessU 2015

45

Mobile Browser Demo

emailInputTypeDemo.html

AccessU 2015

46

http://weba11y.com/Examples/HTML5A11y2015/demos/emailInputTypeDemo.html

iPhone tel iPhone number


AccessU 2015

47

Figure and Figcaption

!  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

AccessU 2015

48

Figure and Figcaption Example

figureExample1.html

AccessU 2015

49

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>

AccessU 2015

50

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>

AccessU 2015

51

Figure demo

figureExampleDemo.html

imageWithAltDemo.html

AccessU 2015

52

http://weba11y.com/Examples/HTML5A11y2015/demos/figureExampleDemo.html

http://weba11y.com/Examples/HTML5A11y2015/demos/imageWithAltDemo.html

Media Support

!  Native <audio> and <video> elements !  No plug-ins required !  Browser provides the (accessible) UI !  Opportunity for

!  synchronized captions !  Audio descriptions !  Sign language

!  JavaScript APIs !  Format incompatibility across browsers

AccessU 2015

53

Audio Format Support

!  Taken from w3cSchools.com HTML5 Audio

Browser MP3 Wav Ogg IE ✔ ✖ ✖

Chrome ✔ ✔ ✔

Firefox ✔ ✔ ✔

Safari ✔ ✔ ✖

Opera ✔ ✔ ✔

AccessU 2015

54

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"/> <p>Your browser does not support the <code>audio</code> element </p> </audio> <p>a beer being opened!</p>

audioExample.html

Firefox

Chrome

IE 11

AccessU 2015

55

Video Format Support

!  Taken from w3cSchools.com HTML5 Video

Browser MP4 WEBM Ogv IE ✔ ✖ ✖

Chrome ✔ ✔ ✔

Firefox ✖ ✔ ✔

Safari ✔ ✖ ✖

Opera ✔ ✔ ✔

AccessU 2015

56

Video example

<video controls> <source src="small.mp4" type="video/mp4"/> <source src="small.ogv” type="video/ogg" /> <p>Your browser does not support the <code>video</code> element </p> </video>

videoExample.html

Firefox

AccessU 2015

57

Adding Subtitles

!  Uses webVTT file !  See HTML5 Doctor - Video Subtitling and WebVTT

<video controls style="height:718px;width:882px"> <source src="ReadiumJAWSFF5.mp4" type="video/mp4"> <source src="ReadiumJAWSFF5.webm" type="video/webm"> <source src="ReadiumJAWSFF5.ogv" type="video/ogg"> <track default label="English" kind="subtitles” srclang="en-US" id="englishTrack” src="ReadiumFirefoxJAWS.vtt"> Your browser does not support the video element </video>

AccessU 2015

58

Subtitles Example

See: http://weba11y.com/Examples/Readium/ReadiumFFDemo.html AccessU 2015

59

Support for Multiple Text Tracks

! Data from Ian Devlin’s HTML5 Video Captions – Current Browser Status

! All tracks accessible via JavaScript Browser Track Menu Default IE ✔ Loads Default

Chrome ✖ Loads matching language or default

Firefox ✖ Loads 1st if default

Safari ✔ Loads Default

Opera ✖ Loads matching language or default

AccessU 2015

60

Accessibility of Media Controls

!  Keyboard accessibility of media controls !  Tested in Windows 7

Browser Audio Video

IE 11 ✔ ✔

Chrome 42.0.23 .. ✔ ✔

Firefox 37.0.2 Poor focus, specific key combinations needed

Poor visible focus, specific key combinations needed

Safari 8.0.5 (OS X 10.10.3)

Via VoiceOver Via VoiceOver

Opera 29.0.17 .. ✔ ✔

AccessU 2015

61

Finished

AccessU 2015

62

We Made it!

AccessU 2015

63

Summary

!  New Semantic Elements !  ARIA Integration !  New input elements and attributes !  figure and figcaption elements !  Media elements !  Questions?

AccessU 2015

64

References !  W3C HTML5 Specification

!  http://www.w3.org/TR/html5/ !  What are the Differences Between HTML5 and HTML 5.1?

!  http://www.lesliesikos.com/what-are-the-differences-between-html5-and-html-5-1/ !  WAI-ARIA section of HTML5 specification

!  http://www.w3.org/TR/html5/dom.html#wai-aria !  w3cSchools.com HTML5 Audio and Video

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

!  HTML5 Video Captions – Current Browser Statushttp://www.iandevlin.com/blog/2015/04/html5/html5-video-captions-current-browser-status

!  HTML5 audio and video keyboard controls in Firefox !  https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox?redirectlocale=en-

US&redirectslug=viewing-html5-audio-and-video#w_keyboard-controls !  Video Subtitling and WebVTT

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

AccessU 2015

65

html5 accessibility · accessibility of media controls ! keyboard accessibility of media controls !...

Documents