HTML5 and ARIA accessibility - Bangalore 2013

3,042 views
2,869 views

Published on

This presentation introduces HTML5 and ARIA accessibility. It also introduces best practices and common problems. It was created for Intuit and PayPal/eBay engineers.

Published in: Technology, Design

HTML5 and ARIA accessibility - Bangalore 2013

  1. 1. HTML5 and ARIAಪ"#ೕ%&( )*ಯ,-Ted Drake, Intuit AccessibilityBengaluru, 2013Wednesday, May 22, 13Goddess Durga, Shri Hanuman, Goddess Kali and Shiva FamilyAccessibility Warriors
  2. 2. In the good ol’ days...Wednesday, May 22, 13ancient funfare by abrinsky
  3. 3. We had textWednesday, May 22, 13Original internet pages were text based and accessible.Images were introduced and pages were still easy to read.Yahoo! circa 197
  4. 4. Then came designWednesday, May 22, 13“Geocities 1996” a tribute to Geocities web designs on CSS Zen Gardenanimated gifs, clashing colors, flashing images, and more“Creating Killer Web Sites” released in 1997 by David Siegel introduces the spacer gif, table-based layout, and so much more
  5. 5. Salvation ArrivedWednesday, May 22, 13Jeffrey Zeldman and friends introduce web standardsReturn to semantic, structural markup.design and interactions are separated from markup.
  6. 6. “Design” returnedSome rights reserved by DanCentury on FlickrWednesday, May 22, 13Web 2.0 introduced application-like web sites.AJAX for dynamic content changes, drag and drop interfaces, semantic elements transforminto formselements no longer behave naturally.
  7. 7. Take a deep breathWednesday, May 22, 13photo: truck stop By Meanest Indian
  8. 8. What is HTML5?Wednesday, May 22, 13Accessibility  support:  www.HTML5accessibility.com
  9. 9. a reality checkWednesday, May 22, 13HTML5 is the result of recognizing web sites were moving from documents to webapplications.Initial spec written by WHATWGCombine best of XHTML with HTMLEnthusiasts began lumping the various elements under the HTML5 moniker
  10. 10. HTML5 includes• More powerfulforms• CSS3• Canvas and SVG• Audio and Video• JavaScript tools• Device Integration• Semantic structure• WAI-ARIAWednesday, May 22, 13XForms became HTML5 formsCSS3 has been under development for years, browsers are rapidly adopting it.Canvas and SVG are not new, browser support is allowing them to replace flashAudio and Video specs are still devloping.JavaScript enhanced with web workers, sockets, local storage, browser api
  11. 11. Good Stuff• Native Interactions• Enhanced Form Elements• Semantic Structure• Universal Mobile PlatformWednesday, May 22, 13browsers handle interactions natively, no need for JSimproved form structurenew tags
  12. 12. Native Support• Browsers replace plugins andJavaScript• Consistency• Extensible• Device specificWednesday, May 22, 13consistent interactions across the web as browsers replace adhoc js and pluginsbrowsers provide hooks for extending experience via CSS and JS
  13. 13. Super FormsWednesday, May 22, 13• New input types: email, url, date, number...• New attributes: placeholder, autofocus, required...• Combine with ARIA: aria-required, aria-describedby...• Backwards compatible
  14. 14. Super FormsWednesday, May 22, 13• New input types: email, url, date, number...• New attributes: placeholder, autofocus, required...• Combine with ARIA: aria-required, aria-describedby...• Backwards compatible
  15. 15. No More ‘Divitis’!Wednesday, May 22, 13the generic div and span tags have been abused. HTML5 introduces new semantic containersto avoid a page filled with nothing but divs.
  16. 16. Semantic Tags• New containers: article, section, aside,footer, header, nav, and now main• New & improved tags: dl, time, datalist,ruby• Shift from document to modular designWednesday, May 22, 13ARIA and new elements can be combined for fallback. Avoid wrapping element in a div withthe same role, <div role=”navigation”><nav>http://diveintohtml5.org/semantics.html#new-elementstime also uses datetime and optional pubdate attributes for expanding publish date inmachine readable timestamp.
  17. 17. Support for Tags• Most browsers will treat them as inline.Use display:block• Firefox 4 = IAccessible2• Internet Explorer needs JS<script>document.createElement("header")</script>• Safe to mix with ARIA<nav role=”navigation”>Wednesday, May 22, 13<script>document.createElement("header")</script>IAccessible2 is an engineered accessibility interface allowing application developers to leverage their investment in MSAA while also providing an Assistive Technology (AT) access to rich documentapplications such as the IBM Workplace productivity editors and web browsers such as Firefox. The additional functionality includes support for rich text, tables, spreadsheets, Web 2.0 applications, and otherlarge mainstream applications.
  18. 18. New Attributes• Custom data attribute:• data-dosa=”paneer”• Timestamps: datetime=”2011-03-16”• MicrodataWednesday, May 22, 13the data-foo pattern avoids placing related information in hidden divs, rel/rev/titleattributes.http://html5doctor.com/microdata/ - similar to microformats, uses itemtype, itemprop,itemscopeadd pubdate to the time tag to show this was a published event <time datetime=”” pubdate>Native drag and drop, integrate with aria http://html5doctor.com/accessibility-native-drag-and-drop/
  19. 19. Use Today• Geolocation• Form attributes• ARIA• CSS3• Offline storage• Web Workers, Web Sockets• Audio, Video (with fallback)Wednesday, May 22, 13
  20. 20. Accessible Rich Internet ApplicationsBridge for AccessibilityWednesday, May 22, 13ARIA best practices  http://www.w3.org/TR/wai-­‐aria-­‐practices/    photo: Krishnarajapuram Bridge By sravi_in (Busy at work)
  21. 21. ARIA Rules1. Don’t use ARIA ifnative tag is available.2. See #1Wednesday, May 22, 13The best user experience is created with the semantic HTML tags. ARIA is meant to fix areasthat cannot use existing native elements.Use <button> instead of role=”button”Use <table> instead of role=”grid”Use <img> instead of role=”img”
  22. 22. ARIA... the tag snatcherWednesday, May 22, 13ARIA trumps the value of anything it is applied to.role attribute changes the host tag to the role’s valuearia-label will replace the inline text or alt valuearia-describedby, depending on the use, replaces the title attribute value.invasion of the body snatchers: http://www.youtube.com/watch?v=WFnSxeDfENk
  23. 23. ARIA... the tag snatcherWednesday, May 22, 13ARIA trumps the value of anything it is applied to.role attribute changes the host tag to the role’s valuearia-label will replace the inline text or alt valuearia-describedby, depending on the use, replaces the title attribute value.invasion of the body snatchers: http://www.youtube.com/watch?v=WFnSxeDfENk
  24. 24. ARIA• Web application functionality• Landmark structure: navigation, banner,search, main• Meta information: aria-hidden, aria-label• Live regions for dynamic content• Attributes placed on HTML tagsWednesday, May 22, 13W3C Web Accessibility Initiative: Accessible Rich Internet Applications
  25. 25. ARIA Landmarksrole=”banner” | role=”search” | role=”main” | role=”complementary”Wednesday, May 22, 13role=”banner” | role=”search” | role=”main” | role=”complementary”Don’t over-use complementary and section
  26. 26. Roles Restore Semantics• <div role=”img”></div>• <a role=”button”></div>• <div role=”grid”></div>• <ul role=”navigation”></ul>• <p role=”header” aria-level=”3”></p>Wednesday, May 22, 13ARIA roles restore semantics when HTML tags are used incorrectly.Developers should use the correct tag before adding ARIA roleshttp://www.w3.org/TR/wai-aria/rolesroles may be better supported than HTML5 tags
  27. 27. States• <iframe aria-hidden=”true”></iframe>• <input aria-invalid=”true”>• <a aria-selected=”true”>Home</a>• <input aria-disabled=”true”>Wednesday, May 22, 13Use aria-hidden on iframes that contain beacons and other non-contentplace aria-invalid on inputs that have been determined are invalid. combine with aria-describedby, which points to an error messagearia-selected=”true” is helpful for showing the selected option in navigation or for pseudoinputs.aria-disabled replicates the disabled attribute on an input.
  28. 28. • <input aria-label=”Search”>• <h3 id=”addressHome”>Home</h3><input aria-labelledby=”addressHome”>• <input aria-invalid=”true” aria-describedby=”pwordError”>Wednesday, May 22, 13aria-label provides a label to assistive technology.aria-labelledby and aria-describedby point to an element on the page that provides a label or description. This element can behidden with display:none.aria-label and aria-labelledby may not satisfy automated accessibility testing. The standard label is still preferred.photo: Taj Mahal Palace Hotel, Bombay By born1945
  29. 29. WidgetsARIA announces widget purpose,JavaScript is needed for interaction• <a role=”slider”>Volume</a>• <div role=”alert”></div>• <ul role=”tree”></ul>• <input role=”combobox”>Wednesday, May 22, 13These widget roles let the user know what to expect from complex interactions.User experience should match desktop software usageARIA does not provide the functionality, developer must create this with JavaScriptDHML Style Guide is good start for interaction behavior http://dev.aol.com/dhtml_style_guide/http://www.w3.org/TR/wai-aria/roles#widget_roles
  30. 30. Live RegionsAnnounce content when there are changes• aria-live=”polite” - waits until user stops typing• aria-live=”assertive” - immediately spoken• role=”alert” - implicitly sets aria-live=”assertive”• Other roles:• “alertdialog”• “timer”• “log”• “marquee”• “status”Wednesday, May 22, 13aria-atomic=”true|false” - speak the whole content or just what changedaria-relevant=”additions | removals | text | all” what to announcearia-busy=”true” - announces a loading, false is default
  31. 31. ARIA Quick Fixes• <a href=”#” role=”button”>• <input aria-label=”enter searchterm” ...>• <input aria-describedby=”error” ...>• <table role=”presentation>Wednesday, May 22, 13Use role=”button” on links that trigger an action, not take the user to a new pagearia-label for adding a label to an input that has no label.aria-describedby points to invalid input alert. points to a section of content with idrole=”presentation” on layout table tells the screen reader its not for data.
  32. 32. Form with table layoutaria-describedby restores fieldset/legendsemanticsWednesday, May 22, 13aria-describedby points to the header’s id. This adds the text after the radio button’s label.
  33. 33. Form with table layoutaria-describedby restores fieldset/legendsemanticsWednesday, May 22, 13aria-describedby points to the header’s id. This adds the text after the radio button’s label.
  34. 34. Fix Pseudo-TableWednesday, May 22, 13The ARIA grid roles allow us to re-define the table structure and provides accessibility whenthe display is comprised of multiple tables, divs, and other markup
  35. 35. Fix Pseudo-TableWednesday, May 22, 13The ARIA grid roles allow us to re-define the table structure and provides accessibility whenthe display is comprised of multiple tables, divs, and other markup
  36. 36. Wednesday, May 22, 13Use aria-describedby to point to the error messageuse aria-invalid to define which inputs are invalid.
  37. 37. Wednesday, May 22, 13Use aria-describedby to point to the error messageuse aria-invalid to define which inputs are invalid.
  38. 38. Wednesday, May 22, 13This progress bar was previously not available to screen reader, but had a title attribute toclarify the progress information.This was fixed via tabindex and ARIA
  39. 39. Wednesday, May 22, 13This progress bar was previously not available to screen reader, but had a title attribute toclarify the progress information.This was fixed via tabindex and ARIA
  40. 40. CombiningHTML5 & ARIAWednesday, May 22, 13specification for HTML5 + ARIA http://www.w3.org/html/wg/drafts/html/master/dom.html#wai-ariaphoto: Durga riding her lion, preceded by Hanuman
  41. 41. When to Choose• Use ARIA when HTML5 element is notwell supported <ul role=”navigation”>• Use HTML5 when it provides morefunctionality and equally supported<input required>• Use both: <nav role=”navigation”>• ARIA trumps native semanticsWednesday, May 22, 13the required attribute will be announced by assistive technology. It also triggers browserbased validation and valid/invalid states can be targeted via CSS and JS.Place ARIA attribute on the HTML5 tag that it matches, not on a child.ARIA is meant to replace the semantics of a tag. It’s like !important
  42. 42. • <div id=”maincontent” role=”main”><main id=”maincontent” role=”main”>• Good: <form role=”search”>Wrong: <input type=”search” role=”search”>• <nav><ul role=”navigation”>• <input required aria-required=”true”>Wednesday, May 22, 13The main tag was added to HTML5 in 2013. Safe to combine with role=”main”. Continue touse id for skip link.The search role defines the form’s purpose. input type=”search” has its own semantics.required attribute is well enough supported that you do not need to duplicate with aria-required.
  43. 43. Wednesday, May 22, 13•Invalid code•no text•mouse only
  44. 44. • <div role=”button” tabindex=”0”>• <div role=”application”>• <canvas>[text]</canvas>• <img role=”presentation”>Wednesday, May 22, 13Common problems:role=”button” should be for elements that trigger an action, i.e. javascript link.It is not needed for keyboard focus.Don’t place tabindex=”0” on elements that should not be in keyboard flow.Use a link or button instead of div or spanDon’t use role=”application” unless you know what you are doing. It is very complex.Text nodes are not surfaced via canvas. Starting to be supported http://
  45. 45. Ted DRAKESr. Accessibility EngineerIntuit Accessibility, CTOted_drake@intuit.comh: last-child.comt: @ted_drakes: slideshare.net/7mary4f: flickr.com/draketWednesday, May 22, 13I am always available for questions and advice. Do not hesitate to send emails with questions,I will try to answer, possibly with sample code, as soon as possible.Follow me on twitter and slideshare

×