Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5 Accessibility

2.597 Aufrufe

Veröffentlicht am

This was presented at the online Accessibility Summit, September, 2014. It reviews the new features in HTML5 that help make pages more accessible to people with disabilities.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

HTML5 Accessibility

  1. 1. 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
  2. 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 Accessibility Summit 2014 3
  3. 3. 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 Accessibility Summit 2014 4
  4. 4. Basic HTML Accessibility  Semantic HTML  Alt text on images  Label form controls Accessibility Summit 2014 5
  5. 5. Use Semantic HTML  <div class=“myCoolH1”>Topics</div>  <div class=”myCoolH1” role=”heading”>Topics</div>  <h1 class=“myCoolH1”>Topics</div> Accessibility Summit 2014 6
  6. 6. 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) Accessibility Summit 2014 7
  7. 7. HTML5 Alt Text Vocabulary http://www.w3.org/html/wg/drafts/html/CR/embedded-Accessibility Summit 2014 content-0.html 8
  8. 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=””>&nbsp; <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”>&nbsp; </label> <input id="addr" name=“addr” type="text" size="50"> Accessibility Summit 2014 9
  9. 9. Improved HTML 5 Semantics  <nav>  <section>  <article>  <header>  <footer>  <aside> Accessibility Summit 2014 10
  10. 10. Example: Newsletter Accessibility Summit 2014 11
  11. 11. Simple Newsletter Accessibility Summit 2014 12
  12. 12. Captioned Screen Reader Demo  Flash Version  simpleNewsletter.flv  Web Version  http://www.weba11y.com/Examples/HTML5A11y/Capti onDemo1.html simpleNewsletter.html Accessibility Summit 2014 13
  13. 13. Simple Newsletter Code 1  See SimpleNewsletter.html  HTML 4  Styled <divs>  No semantics Accessibility Summit 2014 14
  14. 14. Update to HTML5  Change the DOCTYPE  Use nav  Use footer  Use header  Use section, article, aside Accessibility Summit 2014 15
  15. 15. 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> Accessibility Summit 2014 16
  16. 16. 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> Accessibility Summit 2014 17
  17. 17. Use footer  Original  HTML5 <div> <p style="margin-right:1em;"> Footer </p> </div> <footer> <p style="margin-right:1em;"> Footer </p> </footer> Accessibility Summit 2014 18
  18. 18. Use header  Original  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=banner See http://www.w3.org/html/wg/drafts/html/CR/dom.html#wai-aria Accessibility Summit 2014 19
  19. 19. Use section, article, aside  Original  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> Accessibility Summit 2014 20
  20. 20. 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 Accessibility Summit 2014 21
  21. 21. 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> Accessibility Summit 2014 22
  22. 22. ARIA Landmarks  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> Accessibility Summit 2014 23
  23. 23. 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. Accessibility Summit 2014 24
  24. 24. 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 Accessibility Summit 2014 25
  25. 25. Captioned Screen Reader Demo  Flash Version  SimpleNewsletterHTML5.flv  Web Version  http://www.weba11y.com/Examples/HTML5A11y/Capti onDemo2.html SimpleNewsletterARIA.html Accessibility Summit 2014 26
  26. 26. 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 Accessibility Summit 2014 27
  27. 27. Figure & Figcaption Example figureExample1.html Accessibility Summit 2014 28
  28. 28. 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 &quot;Soup To Nuts&quot; </figcaption> </figure> Accessibility Summit 2014 29
  29. 29. 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/ Accessibility Summit 2014 30
  30. 30. New input Types  Color  date  Datetime*  email  Month*  number  range  search  tel  time  url  Week* *Removed from 5 but remain in 5.1 Accessibility Summit 2014 31
  31. 31. New input Attributes  autocomplete  autofocus  autosave  list  max/min/step  maxlength  pattern  required  spellcheck Accessibility Summit 2014 32
  32. 32. Windows Browser Demo Firefox 31 Chrome 37.0.2062.94 newInputTypes.html Both flag errors on form submission Accessibility Summit 2014 33
  33. 33. 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 Accessibility Summit 2014 34
  34. 34. ASUS Color Picker Accessibility Summit 2014 35
  35. 35. ASUS Date & Week Accessibility Summit 2014 36
  36. 36. iPad Date & Month Accessibility Summit 2014 37
  37. 37. iPad Email & URL Accessibility Summit 2014 38
  38. 38. iPhone 4S Email & URL Accessibility Summit 2014 39
  39. 39. iPhone Date & Number Accessibility Summit 2014 40
  40. 40. 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 Accessibility Summit 2014 41
  41. 41. Audio Format Support  Taken from: http://www.w3schools.com/html/html5_audio.asp Browser MP3 Wav Ogg IE ✔ ✖ ✖ Chrome ✔ ✔ ✔ Firefox ✔ ✔ ✔ Safari ✔ ✔ ✖ Opera ✖ ✔ ✔ Accessibility Summit 2014 42
  42. 42. 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 Accessibility Summit 2014 43
  43. 43. 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 ✖ ✔ ✔ Accessibility Summit 2014 44
  44. 44. Simple Video Example <video controls> <source src="small.mp4” type=“video/mp4” /> <source src="small.ogv" type=“video/ogg” /> </video> videoExample.html Firefox Accessibility Summit 2014 45
  45. 45. 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> Accessibility Summit 2014 46
  46. 46. 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 Accessibility Summit 2014 47
  47. 47. Example of Multiple Tracks (IE) Accessibility Summit 2014 48
  48. 48. HTML5 Accessibility Review  Improved Semantics  ARIA integration  figure & figcaption elements  New input types & attributes  Embedded audio and video Make use of them! Accessibility Summit 2014 49

×