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.
Accessibility: A Journey to Accessible Rich Components
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.
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”>
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?
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)
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
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>
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>
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
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
In my experience, the velocity at which you can learn a new language is often correlated with how quickly you get good at googling your issues.
a11y btw = accessiblity
In my experience, the velocity at which you can learn a new language is often correlated with how quickly you get good at googling your issues.
a11y btw = accessiblity
In my experience, the velocity at which you can learn a new language is often correlated with how quickly you get good at googling your issues.
a11y btw = accessiblity
started as a hobby
was really into design and the interface side of things
agency work was static websites. Glorified brochures
Freelancer where i worked on getting in debt
The INTERNET is one of the greatest inventions in recent human history, everyone should have access to it.
This was the first time I had even heard of the concept of a screen reader.
DEFINE SCREEN READER
The agency I worked for considered a11y as a checkmark for the deliverable. Something you do once.
The websites we worked on were mostly text and images
Sensible document structure
ROLE is an often overlooked attribute.
a11y relies on these landmark roles to determine context as they browse the page
At the time, we used tools like this to determine if our site was accessible.
Still a very useful tool today, but not so much in the context of our platform.
Very Practical tools for assessing markup quality for static sites.
At the time, we used tools like this to determine if our site was accessible.
Still a very useful tool today, but not so much in the context of our platform.
At the time, we used tools like this to determine if our site was accessible.
Still a very useful tool today, but not so much in the context of our platform.
At the time, we used tools like this to determine if our site was accessible.
Still a very useful tool today, but not so much in the context of our platform.
At the time, we used tools like this to determine if our site was accessible.
Still a very useful tool today, but not so much in the context of our platform.
Most improtant tool for Accessibility has a name that is nearly innaccessible to an english speaker
In recent years the Web Accessibility Initiative introduced a new accessibility API.
In recent years the Web Accessibility Initiative introduced a new accessibility API.
Define Users - like with any software, it’s important to define who your users are
Vision Impaired - can’t see the cursor
Dexterity Impaired - can’t use a mouse and sometimes require a special input devices
Hearing Impaired - can’t hear auditory cues
JAWS is especially well known.
Each piece of software comes with it’s own set of tools and shortcut keys. Keyboard based UI for traversing webpages, and with JAWS and VOICE OVER your whole OS
How is your markup?
Use a11y tools to assess where your shortcomings are
Define ANTI-PATTERNS
Is a design that may conflict with perceived design conventions.
If it doesn’t have a role, or doesn’t fit into one of the roles identified in the ARIA guidelines, there’s a good chance it is an Anti-Pattern
Hurdles like that can often be solved with a redesign
Sometimes we design things for a specific need while ignoring design conventions and not recognizing that we have existing form elements for that type of thing, or there are conventions out there that poeple have embraced, including the people behind WAI-ARIA.
live in a reality with stakeholders
a11y is not a checkmark you achieve once and forget about
If you want to do it properly, effectively, scalably, it is a paradigm shift for your development organization
a11y is not a checkmark you achieve once and forget about
If you want to do it properly, effectively, scalably, it is a paradigm shift for your development organization
a11y is not a checkmark you achieve once and forget about
If you want to do it properly, effectively, scalably, it is a paradigm shift for your development organization
a11y is not a checkmark you achieve once and forget about
If you want to do it properly, effectively, scalably, it is a paradigm shift for your development organization
2 Most imporant parts of Rich UI components
There are several important considerations when tackling a11y,
it affects everyone
theres a lot of people affected