1. Modern Accessibility
Introduction to WAI - ARIA
Accessibility of Rich Internet Applications
Presented by: Ted Gies
Principal User Experience Specialist
Elsevier User Centered Design Group
t.gies@elsevier.com
World Usability Day 2012
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.

2. Download this Presentation at:
WWW.LINKEDIN.COM/IN/TEDGIES
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
2

3. A Poll – What’s your role?
 Web Developer
 UX Specialist
 Tech Writer
 Visual Designer
 QA
 Product Manager
 Accessibility Specialist
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
3

4. Overview
 Need for ARIA
 What is ARIA?
 ARIA Landmark Roles
 The Problem
 Code Example
 How to put it in your UI spec
 ARIA labels
 The Problem
 Code Example
 Technique
 Where to Find Accessible Components with ARIA
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
4

5. Introduction to ARIA
WHY DO WE NEED ADDITIONAL
ACCESSIBILITY TECHNIQUES?
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
5

6. Proliferation of RIA components in user interfaces
Tabs, Data Grids, Menus
Accordions Trees
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
6

7. Web components should sound and behave like desktop components
Yahoo Mail - Web Component Tabs
Outlook – MS Application Tabs
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
7

8. Better techniques for meeting existing A11y guidelines
IOS Voiceover landmarks navigation JAWS landmarks list
Section 508 (o)
A method shall be provided that permits users to skip repetitive navigation links.
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
8

9. Better techniques for meeting existing A11y guidelines
<label for="firstname">First Name</label>
<input type="text" id="firstname" aria-required="true" />
Section 508 (c)
Web pages shall be designed so that all information conveyed with color is also
available without color, for example from context or markup.
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
9

10. What is WAI - ARIA?
 ARIA = Accessibility of Rich Internet Applications
 W3C Web Accessibility Initiative Candidate
Recommendation Standard
 Techniques to allow your AT/screen reader to announce rich
descriptions of modern web components such as:
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
10

11. What is ARIA Not?
 Not a catch-all technique
 Not a replacement of familiar WCAG 1.0 best practices
 Not part of HTML 4 (is standard HTML5)
 Not a functional feature by itself
 Not going to affect the visual user experience
 Not a technique to make something keyboard operable
 Accessibility benefit comes about from the combo of:
1. ARIA markup
2. Browser Support
3. AT Support
4. correct JS management of ARIA attributes (in some cases)
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
11

12. Example of how ARIA works
User Agent – Internet Explorer The “code” in the
DOM is interpreted by
a browser and passed
to the Os via
Accessibility API like
MS UI Automation
<a role="tab" aria-selected="true“>INBOX (10050)</a>
The middle
man/translator sends
the ARIA info to the
AT
The AT/
screen reader speaks
or provides feature
“Inbox tab - selected”
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
12

13. ARIA and Browser Support
 ARIA is Supported by many up to date browsers:
 Firefox 3+, IE8+, Opera 9.5+, Safari 4+, Chrome 3+
 AT and Browsers are still playing catch up with many ARIA roles and
properties
 Paciello Group Blog HTML5 accessibility chops
 http://www.paciellogroup.com/blog/archive/
 Use this page to check support for your specific ARIA role and browser:
http://html5accessibility.com/
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
13

14. ARIA FAQ
 How do ARIA and HTML5 attributes line up?
 Overlap in some cases (e.g. <nav> interpreted as role=“navigation”
 ARIA is more widely supported than HTML5 accessibility elements
 What’s a good way to test for proper ARIA?
 Good inspection tools to test for the presence, but not for correct implementation
 Which sites are using ARIA?
 Yahoo
 GMAIL
 ScienceDirect
 ARIA and mobile?
 Some support, e.g. IOS rotor to navigate Landmarks
 For touch screen devices, Apple is working on device independent events
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
14

15. Introduction to ARIA
ARIA LANDMARK ROLES
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
15

16. ARIA Landmark Roles are Low Hanging Fruit
Perfectly validated HTML
Higher dev cost
Captioning for audio and video content
Higher dev cost
Meaningful Text equivalents for figures
Comprehensive Site Search
HTML equivalents for supplementary files
Replacing table based site with DIVs (e.g. ENA Skills Matrix PDF)
•Perfectly validated HTML Unambiguous Text equivalents for all controls,
•Perfectly validated CSS buttons, and use of color for meaning
Keyboard operability of all controls and scripts
•Form fieldset and legend
Proper use of structure (ordered lists)
•Keyboard shortcuts
Proper use of headings <h1>, <h2>
•Link to download software/player ARIA landmarks
•Row and column headings for tables Descriptive page titles
Skip Navigation Links
Flash workaround for keyboard trap
Site map
lower accessibility impact Higher accessibility impact
Higher accessibility impact
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
16

17. Lack of semantic roles to describe the page elements
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
17

18. Screen reader output of IMBD.com
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
18

19. Lack of semantic roles to describe the page elements
Site Search Login NAVIGATION
NAVIGATION Menu
MAIN CONTENT
MOVIE THEATER
SEARCH
Featured Movies Navigation
SOCIAL MEDIA
NAVIGATION
SUMMER MOVIE GUIDE
Navigation
TOP MOVIES
NAVIGATION
NEWS Navigation Its contents are proprietary and confidential to Elsevier.
This document is the property of Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
19

20. JAWS – List Landmarks (CTRL + INS + SEMICOLON)
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
20

21. JAWS – List Landmarks (CTRL + INS + SEMICOLON)
<div role=“search” aria-label=Quick Search”>
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
21

22. Apple VoiceOver Rotor Supports Landmark Roles
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
22

23. Summary of ARIA Landmark Roles
 banner - usually the main header of your site; the area with logo
 complementary - supporting section of page, separate from the main
content, like a sidebar.
 contentinfo - area that contains information about the site such as
copyright lines and links to privacy notices (i.e. page footer).
 main - the main content; area with central topic of the web page.
 navigation - a section for navigating the site.
 search - a section with a any type of search tool.
 application – an area of the screen where you want AT to give keyboard
control to that area (up and down arrow keys go straight to the
application and not through JAWS). DO NOT USE!
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
23

24. ARIA Landmark Best Practices
1. Every piece of content on the page should be contained within a landmark
2. Put landmark role within a <DIV> element
3. Landmarks can be nested. You can have search landmarks within a main
4. You should only have 1 each of Main, Banner, and Contentinfo landmarks
5. Do not use the Application landmark.
6. In addition to the role attribute, you should use an aria-labeledby or
aria-label e.g. <div role=search, aria-label=“documents”>
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
24

25. Example of UI Specification – ARIA Landmarks
DIV Description HTML/ARIA role
1 Global navigation <div aria-
with SciVerse links label="SciVerse" role="navigation">
2 ScienceDirect <div aria-
global navigation label="ScienceDirect" role=”navigation
”>
3 Results navigation <div aria-
label="Results" role="navigation">
4 Download options <div aria-label="Download
options" role="navigation">
5 Quick search <div class="singlesearch
js_searchform" aria-label="Quick
search" role="search“
6 Extended Search <div aria-
labelledby="extendedSearch"
role="search">
7 Left side pane <div class="toc" aria-label="table of
contents" role="navigation">
8 Article/middle pane <div class="content" aria-
label="Article" role="article">
9 Right side pane <div id="sidebar" aria-label=”Related
content” role="complementary">
10 Footer <div class="content" aria-
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. label=”product support”
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
role="contentinfo">
25

26. JAWS ARIA Landmarks Example
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
26

27. Introduction to ARIA
ARIA LABELS
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
27

28. Need for better labeling techniques
 No one told me that I was clicking on See more adult titles,
I thought I was clicking on See more opening this week titles
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
28

29. JAWS aria-labeledby Example
<span id=“myLabel”>Acta Biomateriala</span>
………
<a href=“” aria-labeledby=“myLabel”>Create RSS feed</a>
<a href=“” aria-labeledby=“myLabel”>Add to Favorites</a>
<a href=“” aria-labeledby=“myLabel”>Set alert</a>
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
29

30. ARIA Labels
 Use aria-label when
1. You need to label a graphical item or control (it’s like Alt text)
2. You don’t want your label to be visible
3. You are implementing landmarks
(e.g. role=“search” aria-label=“site”)
 Use aria-labeledby when
1. There is already a text label created and you want to use it as a label for
another element. E.g. use a heading to label another link.
2. When you have multiple labels to reference (e.g. form instructions)
3. When you want to provide more context to a repetitive element, e.g.
1. More
2. Click Here
3. About
 Use aria-describedby when
 You want a longer description and potentially a shorter label
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
30

31. Introduction to ARIA
COMPONENT LIBRARIES
WITH ARIA
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
31

32. 12 General Steps for Building an Accessible Widgets
with WAI-ARIA
1. Pick the widget type (role) from the WAI-ARIA taxonomy
2. From the role, get the list of supported states and properties
3. Establish the widget structure in the markup (parent/child)
4. Repeat steps 1-3 for the children of the parent
5. Establish keyboard navigation of the widget and plan for how it will be
navigated to within the document
6. Apply and manage needed WAI-ARIA states in response to user input events
7. Synchronize the visual UI with accessibility states and properties for supporting
user agents
8. Showing and Hiding Sections in a Widget
9. Support basic accessibility, such as alternative text on images
10. Establish WAI-ARIA relationships between this widget and others
11. Review widget to ensure that you have not hard coded sizes
12. Test with User agent, Assistive Technology, and People with disabilities
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
32

33. KISS: Just use components with built-in ARIA
Hans Hillen’s Accessible jQuery UI Components
<h2 role="tab" aria-controls="ui-accordion-sampleAccordion-panel-1“
aria-selected="false" tabindex="-1"></h2>
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
33

34. Use components with built-in ARIA
OpenAjax Alliance Accessibility Examples (44)
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
34

35. Where to Find components with built-in ARIA
 Hans Hillen’s Accessible jQuery UI Components
 IBM DOJO Accessibility
 Open AJAX Alliance Accessibility Examples
 Terrill Thompson’s Accessible Drop Down Navigation Menu
 http://www.html5accessibility.com/
 Look at Google.com
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
35

36. Introduction to ARIA
TOOLS FOR CHECKING ARIA
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
36

37. There are no perfect tools for testing ARIA implementation
 HUGE opportunity for a developer to come up with a validation of
legitimate or valid use of ARIA
 Test for free using JAWS or NVDA for windows, VoiceOver on Mac
 Stick to the basics and test with real users of Assistive Technologies
 Keyboard operability needs to always be considered with ARIA
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
37

38. Accessibility Inspector for Firebug
 http://code.google.com/p/ainspector/
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
38

39. WAVE
 http://wave.webaim.org/
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
39

40. W3C HTML 5 Nu Markup Validator
 http://validator.w3.org/nu/
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
40

41. ARIA Learning Resources
 W3C ARIA Design Patterns
 TPG Blog – ARIA Chops
 TPG Blog – Using ARIA Landmark Roles
 HTML5accessibility.com
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
41

42. Topics We Didn’t Cover
 ARIA live regions
 Don’t
use unless you are able to test
implementation with people with assistive
technologies!
 HTML 5 attributes vs. ARIA
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
42

43. Thank You
 We hope this was educational!
 Ted Gies (Dayton, OH U.S.)
ElsevierUCD
t.gies@elsevier.com
 Specialthanks to Dr. Jon Gunderson and Hadi
Rangin (Univ of Illinois Urbana Champaign) for
commitment to developing accessible tools and
standards
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
43

44. Introduction to ARIA
EXTRAS
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
44

45. ARIA Diagram
This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier.
Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
45