Workshop on Web Accessibility on spring semester 2014 in Tallinn University

1. Web Accessibility Workshop
Session Four
Vladimir Tomberg, PhD
Tallinn University

2. Today Workshop
1. Presentation of the Homework;
2. WAI ARIA;
3. Core Components;
A. Abstract Roles;
B. Widget Roles;
C. Document Structure ROLES
D. Document landmarks roles
E. ARIA Properties And States
4. HTML5 AND WAI ARIA
5. WAI ARIA PROSPECT
6. Best Practices;
7. Homework Assignment 4
Web Accessibility
Workshop
2

3. 1. PRESENTATION OF HOMEWORK
Please be prepared to share your experience!
3
Web Accessibility
Workshop

4. 2. WAI ARIA
Introduction
4
Web Accessibility
Workshop

5. 5
• It has a very limited set of interface controls
and interactions
HTML is Very Static
Web Accessibility
Workshop
Picture Source: funnyvscute.com

6. JavaScript
• As the demand for rich
interaction
increased, JavaScript
became our saviour!
• However, many of
dynamic interactions
and widgets are
problematic for
Assistive Technologies
6
Web Accessibility
Workshop
Picture Source: toys4collection.blogspot.com

7. However…
• Many widgets are inaccessible by keyboard;
• ATs may not be made aware of dynamically
generated content as it is updated
7
Web Accessibility
Workshop

8. Here ARIA goes to the stage
8
Web Accessibility
Workshop

9. ARIA?
9
Web Accessibility
Workshop
Image source: www.artv.cl

10. 10
• Accessible Rich Internet Applications;
• Specification developed by the PFWG of the W3C’s
WAI;
• W3C Recommendation, 20 March 2014
• http://www.w3.org/TR/wai-aria/
WAI ARIA!
Web Accessibility
Workshop
Open this link and
refer to this page
during the workshop!

11. Web Accessibility
Workshop
11

12. WAI ARIA
12
Web Accessibility
Workshop
Clipart by Blinkofyoureye.com

13. 13
What's it do?
Without WAI-ARIA
Web Accessibility
Workshop
Source: blog.paciellogroup.com

14. 14
What's it do?
With WAI-ARIA
Web Accessibility
Workshop
Source: blog.paciellogroup.com

15. 15
• The addition of a role attribute
<a href="#" title="OK"
role="button">
<img src="ok.gif" alt="OK">
</a>
What's the Difference?
Web Accessibility
Workshop
Source: blog.paciellogroup.com

16. What's Gained?
• Correct role information: "Button"
• Usage instructions: "To activate press
spacebar"
16
Web Accessibility
Workshop
Source: blog.paciellogroup.com

17. 17
<input type="image“
src="ok.gif“
alt="OK">
Couldn't this Example Also Be
Achieved Without Using WAI - ARIA?
Web Accessibility
Workshop
• Yes;
• Wherever possible use native HTML elements

18. 18
What's it do without WAI-ARIA
(example two)
Web Accessibility
Workshop
Source: blog.paciellogroup.com

19. 19
What's it do with WAI-ARIA
Web Accessibility
Workshop
Source: blog.paciellogroup.com
What's the difference?

20. 20
<input type="image“
src="hioff.gif“
alt="highlight">
button is
selected
Without WAI-ARIA
Web Accessibility
Workshop
<input type="image“
src="hion.gif“
alt="highlight">
Button is not
selected
Source: blog.paciellogroup.com

21. 21
<input type="image"
src="hioff.gif"
alt="highlight"
role="button"
aria-pressed="false">
button
selected
With WAI-ARIA
Web Accessibility
Workshop
<input type="image"
src="hion.gif"
alt="highlight"
role="button"
aria-pressed="true">
button not
selected
Source: blog.paciellogroup.com

22. What's Gained?
state information: "pressed"
22
Web Accessibility
Workshop
Source: blog.paciellogroup.com

23. Progress Bar Code Example
<div
id="percent-loaded"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
/>
23
Web Accessibility
Workshop
Source: developer.mozilla.org

24. The Purpose
• The main purpose of ARIA is to allow
JavaScript to communicate dynamic changes
in roles, states, and relationships to assistive
technologies;
• Most of the ARIA specification is intended for
use in web applications, rather than in static
web content, but some of the ARIA roles
overlap with some of the new HTML 5
elements
24
Web Accessibility
Workshop
Source: dequeuniversity.com

25. ARIA Attributes are Typically Added and
Updated Dynamically Using JavaScript Code
// Find the progress bar <div> in the DOM.
var progressBar = document.getElementById("percent-loaded");
// Set its ARIA roles and states, so that assistive technologies
know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);
// Create a function that can be called at any time to update
the value of the progress bar.
function updateProgress(percentComplete) {
progressBar.setAttribute("aria-valuenow", percentComplete);
}
25
Web Accessibility
Workshop
Source: developer.mozilla.org

26. Additional Development Layer
http://www.slideshare.net/ginader/the-5-layers-of-
web-accessibility
26
Web Accessibility
Workshop

27. 3. CORE COMPONENTS
Roles, properties, and states
27
Web Accessibility
Workshop

28. Roles
• ARIA roles define what an element is or does;
• Most HTML elements have a default role that is
presented to assistive technology. For example, a
button has a default role of "button" and a form
has a default role of "form“;
• With ARIA, you can define roles that are not
available in HTML;
• You can also override HTML's default roles. This
allows you to present elements and widgets in
HTML to screen readers in a more accurate and
accessible way
28
Web Accessibility
Workshop
Source: webaim.org

29. Categorization of Roles
29
Web Accessibility
Workshop
Source: www.w3.org

30. 3.A ABSTRACT ROLES
30
Web Accessibility
Workshop

31. Abstract Roles
• Abstract roles are used for the
ontology only;
• Authors MUST NOT use abstract
roles in content;
• Useful roles
(widget, document, landmark)
inherit properties from the
abstract roles
• command
• composite
• input
• landmark
• range
• roletype
• section
• sectionhead
• select
• structure
• widget
• window
31
Web Accessibility
Workshop

32. 3.B WIDGET ROLES
32
Web Accessibility
Workshop

33. What is a Widget?
• The term 'widget' is broadly used to describe interactive
elements that are created and controlled through scripting;
• It refers to controls that are not native to HTML or to HTML
controls that are greatly enhanced through scripting;
• Examples of widgets would include sliders, drop-down and
fly-out menus, tree systems, drag and drop controls, auto-
completing text boxes, and tooltip windows;
• Accessibility of widgets does not happen natively or
naturally. HTML has very limited markup for defining
complex widgets.
33
Web Accessibility
Workshop
Source: webaim.org

34. The Complexity Issues
• How do you make a complex menu system
intuitively keyboard accessible?
• How do you make a drag-and-drop element
keyboard accessible?
• How do you present ordering details for
sortable list items?
• How do you present visual tooltips or pop-up
messages to blind users?
34
Web Accessibility
Workshop
Source: webaim.org

35. New Widget Roles
• By establishing a standard set of
roles, properties, and values, ARIA allows
developers to address these accessibility
issues with relative ease
35
Web Accessibility
Workshop
Source: webaim.org

36. Widget Roles Act as Standalone UI Widgets or
as Part of Larger, Composite Widgets
• alert
• alertdialog
• button
• checkbox
• dialog
• gridcell
• link
• log
• marquee
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• progressbar
• radio
• scrollbar
• slider
• spinbutton
• status
• tab
• tabpanel
• textbox
• timer
• tooltip
• treeitem
36
Web Accessibility
Workshop

37. Widget Roles Act as
Composite UI Widgets
• combobox
• grid
• listbox
• menu
• menubar
• radiogroup
• tablist
• tree
• treegrid
37
Web Accessibility
Workshop

38. Keyboard Handling
• Every widget needs to be operable by keyboard;
• Common keystrokes are:
 Arrow keys
 Home, end, page up, page down
 Enter, space
 ESC
38
Web Accessibility
Workshop
Source: slideshare.net

39. Focus & Keyboard Accessibility
• To be accessible, ARIA input widgets need
focus:
 Use natively focusable elements, such as
<a>, <input />, etc
 Add ‘tabindex’ attribute for non focusable
elements, such as <span>, <div>, etc.
• Tabindex=“0”: Element becomes part of the tab order
• Tabindex=“-1” (Element is not in tab order, but
focusable)
39
Web Accessibility
Workshop
Source: slideshare.net

40. 40
<span style="background-color: #ddd; border: medium
outset white;" role="button" tabindex="0"
onkeydown="if(event.keyCode==13 ||
event.keyCode==32) alert('You activated me with the
keyboard');" onclick="alert('You clicked me with the
mouse');">Push Me</span>
• In this example, the text is styled to visually appear like a
button;
• The role="button" tells the browser that the text should
behave as a button;
• tabindex="0" puts the element into the keyboard
navigation flow so keyboard users can activate the button.
Accessible Button Example
Web Accessibility
Workshop

41. 3.C DOCUMENT STRUCTURE ROLES
41
Web Accessibility
Workshop

42. Start Structuring with HTML5
42
Web Accessibility
Workshop
Source: classroom.w3devcampus.com

43. Document Structure Roles
• Roles for document structure support the
accessibility of dynamic web content by
helping assistive technologies determine
active content versus static document
content;
• Structural roles by themselves do not all map
to accessibility APIs, but are used to create
widget roles or assist content adaptation for
assistive technologies
43
Web Accessibility
Workshop

44. Document Structure Roles Describe
Structures that Organize Content in a Page
Document structures are not usually interactive
• listitem
• math
• note
• presentation
• region
• row
• rowgroup
• rowheader
• separator
• toolbar
Web Accessibility
Workshop
44
• article
• columnheader
• definition
• directory
• document
• group
• heading
• img
• list

45. 3.D DOCUMENT LANDMARK ROLES
45
Web Accessibility
Workshop

46. The Problem
• There is no mechanism for identifying the
function or purpose of HTML elements in a
programmatically determinable way (like
navigation, search, etc.);
• Browser or screen reader has no way of knowing
what portion of the page contains the navigation
elements;
• This problem is evidenced by the need for "Skip
to main content" or "Skip navigation" links
46
Web Accessibility
Workshop
Source: webaim.org

47. Roles for regions of the page
intended as navigational landmarks
• application
• banner
• complementary
• contentinfo
• form
• main
• navigation
• search
47
Web Accessibility
Workshop

48. WAI ARIA Document Landmark Roles
• Application
 A region declared as a web application, as opposed to a
web document;
• Banner
 Site-oriented content, such as the name of the web
site, title of the page, and/or the logo;
• Complementary
 Supporting content for the main content;
• Contentinfo
 Informational child content, such as
footnotes, copyrights, links to privacy statement, links to
preferences, and so on
48
Web Accessibility
Workshop

49. WAI ARIA Document Landmark Roles
• Form
 A landmark region that contains a collection of items and
objects that, as a whole, combine to create a form;
• Main
 The main or central content of the document;
• Navigation
 The area that contains the navigation links for the
document or web site;
• Search
 This section contains the search functionality for the site;
49
Web Accessibility
Workshop

50. Structuring Page with
Landmarks Roles
50
Web Accessibility
Workshop

51. How ARIA Landmark Roles
Help Screen Reader Users
51
Web Accessibility
Workshop
Source: youtube.com

52. Using Landmark Role
Simple Example
<div id="header" role="banner">A banner image and
introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links
here ... </div>
<div id="content" role="main"> ... Ottawa is the
capital of Canada ...</div>
<div id="rightsideadvert"
role="complementary">....an advertisement
here...</div>
<div id="footer" role="contentinfo">(c)The Freedom
Company, 123 Freedom Way, Helpville, USA</div>
52
Web Accessibility
Workshop
Source: www.w3.org

53. Example 2: Two or More of the Same Type of
Landmark on the Same Page
<div id="leftnav" role="navigaton"
aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation"
aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div>
53
Web Accessibility
Workshop
Source: www.w3.org

54. Example 3: Two or More of the Same Type of
Landmark on the Same Page, and no Text
that can be Referenced as the Label
<div id="leftnav" role="navigaton"
aria-label="Primary">
<ul><li>...a list of links here ...</li></ul>
</div>
<div id="rightnav" role="navigation"
aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>
54
Web Accessibility
Workshop
Source: www.w3.org

55. Example 4: Search Form with "Search" Landmark.
Typically Goes on the Form Field
or Div Surrounding the Search Form
<form role="search">
<label for="56">search</label><input id="56"
type="text" size="20">
...
</form>
55
Web Accessibility
Workshop
Source: www.w3.org

56. Another Example of Structured Document
with ARIA Code
56
Web Accessibility
Workshop
Source: carmenwiki.osu.edu

57. Page navigation with WAI-ARIA Landmarks
http://www.youtube.com/watch?v=gS7Op020o-8
57
Web Accessibility
Workshop

58. 3.E ARIA PROPERTIES AND STATES
58
Web Accessibility
Workshop

59. What Properties Are?
• ARIA properties define... well, properties or
meanings of elements.;
• You can extend HTML's native semantics by
defining properties for elements that are not
allowed in standard HTML;
59
Web Accessibility
Workshop
Source: webaim.org

60. 60
<input aria-required="true">
• This property will cause a screen reader to
read this input as being required (meaning the
user must complete it)
Example of Property
Web Accessibility
Workshop
Source: webaim.org

61. What States Are?
• ARIA states are properties that define the
current condition of an element;
• They generally change based on user
interaction or some dynamic variable
61
Web Accessibility
Workshop
Source: webaim.org

62. 62
<input aria-disabled="true">
• This property will cause a screen reader to
read this input as being disabled, but this
state value could easily be changed
to "false" dynamically based on user input
Example of State
Web Accessibility
Workshop
Source: webaim.org

63. Global States and Properties
Properties
• aria-atomic
• aria-controls
• aria-describedby
• aria-dropeffect
• aria-flowto
• aria-haspopup
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
States
• aria-busy
• aria-disabled
• aria-grabbed
• aria-hidden
• aria-invalid
63
Web Accessibility
Workshop
Global states and properties are supported by all roles and by all
base markup elements

64. Demo: Adding aria-describedby
to “more” Links
Without aria-describedby With aria-describedby
64
Web Accessibility
Workshop

65. Use role="img" and aria-label to Make a CSS Background
Image be Treated Like a Foreground Image
http://www.youtube.com/watch?v=v1gsOG5IEhs#t=40
65
Web Accessibility
Workshop

66. Widget Attributes
Properties
• aria-autocomplete
• aria-haspopup
• aria-label
• aria-level
• aria-multiline
• aria-multiselectable
• aria-orientation
• aria-readonly
• aria-required
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
States
• aria-checked
• aria-disabled
• aria-expanded
• aria-hidden
• aria-invalid
• aria-pressed
• aria-selected
66
Web Accessibility
Workshop
Widget attributes might be mapped by a user agent that MUST
provide a way for AT to be notified when states change

67. Live Region Attributes
Properties
• aria-atomic
• aria-live
• aria-relevant
States
• aria-busy (state)
67
Web Accessibility
Workshop
• Live attributes are intended for live regions in rich internet
applications;
• These attributes may be applied to any element;
• The purpose of these attributes is to indicate that content
changes may occur without the element having focus, and to
provide assistive technologies with information on how to
process those content updates

68. WAI-ARIA Live Region Example
http://www.youtube.com/watch?v=jFB_zJE_pjY
68
Web Accessibility
Workshop

69. Drag-and-Drop Attributes
Properties
• aria-dropeffect
States
• aria-grabbed
69
Web Accessibility
Workshop
• Drag-and-Drop attributes indicate information about drag-
and-drop interface elements, such as draggable elements
and their drop targets

70. 70
Relationship Attributes indicate relationships or
associations between elements which cannot be
readily determined from the document
structure
• aria-activedescendant
• aria-controls
• aria-describedby
• aria-flowto
Relationship Attributes
Web Accessibility
Workshop
• aria-labelledby
• aria-owns
• aria-posinset
• aria-setsize

71. Using aria-labelledby to Dynamically Label
a Form Text Field
http://www.youtube.com/watch?v=Xr32OASZO_Q
71
Web Accessibility
Workshop

72. 4. HTML5 AND WAI ARIA
72
Web Accessibility
Workshop

73. Comparing HTML 5 Tags
to ARIA Roles
HTML 5 ARIA Role
<header> role="banner"
<nav> role="navigation"
<main> role="main"
<footer> role="contentinfo"
<aside> role="complementary"
<section> role="region" *
<article> role="article" *
none role="search"
<form> role="form"
73
Web Accessibility
Workshop
Source: dequeuniversity.com
More detailed comparison is here: blog.paciellogroup.com

74. The Page that Uses
WAI ARIA without HTML5
<div role="banner">
<p>Put company logo, etc. here.</p>
</div>
<div role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</div>
<div role="main">
<p>Put main content here.</p>
</div>
<div role="contentinfo">
<p>Put copyright, etc. here.</p>
</div>
74
Web Accessibility
Workshop
Source: dequeuniversity.com

75. The Same Web Page that Uses
HTML5 and WAI ARIA
<header role="banner">
<p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main role="main">
<p>Put main content here.</p>
</main>
<footer role="contentinfo">
<p>Put copyright, etc. here.</p>
</footer>
75
Web Accessibility
Workshop
Source: dequeuniversity.com

76. Similar Example Again
76
Web Accessibility
Workshop

77. 5. WAI ARIA PROSPECT
77
Web Accessibility
Workshop

78. Will adding ARIA change my page
styles or behavior?
• No, ARIA is only made available to assistive
technology API's, and doesn't affect native
browser functionality with respect to the
DOM or styling;
• From the browser's point of view, the native
HTML defines the semantic meaning and
behavior of an element, with ARIA attributes
acting as a layer on top to help support the AT
API
78
Web Accessibility
Workshop
Source: developer.mozilla.org

79. WAI ARIA Support by Browsers
Browser
Minimum
Version
Notes
Firefox 3.0+ Works with NVDA, JAWS 10+ and Orca
Chrome Latest
Screen reader support still experimental as of
Chrome 15
Safari 4+
Safari 5 support is much improved.
Live region support requires Safari 5 with VoiceOver
on iOS5 or OS X Lion
Opera 9.5+ Requires VoiceOver on OS X
Internet Explorer 8+
Works with JAWS 10+ and NVDA. No live region
support in NVDA.
IE9 support is much improved.
79
Web Accessibility
Workshop
Source: developer.mozilla.org

80. Compatibility table for support of
WAI-ARIA Accessibility features
80
Web Accessibility
Workshop
Source: caniuse.com/wai-aria

81. How well is ARIA supported?
81
Web Accessibility
Workshop
JAWS 13 NVDA 2012
Orca
VoiceOver
Window eyes
7.5
0
1
2
3
4
5
6
7
8
9
10
1
Supportscore
Screen Readers
Source: slideshare.net

82. JS Libraries and WAI-ARIA
• JQuery UI
– accordion
– dialog
– progress bar
• Full ARIA implementation
planned for JQuery UI version
2.0
• Sencha Ext JS
• ARIA is a high priority in Ext 4.
According to developers, it's built
in to every Component.
• Google Web Toolkit
– Custom Button
– Date Picker
– Suggest Box
– Tree
– Menu Bar
– Rich text
– Tab Panel
82
Web Accessibility
Workshop
Source: blog.paciellogroup.com

83. Is ARIA Used Correctly?
• Research on ARIA landmark role use on the
top 10,000 web sites HTML (2012);
• 93 pages found to include the banner role;
• 130 pages found to include the main role;
• 72 pages found to include the contentinfo
role;
• From an initial analysis the correct use of ARIA
landmark roles is surprisingly high
83
Web Accessibility
Workshop
Source: blog.paciellogroup.com

84. 6. BEST PRACTICES
Please be prepared to share your experience!
84
Web Accessibility
Workshop

85. 85
<html>
<head><title>Gracefully degrading progress bar</title></head>
<body>
<progress id="progress-bar" value="0" max="100">0% complete</progress>
<button id="update-button">Update</button>
</body>
</html>
var progressBar = document.getElementById("progress-bar");
// Check to see if the browser supports the HTML5 <progress> tag.
var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
function setupProgress() {
if (!supportsHTML5Progress) {
// HTML5 <progress> isn't supported in this browser, so we need to add
// ARIA roles and states to the element.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);
}
}
function updateProgress(percentComplete) { // Output omitted, follow the link for code…
Graceful Degradation for WAI ARIA:
HTML5 Markup Used for Progress Bar and JavaScript
code for older browsers
Web Accessibility
Workshop
Source: developer.mozilla.org

86. Using Landmarks Roles
• Identify the logical structure of your page;
• Implement the logical structure in HTML
markup with <div> or <iframe>;
• Label each region with a perceivable header;
• Assign landmark roles to each region
86
Web Accessibility
Workshop

87. Structuring Page with
Landmarks Roles
87
Web Accessibility
Workshop

88. 7. HOMEWORK ASSIGNMENT 4
88
Web Accessibility
Workshop

89. Adding WAI ARIA to a Page
1. Choose two pages from representative
sample you used in previous assignment;
2. Identify structure of the page by dividing
code onto logical blocks if it is not ready. Use
<div> tags;
3. Add ARIA Landmark Roles to these elements;
4. Add by necessary tab order for menu
89
Web Accessibility
Workshop

90. Validate Your Page
http://validator.w3.org/nu/
90
Web Accessibility
Workshop

91. Evaluation
5. Validate your page using validator from
previous slide;
6. Test your pages with your favorite Screen
Reader;
7. Reflect your experience in your blog, write
about problems and differences in use of AT
that you observed with and without ARIA
91
Web Accessibility
Workshop

92. This Course Hands On Experience
92
Web Accessibility
Workshop
Evaluation of
a page
to WCAG
Conformance
Testing and
repairing
accessibility
errors in code
Using Screen
Reader to access
page content
Embedding WAI
ARIA code to
improve
accessibility
Session One Session Two Session Three Session Four

93. Thank you for participation!
The assignment implementation deadline is
June 1st
Please, be in time!
Do not forgot to register into exam one week
before!
93
Web Accessibility
Workshop

94. End of the Course
94
Web Accessibility
Workshop