Agile Accessibility Handbook
Agile Accessibility Handbook
Agile Accessibility Handbook
©2020 Dylan Barrell. All Rights Reserved. No part of this publication may be
reproduced, stored in a retrieval system or transmitted in any form by any means
electronic, mechanical, or photocopying, recording or otherwise without the
permission of the author.
Although the author and publisher have made every effort to ensure that the
information in this book was correct at press time, the author and publisher do not
assume and hereby disclaim any liability to any party for any loss, damage, or
disruption caused by errors or omissions, whether such errors or omissions result
from negligence, accident, or any other cause.
ISBN-13: 978-1-64543-478-8
CONTENTS
Foreword
3. Transformation Practices
3.1 Practice: Create a Central Accessibility Team
3.2 Practice: Obtain Executive Buy-In
3.3 Practice: Create and Enforce an Accessibility Policy
3.4 Practice: Report on Your Accessibility Transformation
3.5 Practice: Give the Teams Accessibility Coaches
3.6 Practice: Execute on an Ongoing Empathy Campaign
3.7 Practice: Publish Learning Resources and Bulletins
4. Team Practices
4.1 Practice: Attend and Host Empathy Events
4.2 Practice: Include Disabilities in UX Design
4.3 Practice: Communicate Intent with Accessibility Design Annotation
4.4 Practice: Create a User Interface Pattern Library
4.5 Practice: Leverage an Accessibility Automation Library
4.6 Practice: Automate Device and Assistive Technology Testing
4.7 Practice: Manage Accessibility Defects Systematically
4.8 Practice: Measure Accessibility
4.9 Practice: Include Accessibility in Retrospectives and Sprint Planning
5. Putting It Together
Glossary of Terms
Issue Prevention Opportunity
Foreword
1. Can all your users, with the abilities and senses that they possess,
perceive the information your application presents to them? For
example, can they “see” the meaning of the little icon button with an
image of a pen inside it?
2. Can your users, with their speci c input device or assistive technology,
operate all the controls within your application’s user interface? For
example, if your application supports the operation of a button through
touching the screen, does it also allow that button to be operated
through a keyboard and a voice command?
3. Can your users understand the information and the user interface
controls? For example, if the application requires the creation of a
password with constraints, are those constraints clearly communicated
in a way that allows the user to complete the task without undue
difficulty or an unreasonable degree of intellectual skill?
Given that the principles are this simple, why do development teams made
up of the best and the brightest graduates of the best schools in the world
routinely develop and ship soware that is horribly inaccessible, shutting out
large swathes of potential users and customers?
I can see the gears turning in Mary’s head as she tries to figure out the correct
answer (as any self-respecting developer would expect to be able to do).
Mary: Well, yes, it’s about making sure people can get to your application . . .?
Me: Well, not really. Accessibility is about making sure that people with
disabilities can use your application.
The gear-churning goes into overdrive as this statement sinks in, so I continue
unabated . . .
Me: Have you ever thought about how a blind person would use your
application?
Mary looks at me quizzically, a wry smile on her face; she thinks I’m punking her.
I whip out my iPhone and with three presses on the home button, turn on
Voiceover and put the iPhone up to her ear so she can hear it. I have it turned
down to what most blind users would consider an “irritatingly slow” speech speed
so that “light-dependent” people can understand it.
Me: No, that software is called a screen reader, and you have it on your phone,
too. What we do is we help developers figure out how to make their applications
work with that software so that people with disabilities can use their applications.
How do you think a blind person could (air quotes) see an image?
Gears churning . . .
Me: Well, it’s actually very simple, you just have to add a textual description of
that image and attach it to the image in the appropriate way. Then, the screen
reader will read it out, giving the blind user some understanding of what a
sighted user would see in the image . . .
1 Those of you familiar with the Web Content Accessibility Guidelines might ask yourselves where the fourth principle,
“robustness,” is. I have not forgotten it; I believe that it is an explicitly technical principle that does not add much to
the understanding of accessibility, and have therefore excluded it for simplicity.
1. To help team members better understand what it is like to live with different
disabilities; and
2. To help team members understand how users with disabilities use assistive
technologies.
PRACTICE DESCRIPTION: Hold events that simulate for the team members
what it is like to have a specific disability and how this might affect the use of
technology. Hold events where people with disabilities demonstrate the use of
assistive technologies and/or attempt to use the team’s application with an
assistive technology.
EXAMPLE: When first learning that blind people use a screen reader that reads
out the content of the user interface and a keyboard to navigate the page, Web
developers often mistakenly believe that every textual element on a Web page
must be tab-focusable; they will start to place tabindex=0 on every
element. This reaction is based on a misunderstanding of how screen readers
work as well as a failure to understand how a browser can be controlled with a
keyboard. Making every element tab focusable results in a Web page that is less
usable by keyboard-only users; it also does nothing to improve the experience of
a screen reader user.
By bringing a screen reader user in to demonstrate the many ways that
they can navigate a Web page, the team will learn that the tabindex is not
required. ey will also begin to understand the importance of semantic
markup, good heading structure, and landmarks. ey will start to be able to
use heuristics to predict what good experiences might be for screen reader
and keyboard-only users.
Examples of empathy events:
1. Dining in the dark, where the group eats an entire dinner in complete
darkness. is can be enhanced by including a blind person, who will,
for once, be at an advantage;
2. Empathy lab, a dedicated location with a collection of activities made up
of devices, exercises, and games that team members can participate in to
simulate the difficulties that various disabilities impose. e activities
can simulate physical conditions such as hearing impairment, vision
loss, aging, or motor impairment. e exercises can force the
participants to use accommodations similar to those used by people
with disabilities to achieve the goal or win the game. e aim of using an
empathy lab is to motivate the need for learning new skills and to
jumpstart the understanding of how people with disabilities experience
the world and technology;
3. Assistive technology show-and-tell booths, where people with
disabilities show how they use the technologies to overcome their
disabilities and also how bad implementations can block these
technologies or make them more difficult to use; and
4. Device impairment, where a computer or touch device is modi ed to
remove one form of output and/or input, forcing the user to use a
modality commonly used by a person with a disability. is can be as
simple as unplugging the mouse, replacing the keyboard with a single-
switch device, or removing all color to simulate color blindness.
4.2 Practice: Include Disabilities in UX Design
When the ADA was enacted, the industries most affected by the law at the
time (builders, landlords, and cities) complained about the burden that it
would place on them and the economy. One of the requirements that owed
out of the ADA was the implementation of the ramps at the corners of
streets known as “curb cuts.” Curb cuts (and other related ramps) have
allowed parents with strollers complete and easy access to all aspects of our
cities, where previously they had to struggle to navigate the sidewalks and
the entrances to buildings. Curb cuts allow skateboarders, bicyclers, and
rollerbladers to easily navigate the sidewalks, keeping them out of the streets
and safer from bad interactions with traffic. None of these bene ts were
anticipated when the ADA was enacted, but the result is cities that are more
usable by everyone.
In the accessibility industry, this is known as “e Curb Cut Principle,”
and it applies equally to online and digital experiences. Inclusive design is
the practice that achieves this in the digital world.
e question for the teams becomes, “How do we learn to do inclusive
design?” While there are books that focus just on the practices of inclusive
design, including users with disabilities in design and UX research goes a
long way towards achieving many of the same outcomes.
GOAL: To make thinking about users with disabilities an integral part of the user
interface and user experience design process so that the final product works
better for all users.
User interface and user experience designers create very robust models of
their designs in their heads that include a lot of information that is essential
to implementing an accessible experience. Many designers do not know that
much of this information needs to be communicated to the rest of the team
in order to implement the design in an accessible way. ey also do not
know which information needs to be communicated to the rest of the team
in order to ensure that the user interface is accessible. is leads to
developers either making up the missing information (e.g., adding their own
image text alternative) or simply omitting that semantic or information
completely because they are not sure what to apply. Our analyses have
shown that up to 70%3 of accessibility issues can be avoided by
systematically communicating the necessary information to the entire
development team.
GOAL: Communicate all of the necessary accessibility design intent to the team
so that designs can be turned into accessible applications, and this accessibility
can be tested and validated efficiently.
EXAMPLE: The image following shows a very simple player toolbar component
with three buttons—a previous track button, a play/pause button, and a next track
button. One could imagine this widget being used in different scenarios:
Sometimes on its own, and others with a real-time frequency histogram or a
control that shows the progress of the track being played.
is image has been annotated with a lot of the necessary accessibility
information.
e rst thing to note is that the role of every element has been speci ed.
is includes the role of the toolbar itself, which is, of course, “toolbar.” is
may seem at rst to be super uous, but we have seen situations where a
designer has intended for something to be a button, and they believe that
their design comp clearly shows a button, only to be implemented by a
<div> element with a click handler or an anchor element styled to look like
a button.
Second, the name of each element has been speci ed. Once again, this
may seem obvious given that the toolbar buttons are all image buttons, but
one of the most common accessibility violations we nd during testing is a
button that has no text name at all, or is simply the name of the image le.
Having the designer specify the name allows for more consistent usage of
terminology throughout the user experience and also allows the testers to
validate something that is not visible through automation, thereby making it
more difficult to miss a regression where this hidden text is changed or
removed.
ird, each of the different states of the buttons has been speci ed. ere
is a disabled state (slightly darker gray background), the focusable state, and
the focused state (light gray background at the bottom of the image). ere
are no values in this design comp, but you could easily imagine that the
number of previous or next tracks might be a value and how this might be
annotated.
Fourth, you will notice that the interaction of each element and of the
elements within the toolbar is described. Of great importance are things like
what happens to focus when the pause/play button is pressed. Focus
management is one of the most frequent accessibility issues in Web
applications and can lead to applications that are very difficult for blind
users to use; content changes, appears, or disappears without informing the
user at all, leading to the belief that the application is not responding to the
user’s input.
In this speci c component, it is important because it would be easy for
developers to implement this not as one button, but as two buttons whose
visibility is toggled based on the component’s internal state. Specifying what
happens with the focus allows the testers (or, more likely, the automated
tests) to validate that focus does, in fact, get maintained correctly during this
state transition.
Finally, the size of the objects is speci ed, which, in this case (because
everything is square), is a very simple annotation.
EXAMPLE: The images following show a design comp without and then with
additional accessibility annotations that are important for keyboard and screen
reader users. The user interface shown is the axe browser extension, which allows
for testing Web applications for accessibility issues.
The second image shows annotations that provide the information about where
the focus should go and in what order the interactive elements should receive
focus when a keyboard or screen reader user tabs into the application and then
continues to tab through the user interface. Tabbing should skip over the non-
focusable elements.
The third annotation shows the reading order of the content. Note that the
reading order and the focus order are aligned. This is important to avoid breaking
the meaning of the content in the application (which can inadvertently occur if
there is a mismatch between these two orders).
You will also notice that there is more content that is readable than the
content that is focusable; this is important because keyboards and screen
readers have different mechanisms for reading static content versus
navigating-to and interacting-with interactive elements, so these two should
be separated out very explicitly.
UPSIDE: The first advantage of this approach is that the design comps provide
input to both the test writers (whether developers write the tests or whether the
test are written by a QA function) and the developers themselves. Developers use
the information to choose the correct semantic elements and semantic markup,
and the testers use them to validate these choices.
EXAMPLE: The Deque product user interfaces are all currently based on a
pattern library called Cauldron (https://pattern-library.dequelabs.com/). At its
base level, Cauldron specifies the look, the use, and the markup of the UI
components. Building on top of this are the implementations in different
technologies, including https://github.com/dequelabs/pattern-library and http
s://github.com/dequelabs/cauldron-react.
EXAMPLE: One of Deque’s customers created a user interface widget library and
had used it very extensively for a couple of years before they became aware of
their accessibility requirements under the Accessibility for Ontarians with
Disabilities Act. The widespread use of this component library was one of the
major reasons the customer was able to become compliant within a reasonable
time frame, because fixing a small number of components addressed 60% of the
accessibility issues within their large portfolio of applications.
Your agile methodology might not allow you to develop a library like this
ahead of time, but you can build one up over time, thereby reducing the
effort necessary to develop and x accessible components over time.
is testing is best done by integrating the automation API calls into
integration functional tests that test the new UI functionality, then asserting
that the automation library returned zero accessibility errors.
When starting out, it is best to embed these API calls into all functional
tests; however, with experience, teams will realize that there are subtle
differences between functional testing and accessibility testing that might
require the writing of speci c tests to expose speci c states of the user
interface purely for accessibility. Also, many functional tests expose the same
UI over and over, and it is only necessary to perform the accessibility testing
on one iteration of each UI state.
EXAMPLE: The following code shows a React login form component accessibility
unit test using Jest and Enzyme with JSDOM for emulating the browser DOM.
This unit test is a small fraction of the unit tests covering all of the functionality of
the component.
…
import axe from 'axe-core'
…
test('Form has no accessibility violations', (done) => {
const fields = [ 'Dogs', 'Cats' ]
const FormComponent = utils.mountToDoc(
<LoginForm headline='Woof and hiss' fields={fields} />
)
const formNode = FormComponent.getDOMNode()
axe.run(formNode, config)
.then(({ violations }) => {
if (violations.length) {
const err = utils.printViolations(violations)
done.fail(err)
} else {
done()
}
})
})
…
Note that the unit test mounts the component and obtains a DOM node in order
to do the testing. This is because accessibility tests need to know the real display
state of the DOM nodes in order to be able to determine what will be exposed to
the assistive technologies and their users. Unit tests like this can cover about 80%
of what generic libraries can test. The rest of the testing should occur on the
complete assembled user interface. For this reason, we recommend integrating a
library like this into integration (end-to-end) tests.
The following code shows how to use the axe-core testing library in an end-to-end
test using Mocha and JavaScript Selenium.
const Selenium = require('selenium-webdriver'),
AxeBuilder = require('axe-webdriverjs');
…
driver = new Selenium.Builder()
.forBrowser('chrome')
.build();
…
it('should find no violations', function(done) {
driver
.findElement(Selenium.By.css('.App'))
.then(function() {
new AxeBuilder(driver)
.analyze(function(results) {
console.log(TestUtils.printViolations(results.violations));
assert.equal(results.violations.length, 0);
done();
});
});
});
Testing with assistive technologies and different input devices (like the
keyboard) is expensive and time consuming. is means that in an agile
environment, it will either slow down the process while also increasing
expense, or it will not be done, leading to accessibility regressions.
While it is not currently possible to directly automate assistive
technologies and write automated tests in a cross-platform way, it is possible
to write tests that con rm the required markup and code that makes the
assistive technologies work meet the requirements.
When writing the code for a widget, developers are adding the
appropriate markup and event handlers and writing assertions for these. At
various points during this process, when testing with the mouse and/or
touch, the developers should test the functionality using a screen reader and
a keyboard to ensure that the state changes and other information are
announced correctly and that the event handlers work correctly with a
screen reader and without one. Changes are encoded into the tests. is
functionality then only needs to be tested manually if the code changes, or
the supported set of assistive technologies changes.
e following code snippet shows ARIA markup validation for the
implementation of an ARIA menu widget. is example has been lied from
the a11yfy library and shortened for brevity. e full source code is available
on Github at https://github.com/dylanb/a11yfy.
…
test(“That the markup of the menu is applied correctly", function () {
var $menu = jQuery("#menu-test-1"),
$topMenuItems;
expect(16);
$menu.a11yfy("menu");
$topMenuItems = $menu.find(">li[role='menuitem']");
equal($menu.attr("role"), "menubar", "top ul should have role menubar");
ok($menu.hasClass("a11yfy-top-level-menu"), "should have to level menu class");
$topMenuItems.each(function(index, value) {
if (index === 0) {
equal(jQuery(value).attr("tabindex"), “0",
"the first top level menu item should be focusable");
} else {
equal(jQuery(value).attr("tabindex"), “-1",
"All other top level menu items should not be focusable");
}
});
equal($menu.find(">li.a11yfy-has-submenu").length, 2,
"There should be two top level menu items with sub menus");
equal(jQuery($topMenuItems[1]).attr("aria-haspopup"), “true",
"The second top level menu item should have an aia-haspopup attribute of
true");
equal(jQuery($topMenuItems[1]).find(“li.a11yfy-has-submenu")
.attr("aria-haspopup"), “true",
"The sub-submenu item must also have aria-haspopup true");
});
…
GOAL: Implement an accessibility defect management policy that allows for the
consistent prioritization of accessibility issues in ways that mirror the prioritization
of other classes of defects, and produce and maintain an accurate and complete
VPAT with each release in an agile manner.
PRACTICE DESCRIPTION: There are two components to this practice:
Criteria for
Accessibility Priority Action
Assignment
Criteria for
Accessibility Priority Action
Assignment
Stop deployment/release
of affected software until
The issue affects at least the defect is remediated. If
one disability such that a the defect is discovered in
critical business function production, implement a
cannot be used by a user hot fix immediately. If the
with an affected disability. hot fix cannot be
Critical implemented
Think about the impact immediately, create an
from this perspective: If all alternative channel for
users could not use this achieving the functionality
functionality, would we and train support and call
consider that critical? center staff on how to
direct users to the
alternative channel.
Publish documentation on
the workaround. Train
support and call center
staff on how to deal with
The issue affects the issue. If the defect is
functionality that is not discovered in production,
Moderate essential and has an update the VPAT.
acceptable workaround.
Assign defect fix priority in
a similar way to defects
that affect general site
usability.
1. Ensure that part of your de nition of “done” for any ticket includes
accessibility testing (see the relevant practices above);
2. Ensure that bugs can be tagged with:
GOAL: Reinforce the change in practices and skills and motivate the teams to
continue to improve.
1. Achieve a state where all code is clean of all issues that can be found
with a generic automated accessibility testing tool;
2. Achieve a state where the meaning of all states, names, values, and roles
of all the content are being correctly exposed to assistive technologies
and tested automatically;
3. Achieve a state where all interactive elements are comprehensively tested
with the keyboard and assistive technologies, and the regression testing
is automated; and
4. Achieve 100% accessible content and functionality.
Breaking the milestones up further into ones that cover new functionality
rst and existing code and functionality later is another technique for
making them smaller and easier to achieve.
With a set of milestones, it is possible to create metrics that measure the
progress towards them in a way that makes sense for the team. Examples of
metrics that match the milestones above are:
GOAL: To reinforce the adoption of agile accessibility and allow the team to
improve their accessibility practices and skills.
Reserve time on the agenda for discussing accessibility practices and the
accessibility skills of team members. Seek open discussion on instances
where the skills or practices were well-implemented and where they were
either forgotten or did not work well. Identify opportunities for additional
coaching, skills training, or tools to help improve outcomes.
During sprint planning, have the team members brainstorm the
accessibility impacts of the stories that are being proposed and also identify
complex interactions, new widgets, or other novel functionality that might
require either input from an accessibility coach or additional research.
Encourage team members to think about the impact of accessibility on the
story points and the team’s overall velocity.
3 This number is calculated in different ways, all arriving at around the same number. Some of these calculations have
been done with the data from accessibility audits done by Deque over many years, and then classifying each issue as
to whether better direction from the designs could have avoided it. A more direct approach is to categorize all WCAG
2 A and AA as to whether design should have a major influence on the success of the criterion. When you do this,
67% of the success criteria fall into the “major influence” category.
Putting It Together
It might seem obvious to you at this point, but it is worth stating: ese
practices, when applied, will result in accessibility becoming an integral part
of your soware development process. e key point is that accessibility is
only scalable, affordable, and sustainable when it is fully integrated into all
aspects of the soware ideation and development process.
Getting from where you currently are to where you need to be requires
change. is change will not happen if it is not acknowledged and explicitly
managed. Some of the practices help with implementing and managing that
change explicitly.
Getting from where you are to where you need to be requires learning
new skills. Some of the practices are, in themselves, new skills that need to
be learned and developed. Some of the practices help support the learning
process.
Some practices are very technical and practical in that they help with the
speci cs of implementation. Some practices help with user experience:
Empathy, design, and measuring the outcomes as experienced by users.
Some practices help to ensure the quality of new features, user interfaces,
and code; some practices help to ensure that this quality is maintained over
the lifetimes of these artifacts.
Finally, some practices help with one of the foundations of agile soware
development—communication.
All of the practices help to inject accessibility into the process at the
earliest point possible. By implementing them, you will have shied your
accessibility activities as far “le” in your process as possible. is will drive
down the costs and drive up the results.
I look forward to learning from you as you travel on this journey. Please
send me your feedback on Twitter @dylanbarrell or via email [email protected].
Glossary of Terms
ARIA (Accessible Rich Internet Applications): a W3C standard speci cation for
additional markup that can be applied to languages like HTML to add
accessibility information that is not possible with standard HTML.
JIRA: a system that is used to track and manage bugs, enhancement requests,
tasks, tickets, and many other types of work related to soware
development.
Sprint: a period of time between one and three weeks, during which an agile
team will develop a series of features, improvements, and bug xes for
release at the end of the sprint. Tends to be used by agile teams following the
SCRUM methodology.
Sprint Retrospective: a meeting that occurs at the end of every sprint where
the team members discuss what went well, what did not, and brainstorm
ideas for how they can improve the processes to eliminate the recurrence of
the things that did not go well. It is designed to foster the culture of
continuous improvement.
UI (User Interface): the user interface is any component of the system that
takes user input and provides output to the user. For the most part, user
interfaces are implemented on some sort of at-screen device, but virtual
reality goggles, voice input, and gestures are becoming more common forms
of input and output.
1.4.3 Contrast
Strong None Strong
(Minimum)
2.2.1 Timing
Strong None Weak
Adjustable
3.2.3 Consistent
Strong None None
Navigation
3.2.4 Consistent
Strong None None
Identification
3.3.1 Error
Strong Moderate None
Identification
WCAG 2.0 Success
UX/UI Design Coding Automated Testing
Criteria (A & AA)
3.3.2 Labels or
Strong Moderate None
Instructions
I would like to thank everyone who made it possible for me to write this
book.
ank you to those who reviewed and gave me feedback on the early
dras. Special thanks to Camron Shimy from Google, who was particularly
insightful and gave me ideas that led to the chapter on defect management.
Denis Boudreau provided inspiration on the personas and also provided
the image of Lucy.
Ben Allen gave thoughtful feedback that helped to clarify many sections.
anks to my colleagues, Chris McMeeking, Noah Mashni, and Keith
Rhodes, for feedback that helped me improve the book in many ways.
ank you to Anik Ganguly, who introduced me to Deque Systems and
therefore to accessibility. ank you for your feedback on this book and your
mentoring, inspiration, and encouragement for the many years I have had
the privilege to work with you.
ank you to Preety Kumar for the opportunity she has afforded all of us
at Deque, for her vision that created the company, and for her leadership in
the accessibility eld.
ank you to all my colleagues at Deque who inspire me every day and
without whom this work would not be possible.