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.



Download to read offline

An Introduction to WAI-ARIA

Download to read offline

Parallel session on 'An Introduction to WAI-ARIA' given by Dan Jackson, City University at the Institutional Web Management Workshop 2009, University of Essex, 28 - 30 July 2009.

See and

An Introduction to WAI-ARIA

  1. 1. An Introduction to WAI-ARIA Dan Jackson Web Team Leader City University London
  2. 2. About this session <ul><ul><li>What is ARIA? What does it do? </li></ul></ul><ul><ul><li>Why do we need it? </li></ul></ul><ul><ul><li>Roles, States and Properties, keyboard navigation, Live Regions </li></ul></ul><ul><ul><li>Where ARIA we with ARIA? * Problems & Issues </li></ul></ul><ul><ul><li>Best practice </li></ul></ul><ul><ul><li>* All my puns are rubbish. </li></ul></ul>
  3. 3. Get the acronym out of the way early doors.... <ul><li>W eb A ccessibility I nitiative. </li></ul><ul><li>A ccessible R ich I nternet A pplications. </li></ul><ul><li>It’s at ‘Final Call’ draft stage, i.e. it’s not a formal specification (yet) . </li></ul>
  4. 4. What does ARIA do? <ul><li>W3Cese </li></ul><ul><li> “ This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information in document-level markup, to an assistive technology .” </li></ul><ul><li>( ) </li></ul><ul><li>English </li></ul><ul><li>It’s a W3C specification that defines a way to make Web content and Web applications more accessible to people with disabilities. </li></ul>
  5. 5. Why do we need ARIA? <ul><li>Some background... </li></ul><ul><ul><li>HTML is so, like, 1999 : </li></ul></ul><ul><ul><ul><li>very limited set of interface controls. </li></ul></ul></ul><ul><ul><ul><li>difficult communication model </li></ul></ul></ul><ul><ul><li>JavaScript is bitchin’: </li></ul></ul><ul><ul><ul><li>dynamic interactions (drag & drop, sorting, resizing) </li></ul></ul></ul><ul><ul><ul><li>widgets (date pickers, sliders, tabs, progress bars, etc) </li></ul></ul></ul><ul><ul><ul><li>AJAX </li></ul></ul></ul>
  6. 6. Why do we need ARIA? <ul><li>So what’s the problem? </li></ul><ul><ul><li>Widgets are inaccessible - Assistive Technologies (AT) don’t know what they do. </li></ul></ul><ul><ul><li>Widgets are rarely keyboard accessible. </li></ul></ul><ul><ul><li>Content updated using AJAX is not reported to AT. </li></ul></ul>
  7. 7. ARIA to the rescue! <ul><li>ARIA provides semantic meaning , dynamic content updates and consistent keyboard support to AT users. </li></ul>
  8. 8. <ul><li>Roles </li></ul><ul><li>States and Properties </li></ul><ul><li>Keyboard access </li></ul><ul><li>Live Regions </li></ul><ul><li>The technical part </li></ul>
  9. 9. Roles <ul><li>Roles define widgets and page structure. </li></ul><ul><ul><li>2 categories: </li></ul></ul><ul><ul><li>Landmark Roles </li></ul></ul><ul><ul><li>Widget and Element Roles </li></ul></ul>
  10. 10. Landmark Roles <ul><li>“ The skip-links killer” </li></ul><ul><li>Define the role of sections in the structure of a web page, e.g.: </li></ul><ul><ul><li><div id=”header” role=”banner”> </li></ul></ul><ul><ul><li><div id=”content” role=”main”> </li></ul></ul><ul><ul><li>Gives AT instant access to major page components </li></ul></ul>
  11. 11. Landmark roles
  12. 12. Widget & Element Roles <ul><li>To describe GUI widgets, elements common on desktop but not native to HTML. </li></ul><ul><li>Examples: </li></ul><ul><li>grid </li></ul><ul><li>menu </li></ul><ul><li>progressbar </li></ul><ul><li>slider </li></ul><ul><li>tab </li></ul><ul><li>toolbar </li></ul><ul><li>tree </li></ul>
  13. 13. States and Properties <ul><li>Provide AT with information about how elements & widgets are configured, e.g.: </li></ul><ul><li>has a button been pressed? </li></ul><ul><li><button aria-pressed=”true”> </li></ul><ul><li>is an input field required? </li></ul><ul><li><input aria-required=”true”> </li></ul><ul><li>how much of my file upload is complete? </li></ul><ul><li><div role=”progressbar” aria-valuetext=&quot;0%&quot; aria-valuenow=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-valuemin=&quot;0&quot;> </li></ul>
  14. 14. <ul><ul><li>Accessibility isn’t just about screen readers.... </li></ul></ul><ul><li>Throw away your mouse. </li></ul>
  15. 15. Keyboard access <ul><ul><li>ARIA extends the use of HTML’s tabindex attribute. </li></ul></ul><ul><ul><li>tabindex = “0” : allows all elements to be accessed using keyboard. </li></ul></ul><ul><ul><li>tabindex=”-1” : allows elements to be given programmatic focus without adding them to the tab order. </li></ul></ul>
  16. 16. Eh? <ul><li>This is a good thing . Why? </li></ul><ul><li>Easier navigation through document, i.e. one ‘tab stop’ per UI control. </li></ul><ul><li>Gives keyboard access to widgets. </li></ul><ul><li>Manages keyboard control within widgets. </li></ul><ul><li>Establishes relationships between elements within widgets (e.g. parent/child/sibling in tree-view navigation). </li></ul>
  17. 17. Live Regions Are Way Cool <ul><li>Solves the problem of how to announce content updated by AJAX to screen reader users. </li></ul><ul><li>Properties : </li></ul><ul><li>aria-live = off | polite | assertive | rude </li></ul><ul><li>aria-atomic = true | false </li></ul><ul><li>aria-busy = true | false </li></ul><ul><li>aria-relevant = additions | removals | text | all </li></ul>
  18. 18. <ul><li>Problems, issues: </li></ul><ul><li>The V-Word </li></ul><ul><li>ARIA vs. HTML 5 </li></ul><ul><li>Is it supported? </li></ul><ul><li>Complexity </li></ul><ul><li>Will AT users adopt it? </li></ul><ul><li>Where aria we with ARIA? </li></ul>
  19. 19. Issue #1: The V-Word <ul><li>Any Validation Nazis in the room? </li></ul><ul><li>ARIA won’t validate with HTML 4.01, XHTML 1.0. What to do? </li></ul><ul><ul><li>Put up with it. </li></ul></ul><ul><ul><li>Inject attribute values using JavaScript. </li></ul></ul><ul><ul><li>Create a custom DTD! </li></ul></ul><ul><ul><li>Use HTML 5!? </li></ul></ul>
  20. 20. Issue #2: ARIA vs. HTML 5 <ul><li>ARIA </li></ul><ul><li>Landmark Roles </li></ul><ul><li><div role=”navigation”> </li></ul><ul><li>ARIA Properties and States </li></ul><ul><li> <input name=”email” aria-required=”true”> </li></ul><ul><li>HTML 5 </li></ul><ul><li>New structural elements </li></ul><ul><li><nav> </li></ul><ul><li>HTML 5 form attributes </li></ul><ul><li> <input name=”email” type=”email required”> </li></ul><ul><li>But... </li></ul><ul><li>Many ARIA roles that have no HTML5 equivalent, e.g. application, banner, main . </li></ul><ul><li>And… </li></ul><ul><ul><li>Argument over structural elements in HTML 5 = major shit-storm. </li></ul></ul>
  21. 21. Issue #3: Is ARIA supported? <ul><ul><li>To use ARIA you need a browser that both supports ARIA and is supported by a screen reader that also support ARIA . </li></ul></ul><ul><li>ARIA-aware OS/browser/AT combinations are some way off becoming the norm. </li></ul><ul><ul><li>Browsers: </li></ul></ul><ul><ul><li>Firefox 1.5+, Opera 9.5+, IE8, WebKit </li></ul></ul>
  22. 22. Issue #3: Is ARIA supported? <ul><li>Screen readers </li></ul><ul><li>ZoomText 9+ </li></ul><ul><li>JAWS 7.1+ </li></ul><ul><li>NVDA (free!) </li></ul><ul><li>VoiceOver (free!) </li></ul><ul><li>FireVox (free!) </li></ul><ul><li>Orca </li></ul><ul><li>JavaScript Libraries </li></ul><ul><li>Jquery UI </li></ul><ul><li>YUI </li></ul><ul><li>Dojo </li></ul><ul><li>ExtJS </li></ul><ul><li>GWT </li></ul><ul><li>Glow (BBC) </li></ul>
  23. 23. Issue #4: Complexity <ul><li>... it’s not exactly plug’n’play! </li></ul><ul><li>It’s a task just to set up the development environment. </li></ul><ul><li>Key board navigation requires complex JavaScript coding. </li></ul>
  24. 24. Issue #5: Do AT users update? <ul><li>Screen reader? </li></ul><ul><li>Mostly. </li></ul><ul><li>Browser? </li></ul><ul><li>Questionable. </li></ul>
  25. 25.’s not all doom and gloom <ul><li>Support is growing. </li></ul><ul><ul><li>You can use ARIA to improve your website right now . (Landmark Roles, Live Regions) </li></ul></ul>
  26. 26. Best practice <ul><li>WAI-ARIA is just one ‘layer’ of accessibility. </li></ul><ul><li>Don’t withhold content from users without JavaScript (use HIJAX). </li></ul><ul><li>Best practice techniques for front-end web development, & layer ARIA on where possible. </li></ul>
  27. 27. Resources <ul><li> </li></ul><ul><li>Probably the best introductory article online . </li></ul><ul><li> </li></ul><ul><li>Excellent set of ARIA test cases. </li></ul><ul><li> </li></ul><ul><li>Great all round accessibility resource, with emphasis on ARIA. </li></ul><ul><li> </li></ul><ul><li>Understandable W3C introduction to ARIA. </li></ul>
  • P3p3W

    Nov. 27, 2016
  • wojciechzajac

    Sep. 20, 2010
  • joeparis

    Jul. 4, 2010
  • toafu

    Jan. 30, 2010

Parallel session on 'An Introduction to WAI-ARIA' given by Dan Jackson, City University at the Institutional Web Management Workshop 2009, University of Essex, 28 - 30 July 2009. See and


Total views


On Slideshare


From embeds


Number of embeds