An Introduction to WAI-ARIA

1. An Introduction to WAI-ARIA Dan Jackson Web Team Leader City University London

2. About this session • What is ARIA? What does it do? • Why do we need it? • Roles, States and Properties, keyboard navigation, Live Regions • Where ARIA we with ARIA?*Problems & Issues • Best practice * All my puns are rubbish.

3. Get the acronym out of the way early doors.... Web Accessibility Initiative. Accessible Rich Internet Applications. It’s at ‘Final Call’ draft stage, i.e. it’s not a formal specification (yet).

4. What does ARIA do? W3Cese “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.” (http://www.w3.org/TR/wai-aria/) English It’s a W3C specification thatdefines a way to make Web content and Web applications more accessible to people with disabilities.

5. Why do we need ARIA? Some background... HTML is so, like, 1999: • very limited set of interface controls. • difficult communication model JavaScript is bitchin’: • dynamic interactions (drag & drop, sorting, resizing) • widgets (date pickers, sliders, tabs, progress bars, etc) • AJAX

6. Why do we need ARIA? So what’s the problem? • Widgets are inaccessible - Assistive Technologies (AT) don’t know what they do. • Widgets are rarely keyboard accessible. • Content updated using AJAX is not reported to AT.

7. ARIA to the rescue! ARIA provides semantic meaning, dynamic content updatesand consistent keyboard support to AT users.

8. Roles States and Properties Keyboard access Live Regions The technical part

9. Roles Roles define widgets and page structure. 2 categories: Landmark Roles Widget and Element Roles

10. Landmark Roles “The skip-links killer” Define the role of sections in the structure of a web page, e.g.: <div id=”header” role=”banner”> <div id=”content” role=”main”> Gives AT instant access to major page components

11. Landmark roles

12. Widget & Element Roles To describe GUI widgets, elements common on desktop but not native to HTML. Examples: grid menu progressbar slider tab toolbar tree

13. States and Properties Provide AT with information about how elements & widgets are configured, e.g.: has a button been pressed? <button aria-pressed=”true”> is an input field required? <input aria-required=”true”> how much of my file upload is complete? <div role=”progressbar” aria-valuetext="0%" aria-valuenow="0" aria-valuemax="100" aria-valuemin="0">

14. Accessibility isn’t just about screen readers.... Throw away your mouse.

15. Keyboard access ARIA extends the use of HTML’s tabindex attribute. tabindex = “0”: allows all elements to be accessed using keyboard. tabindex=”-1”: allows elements to be given programmatic focus without adding them to the tab order.

16. Eh? This is a good thing. Why? • Easier navigation through document, i.e. one ‘tab stop’ per UI control. • Gives keyboard access to widgets. • Manages keyboard control within widgets. • Establishes relationships between elements within widgets (e.g. parent/child/sibling in tree-view navigation).

17. Live Regions Are Way Cool Solves the problem of how to announce content updated by AJAX to screen reader users. Properties: aria-live = off | polite | assertive | rude aria-atomic = true | false aria-busy = true | false aria-relevant = additions | removals | text | all

18. Problems, issues: The V-Word ARIA vs. HTML 5 Is it supported? Complexity Will AT users adopt it? Where aria we with ARIA?

19. Issue #1: The V-Word Any Validation Nazis in the room? ARIA won’t validate with HTML 4.01, XHTML 1.0. What to do? • Put up with it. • Inject attribute values using JavaScript. • Create a custom DTD! • Use HTML 5!?

20. Issue #2: ARIA vs. HTML 5 ARIA HTML 5 New structural elements <nav> HTML 5 form attributes <input name=”email” type=”email required”> Landmark Roles <div role=”navigation”> ARIA Properties and States <input name=”email” aria-required=”true”> • But... • Many ARIA roles that have no HTML5 equivalent, e.g. application, banner, main. • And… • Argument over structural elements in HTML 5 = major shit-storm.

21. Issue #3: Is ARIA supported? To use ARIA you need a browser that both supports ARIA and is supported by a screen reader that also support ARIA. ARIA-aware OS/browser/AT combinations are some way off becoming the norm. Browsers: Firefox 1.5+, Opera 9.5+, IE8, WebKit http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html

22. Issue #3: Is ARIA supported? Screen readers ZoomText 9+ JAWS 7.1+ NVDA (free!) VoiceOver (free!) FireVox (free!) Orca JavaScript Libraries Jquery UI YUI Dojo ExtJS GWT Glow (BBC)

23. Issue #4: Complexity ...it’s not exactly plug’n’play! It’s a task just to set up the development environment. Key board navigation requires complex JavaScript coding.

24. Issue #5: Do AT users update? Screen reader? Mostly. Browser? Questionable. http://www.webaim.org/projects/screenreadersurvey/

25. ...it’s not all doom and gloom Support is growing. You can use ARIA to improve your website rightnow. (Landmark Roles, Live Regions)

26. Best practice • WAI-ARIA is just one ‘layer’ of accessibility. • Don’t withhold content from users without JavaScript (use HIJAX). • Best practice techniques for front-end web development, & layer ARIA on where possible.

27. Resources • http://dev.opera.com/articles/view/introduction-to-wai-aria/ Probably the best introductory article online . • http://wiki.codetalks.org/ Excellent set of ARIA test cases. • http://paciellogroup.com/blog Great all round accessibility resource, with emphasis on ARIA. • http://www.w3.org/WAI/intro/aria Understandable W3C introduction to ARIA.