Accessibility on the web can be a complex enigma to many web developers and designers. Achievers knows this first hand and in this talk Jason will cover how we approached making a large platform like Achievers accessible. He will also briefly cover some accessibility basics before digging into the journey of making our rich UI components accessible. Jason Jang has been building websites since tables were all the rage. Along the way he's designed and developed both as a freelancer, and at various advertising agencies. His 10+ year journey landed him at Achievers where he's tackling the platform's accessibility by the horns.

1. A Journey to Accessible
Rich UI Components
with Jason Jang
“Journey” sounds inappropriately epic and kind of cornered me into a theme, for this, my first talk.

2. What to Expect
▹My story
▹Important Considerations for our
organization
▹Code Examples of making a Rich UI
Component accessible

3. Sometimes the hardest part of learning a
language, is learning the language around
the language.
Disclaimer
Whoa, deep.

4. Some Terminology
▹a11y > accessibility
▹component > a part of an interface
▹Rich UI > interactive components
Whoa, deep.

5. My Story
Whoa, deep.

6. In the beginning...
▹“Making websites” was a hobby
▹… that became a side gig
▹… that became a part-time gig
▹… that became a full-time gig at an agency
▹… that became a stint as a freelancer
▹… that became a full-time gig at Achievers
There. There’s your journey.

7. First Encounter with a11y
▹Everyone uses the Internet
▹People use screen readers? Never got use one.
▹A11y considered a checkmark
▹All text and images

8. First Encounter with a11y
Semantic HTML and good markup
▹ Headings, Lists, Links
▹ <b> <i> vs <strong> <em>
Landmark Roles:
▹<div role=”banner”>
▹<div role=”form”>
▹<div role=”main”>
▹<div role=”navigation”>
▹<div role=”search”>

11. a11y Tools
▹WAVE Accessibility Tool
▹aChecker
▹Quail (JS Accessibility Tool)
▹Google Accessibility Tool

12. Fast-forward 5 or so years
I lost count

13. Platform Demo

14. Jason, can we make this accessible?

22. ARIA SAVES THE DAY!

23. WHY ARIA?
...and not Arya?

24. WAI-ARIA!
Web Accessibility Initiative – Accessible Rich Internet Applications
Henceforth referred to as accessibility API or ARIA

25. listitem
log
main
marquee
math
menu
menubar
menuitem
menuitemcheckbox
menuitemradio
navigation
note
option
presentation
dialog
directory
document
form
grid
table
gridcell
group
heading
img
input (abstract role)
landmark
linklist
listbox
alert
alertdialog
application
article
banner
button
checkbox
columnheader
combobox
command
complementary
composite
contentinfo
definition
progressbar
radio
radiogroup
range (abstract role)
region
roletype (abstract role)
row
rowgroup
rowheader
scrollbar
search
section (abstract role)
LOOK AT ALL THESE ROLES!

26. alert
alertdialog
application
article
banner
button
checkbox
columnheader
combobox
command
complementary
composite
contentinfo
definition
dialog
directory
document
form
grid
table
gridcell
group
heading
img
input (abstract role)
landmark
listitem
log
main
marquee
math
menu
menubar
menuitem
menuitemcheckbox
menuitemradio
navigation
note
option
presentation
dialog
directory
document
form
grid
table
gridcell
group
heading
img
input (abstract role)
landmark
linklist
listbox
progressbar
radio
radiogroup
range (abstract role)
region
roletype (abstract role)
row
rowgroup
rowheader
scrollbar
search
section (abstract role)
LOOK AT ALL THESE ROLES!

27. a11y: You’ve Changed
This is not the Aria you were looking for, and that’s a reference to something else entirely.

28. a11y: You’ve Changed
▹ Support for Rich Interfaces
▹new roles <div role=”button”>
▹presentation changes <div role=”button” aria-pressed=”true”>
▹asynchronous content <div role=”button” aria-pressed=”true”>
▹ a11y evaluation tools still useful elsewhere

29. We’re all equipped and ready to go!
Right?

31. WaitBefore we could dig into it...

32. Important Considerations
For your Organization
There were several

33. Important Considerations
1. Define Users
a. Assistive Technologies
2. Take Stock of Codebase and UI
3. Determine rollout plan
4. How will you influence a Paradigm Shift?

34. 1. Define Users

35. 1. Define Users
▹Vision-impaired
▹Dexterity-impaired
▹Hearing impaired

36. 1a. Assistive Technologies
Learn about the Tools
▹JAWS, NVDA, VoiceOver
▹Windows Eyes, ZoomText
▹Specialized Input Devices

37. 2. Take Stock of Your
Codebase and UI

38. 2. Take Stock of Codebase and UI
▹How is your markup?
▹Identify and address Anti-Patterns
▹Breakdown features into components so
you can tackle them individually (Agile)

39. 3. Take Stock of Codebase
and UI

40. 3. Determine Rollout Plan
▹ Prioritize core features
▹ Break down into components
▹ Tackle global elements
▹ Don’t omit features or content

41. 4. Influence a Paradigm Shift

42. ▹a11y is NOT a checkmark
▹Affects everyone in the development lifecycle
4. Influence a Paradigm Shift

43. Education
▹Devs and Testers need software training
▹Designers need to understand a11y needs for both
users and developers
▹Project Managers need to know how to break the
work down
4. Influence a Paradigm Shift

44. 4. Influence a Paradigm Shift
Process Improvement
▹Design mocks need to be vetted for a11y at design
stage before development begins
▹Pattern/Component Library even more valuable

45. 4. Influence a Paradigm Shift
Testing
▹a11y testing can be expensive
▹Some automation possible
▹Manual testing required
▹Testing with real users is the only real test

46. Okay, with all things considered...

47. Accessible Rich UI Components
The Code Demo

48. a11y Rich UI Components...
1. ...use WAI-ARIA for communicating:
▹Roles
▹Presentation changes like state and visibility
▹Asynchronous content changes
2. …are fully keyboard accessible

49. Time for a quick
SCREEN READER DEMO

50. and now for some
CODE EXAMPLES

51. Code Examples
1. Form Basics
2. Live Regions
3. Slider Example
4. Tabs and Tab Panels

52. Code Example 1: Form Basics (1 of 3)

53. Code Example 1: Form Basics (2 of 3)
<label>Your email</label>
<input type="email" />
<label>Reason for contacting</label>
<select>
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
<label>Message</label>
<textarea></textarea>

54. Code Example 1: Form Basics (3 of 3)
<label for="email">Your email</label>
<input id="email" type="email" />
<label for="reason">Reason for contacting</label>
<select id="reason">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
<label for="message">Message</label>
<textarea id="message"></textarea>

55. Code Example 2: Live Region (1 of 3)

56. <!-- FORM-->
<label for="message">Message</label>
<textarea id="message"></textarea>
<input class="button-primary" type="submit" value="Submit">
<!-- THROBBER TO INDICATE AJAX CALL -->
<img src="img/ajax-loader.gif" js-throbber class="hidden">
<!-- FEEDBACK FOR AJAX CALL -->
<div class="alert error hidden" js-ajax-alert="error" ><a href="#message">There
was an error with your message</a></div>
<!-- LIVE REGION -->
<div role="alert" aria-live="assertive" aria-relevant="additions"
class="a11yHiddenText" js-globalLiveRegion></div>
Code Example 2: Live Region (2 of 3)

57. <script>
function formSubmit() {
$("form").submit(function() {
showThrobber();
$.ajax( "formSubmit.php" )
.done(function() {
hideThrobber();
alert( "success" );
})
.fail(function() {
hideThrobber();
alert( "error" );
});
});
}
</script>
Code Example 2: Live Region (2 of 3)

58. Code Example 2: Live Region (3 of 3)
<script>
function formSubmit() {
$("form").submit(function() {
showThrobber();
$.ajax( "formSubmit.php" )
.done(function() {
hideThrobber();
updateLiveRegion("Form submitted successfully");
})
.fail(function() {
hideThrobber();
updateLiveRegion("Form submit unsuccessful");
});
});
}
function updateLiveRegion(text) {
$("[js-globalLiveRegion]").html(text);
}
</script>

59. Code Example 2: Live Region (3 of 3)
<script>
function formSubmit() {
$("form").submit(function() {
submitPending(true);
$.ajax( "formSubmit.php" )
.done(function() {
submitPending(false);
updateLiveRegion("Form submitted successfully");
})
.fail(function() {
submitPending(false);
updateLiveRegion("Form submit unsuccessful");
});
});
}
function updateLiveRegion(text) {
$("[js-globalLiveRegion]").html(text);
}
function submitPending(true) {
showThrobber(true);
disableSubmit(true);
}
function disableSubmit(state) {
$("#submit")
.attr("aria-disabled", state)
.attr("disabled", "disabled")
.addClass('.disabled');
}
</script>

60. <div js-slider>
<span class="ui-slider-handle" tabindex="0"></span>
</div>
Code Example 3: Slider
<div js-slider>
<span class="ui-slider-handle" tabindex="0"
role="slider" aria-valuemin="0" aria-valuemax="500" aria-valuenow="0" aria-
valuetext="0"></span>
</div>
$slider.slider({
value: 0,
min: 0,
max: 500,
step: 50,
slide: function(event, ui) {
$display.html(ui.value);
var $handle = $slider.find(".ui-slider-handle");
$handle
.attr("aria-valuemin", 0)
.attr("aria-valuemax", 500)
.attr("aria-valuenow", 0)
.attr("aria-valuetext", 0);
}
});

61. Code Example 4: Tabs

62. Code Example 4: Tabs
<div id="tabs-container" js-tabContainer class="clearfix">
<ul class="tabs-menu">
<li class="current"><a href="#tab-1" js-tab>Tab 1</a></li>
<li><a href="#tab-2" js-tab>Tab 2</a></li>
<li><a href="#tab-3" js-tab>Tab 3</a></li>
<li><a href="#tab-4" js-tab>Tab 4</a></li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>...</p>
</div>
<div id="tab-2" class="tab-content">
<p>...</p>
</div>
<div id="tab-3" class="tab-content">
<p>...</p>
</div>
<div id="tab-4" class="tab-content">
<p>...</p>
</div>
</div>
</div>

63. Code Example 4: Tabs
<div id="tabs-container" js-tabContainer class="clearfix">
<ul class="tabs-menu" role="tablist">
<li role="tab" aria-selected="true" class="current"><a href="#tab-1" js-tab>Tab 1</a></li>
<li role="tab" aria-selected="false"><a href="#tab-2" js-tab>Tab 2</a></li>
<li role="tab" aria-selected="false"><a href="#tab-3" js-tab>Tab 3</a></li>
<li role="tab" aria-selected="false"><a href="#tab-4" js-tab>Tab 4</a></li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content" role="tabpanel" aria-hidden="false">
<p>...</p>
</div>
<div id="tab-2" class="tab-content" role="tabpanel" aria-hidden="true">
<p>...</p>
</div>
<div id="tab-3" class="tab-content" role="tabpanel" aria-hidden="true">
<p>...</p>
</div>
<div id="tab-4" class="tab-content" role="tabpanel" aria-hidden="true">
<p>...</p>
</div>
</div>
</div>

64. Code Example 4: Tabs
function initTabsKeyboardA11y($tabsContainer) {
$("[js-tabContainer]").keydown(function(e) {
e.preventDefault();
var $currentTab = $(this).find("[role=tab].current [js-tab]");
var keyPressed = getKeyName(e.keyCode);
if (keyPressed === "right") {
var $next = $currentTab.parent().next().find("[js-tab]")
if ($next) {
$next.trigger("click").focus();
}
} else if (keyPressed === "left") {
var $prev = $currentTab.parent().prev().find("[js-tab]")
if ($prev) {
$prev.trigger("click").focus();
}
}
});
}

65. Knowledge Nugget!
If you can’t find an ARIA ROLE that
addresses your design pattern, there’s a
good chance you have an ANTI-PATTERN
(or they just call it by a different name :)

66. Time for another quick
SCREEN READER DEMO
This time on an accessible page

67. Keyboard Accessibility

68. Keyboard Accessibility
▹ Screen Readers Provide shortcuts to traverse page
▹ TAB is also commonly used
▹ Certain ROLEs expect the use of arrow keys
▹ You can often refer to OS or other online examples
for keyboard flow

69. Keyboard Accessibility
● Get to know tabindex
● Both ENTER and SPACEBAR should trigger
a click
● In Forms, SPACEBAR activates, ENTER
submits the form

70. Biggest Hurdles
▹Learning to use screen readers (ongoing!)
▹Deciding where to start
▹Testing

71. Added Benefits from A11y
Improved UI
▹Forces you to scrutinize UI decisions
▹Opportunity to fix design decisions

72. Food for Thought
▹ Decouple your a11y JS from regular JS
▹ Create helpers for JS and SCSS
▹ Here’s a clever way to enforce a11y

73. Before we finish...

74. Let’s Remember
Influence a Paradigm Shift
▹A11y affects everyone
▹Consider users, testers, designers, developers….

75. Let’s Also Remember
Rich Components...
▹Leverage WAI-ARIA to comm. with screen readers
▹Provide Keyboard a11y

76. Special Thanks
Chris Gurney (PM) &
Avinder Walia (Dev)