Post on 03-Oct-2020
transcript
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
Mobile Keyboard Changes 2
AccessU 2015
45
Mobile Browser Demo
emailInputTypeDemo.html
AccessU 2015
46
http://weba11y.com/Examples/HTML5A11y2015/demos/emailInputTypeDemo.html
iPhone tel iPhone number
Mobile Keyboard Changes 3
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‐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