Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dynamic and accessible web content with WAI-ARIA

2,699 views

Published on

Presentation delivered by Access iQ's Web Accessibility Evangelist, Sarah Pulis, at the Open Source Developers Conference on 6 December 2012.

Published in: Technology
  • Be the first to comment

Dynamic and accessible web content with WAI-ARIA

  1. 1. Dynamic and accessible webcontent with WAI-ARIASarah Pulis (@sarahtp)Web Accessibility Evangelist
  2. 2. About me2002 Ignorant2002+ Educated and aware2010 Commitment2012 Champion Read about Making accessibility part of culture change: its all in the attitude on Access iQ™. Image credit: Ruth Ellison and Kim Chatterjee
  3. 3. WAI-ARIA Accessible Rich Internet Applications(from the W3C Web Accessibility Initiative)
  4. 4. The problemHTML is really only meant for static contentJavascript rides to the rescue!Dynamic interactions!Widgets!But assistive technologies don’t understanddynamic interactions and widgets
  5. 5. WAI-ARIA is the bridge
  6. 6. RolesDescribe the purpose of an objectAbstract roles (general role concepts, not to be used)Widget roles (user interface widgets)Document structure roles (content structure)Landmark roles (webpage structure)
  7. 7. Widget rolesalert, alertdialog, button, checkbox, dialog, gridcell, link, log, marquee, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, slider, spinbutton, status, tab, tabpanel, textbox, timer, tooltip, treeitem
  8. 8. Document structure rolesarticle, columnheader,definition, directory,document, group, heading, img,list, listitem, math, note,presentation, region, row,rowheader, separator, toolbar
  9. 9. Landmark rolesapplication, banner,complementary, contentinfo,form, main, navigation, search
  10. 10. States and propertiesProvide specific information about an objectDefine the nature of a roleWidget AttributesLive Region AttributesDrag-and-Drop AttributesRelationship Attributes
  11. 11. StatesDescribe the dynamic properties of anobject that may change in response to auser action, or automated processFor example:aria-checked, aria-disabledaria-expanded, aria-invalid
  12. 12. PropertiesDescribe the nature of an object, or a datavalue associated with the objectFor example:aria-label, aria-labelledbyaria-live, aria-multiselectable,aria-readonly
  13. 13. Keyboard accessAssign tabindex (includingtabindex=-1) toany element for greater keyboard control
  14. 14. ARIA landmark rolesapplicationbannercomplementarycontentinfoformmainnavigationsearch
  15. 15. <div role=”banner”> <form role=”search”> ”complementary <div role=”main”> ”navigation” <div role= <div role= <div role=”form”> <div role=”application”> ”<div role=”contentinfo”>
  16. 16. Differentiate landmarkswith the same typeUse aria-label to differentiate betweenregions with the same landmark type<div role=“navigation”aria-label=“main menu”><div role=“navigation”aria-label=“sub menu”>
  17. 17. Assistive technology supportJaws 11/12/13 has complete support.ChromeVox has complete supportVoiceOver supports all landmarks except “form”NVDA supports all landmarks except “application”and “form”Window Eyes does not support ARIA landmarksLatest ARIA landmark role support data, The Paciello Group (Nov 2011)
  18. 18. ARIA and forms
  19. 19. aria-requiredUse aria-required=“true” forrequired form fields<label for="name"> First Name</label>:<input name="name" id="name" aria-required="true"><em>(required)</em>
  20. 20. aria-describedbyUse aria-describedby to providesupporting information for an input field<input type=“password"id=“pwd“ aria-describedby=“pwd-reqs“ /><p id=“pwd-reqs”>Your password must be 8characters in length and include onenumber</p>
  21. 21. aria-invalid<label for=“firstname">Firstname</label>:<input name=“firstname"id=“firstname" aria-invalid="true">
  22. 22. aria-label and aria-labelledbyThe purpose of aria-label and aria-labelledby are the sameUse aria-labelledby if the label text is visible onthe screenUse aria-label if the label text isn’t visible on thescreen
  23. 23. Aria-labelledby<label id="label" for="time">Selfdestruct this page in </label><input id="time" type="text" aria-labelledby="label time seconds"size="2" value="5"><span id="seconds"> seconds</span> Example from WebAIM: http://webaim.org/presentations/2012/ahgaria/labelledby3
  24. 24. ARIA live regions
  25. 25. ARIA live regions (priority)aria-live=“off”Updates are not announced to the useraria-live=“polite”Updates only announced if user is idlearia-live=“assertive”Updates are announced ASAP, but user is not interrupted
  26. 26. ARIA live regions (relevance)aria-busy (values: true, false)AT will only announced changes once aria-busy=“false”aria-atomic (values: true, false)Read out only the change, or the entire live regionaria-relevant (values: additions, removals, text)Relevant changes to live regions depends on value
  27. 27. Special ARIA live regionsalert one-time notificationStatus updated periodically w/ web app statustimer time elapsed or time remainingmarquee scrolling text (e.g. stock ticker)log new information (e.g. chat program)
  28. 28. <div … role=“application"><div id="container-contacts“ aria-live="assertive"> <div aria-live="assertive" role="log">
  29. 29. Widgets
  30. 30. http://www.paciellogroup.com/blog/misc/ARIA/slider/
  31. 31. <button aria-valuetext="61%" aria-valuenow="61" aria-valuemax="100"aria-valuemin="0" aria-labelledby="sliderLabel"role="slider" id="sliderThumb1"class="sliderThumb" style="left:113px;"> </button> http://www.paciellogroup.com/blog/misc/ARIA/slider/
  32. 32. http://www.paciellogroup.com/blog/misc/samples/aria/slider/doubleslider.html
  33. 33. ARIA validationARIA attributes don’t validate in HTML4Use the HTML5 DOCTYPE with ARIAmarkupValidate using the W3C Nu MarkupValidation Service
  34. 34. Take-awaysDynamic content no longer has to beinaccessible to assistive technologiesStart using ARIA now (if you aren’t already)Easy wins (landmark roles, forms)It’s kinda fun!
  35. 35. W3C WAI-ARIA documentsWAI-ARIA technical specificationhttp://www.w3.org/TR/wai-aria/WAI-ARIA Primerhttp://www.w3.org/TR/wai-aria-primerWAI-ARIA Authoring Practiceshttp://www.w3.org/TR/wai-aria-practices
  36. 36. Useful WAI-ARIA resourcesUsing ARIA in HTMLhttp://bit.ly/Qz3DHsIntroduction to WAI-ARIA (Opera)http://bit.ly/116YOWThe Paciello Group Bloghttp://www.paciellogroup.com/blog
  37. 37. Level 3, 616-620 Harris StUltimo NSW 2007t: +61 2 8218 9320e: knowhow@accessiq.org @accessiqaccessiq.orgWeb accessibility know how

×