Would you ask someone who had only ever driven a car to design or build the perfect bicycle? At Publicis Sapient, we endeavor to create experiences that are accessible to the widest possible audiences both because it’s the right thing to do, and also to maximize our clients’ customer base. All audiences benefit from experiences designed accessibly, including people with disabilities. But most web experiences are still not accessible, and that is because most people who design and develop websites are not familiar with the alternate ways that disabled people navigate a website. Would you ask someone who had only ever driven a car to design or build the perfect bicycle? Probably not. But that’s effectively what we’re doing when we ask designers and developers who have only ever navigated with a mouse pointing tool to create an experience that works well with a keyboard and screen reader.
So let’s change that. This hands-on presentation for developers describes who benefits from accessible web experiences & outlines a series of the most typical code-related accessibility issues encountered during accessibility audits and how to fix them — and avoid them in the first place!
4. “Accessibility means access. It refers to the
ability for everyone, regardless of disability
or special needs, to access, use and benefit
from everything within their environment.”
- The Canadian National Institute for the Blind
4
@lsnrae
15. People with disabilities (US, 2016)
16%
Ambulatory
6%
Cognitive
5%
Hearing
3%
Sight
2%
US POPULATION
“web
impacting
disabilities”
@lsnrae
16. 0 50,000,000 100,000,000 150,000,000 200,000,000 250,000,000 300,000,000 350,000,000
"Web Disabilities" Pop. (US)
Canadian Population
US Population
A significant number of people are affected…
~35 million
people
@lsnrae
18. Some definitions:
18
Web Accessibility:
Web accessibility means that people with disabilities can perceive, understand, navigate, and
interact with the Web.
Web Content Accessibility Guidelines (WCAG):
A series of guidelines from the World Wide Web Consortium (W3C) that explain how to make
web content accessible to people with disabilities.
World Wide Web Consortium (W3C):
The main international standards organization for the World Wide Web.
@lsnrae
19. P E R C E I V A B L E
1.1 Text Alternatives
1.2 Time-based Media
1.3 Adaptable
1.4 Distinguishable
2.1 Keyboard Accessible
2.2 Enough Time
2.3 Seizures
2.4 Navigable
2.5 Input modalities
4.1 Compatible3.1 Readable
3.2 Predictable
3.3 Input Assistance
O P E R A B L E U N D E R S T A N D A B L
E
R O B U S T
The Web Content Accessibility Guidelines (WCAG) are organized under 4
principles:
@lsnrae
20. 1.1 Use alternative text
1.2 Audio/video related
1.3 Use semantic markup
1.4 Make content easy to
see
2.1 Use the keyboard alone
2.2 Give users enough time
2.3 Don’t cause seizures
2.4 Help users navigate
2.5 …Beyond keyboard
4.1 Use correct syntax and
follow HTML specifications
3.1 Use language attributes
3.2 Predictable operation
3.3 Make accessible forms
CONTENT SHOULD BE CONTROLS SHOULD BE CONTENT SHOULD BE CODING SHOULD BE
P E R C E I V A B L E O P E R A B L E U N D E R S T A N D A B L
E
R O B U S T
The Web Content Accessibility Guidelines (WCAG) are organized under 4
principles:
@lsnrae
21. A
AA
AAA
L O W E S T
H I G H E S T
WCAG guidelines are divided into 3 conformance levels:
@lsnrae
22. A
AA
AAA
L O W E S T
H I G H E S T
WCAG guidelines are divided into 3 conformance levels:
@lsnrae
23. Accessibility compliance is collaborative:
Project Managers must ensure
accessibility compliance is considered in
the timeline.
Experience Designers must consider
the linear screen reader experience in
their wireframes.
Visual Designers must consider people
with vision challenges in their design.
Front end developers must test their
work with the keyboard and screen
reader.
Copywriters must be sure to write in an
accessible way.
Quality Assurance Specialists must
test against accessibility requirements.
Vendors must adhere to the same
standards.
Everyone must be trained how to
comply.
@lsnrae
24. “Imagine not
being able to
access
information.
For [35 million people in
the US], this is the reality.
Today, only 5 percent of
printed materials are
available in alternate
formats, while less than 1
percent of websites are
accessible.” - CNIB
WHY?
24
25. “Design is not just what it looks like and
feels like. Design is how it works.”
- Steve Jobs
25
@lsnrae
29. Forgetting to test ALL of our work
with our keyboard, every time
Common code-related issue #1:
Home About Us Products Services
Lorem
Ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore.
Learn more >
Lorem
Ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore.
Learn more >
Service
s
• Link 1
• Link 2
• Link 3
• Link 4
@lsnrae
30. Developing modal windows without
keyboard functionality
First focus on close button.
Modal heading is announced.
Focus kept within modal.
Close modal with close button or escape key.
Common code-related issue #2
Main title goes here
Subtitle 1
Body text goes here lorem ipsum
dolor sit amet.
Learn more
Subtitle 2
Body text goes here lorem ipsum
dolor sit amet.
Learn more
Subtitle 3
Body text goes here lorem ipsum
dolor sit amet.
Learn more
But wait, there’s more!
Lorem ipsum dolor sit amet here
is
the text of the modal window
lorem ipsum dolor sit amet.
Cancel Submit
X
<div role="dialog" aria-labelledby=
"dialog1Title" aria-
describedby="dialog1Desc">
<h2 id="dialog1Title">But wait,
there’s more</h2>
<p id="dialog1Desc">Lorem ipsum dolor
sit amet…</p>
<button>Close</button>
...
</div>
@lsnrae
31. <img src=“images/instagram.gif”
alt=“Connect with us on Instagram” />
<i class="icon-twitter"><span
class="visually-hidden">Twitter</span></i>
<a href="https://www.facebook.com/myPage"
target="_blank" class="social_icons
social_facebook">
<span class="icon-facebook"></span></a>
Common code-related issue #3:
Writing invalid HTML markup, like
empty links.
32. Building inaccessible forms
All fields have programmatically associated labels.
Even fields with no visible label have hidden labels.
Error messages are announced by the screen reader.
User can submit form with errors.
Common code-related issue #4:
First name*:
Last name*:
Phone number:
Email address*:
Please enter a valid email address.
Jane
Doe
janedoe@gmail
Submit
Required field indicators
Actual labels for all fields
Error messaging is read out by screen
reader
Buttons are not disabled
@lsnrae
33. Not separating heading styles from
structure
Common code-related issue #5:
H1 – Franklin Gothic Medium, 24 px
H2 – Franklin Gothic Medium, 20 px
H3 – Franklin Gothic Book, 18 px
P – Garamond, 16 px
L1 – Franklin Gothic Medium, 24 px
L2 – Franklin Gothic Medium, 20 px
L3 – Franklin Gothic Book, 18 px
Body copy – Garamond, 16 px
@lsnrae
34. L1 – Franklin Gothic Medium, 24 px
L2 – Franklin Gothic Medium, 20 px
L3 – Franklin Gothic Book, 18 px
Body copy – Garamond, 16 px
Main title goes here
Subtitle 1
Body text goes here lorem ipsum
dolor sit amet.
Learn more
Subtitle 2
Body text goes here lorem ipsum
dolor sit amet.
Learn more
<h1 class=“L1”>
<h2 class=“L3”>Not separating heading styles from
structure
Common code-related issue #5:
@lsnrae
36. Mis-using aria-label and
aria-describedby attributes
Common code-related issue #7:
4-door 2-door
<button aria-label=“Four door vehicle highlights”…>
4-door
</button>
<button aria-label=“Two door vehicle highlights” …>
2-door
</button>
(1) Aria-label attributes are used to
completely replace vague control names:
@lsnrae
37. Mis-using aria-label and
aria-describedby attributes
Common code-related issue #7:
<p id=“mystatement”>Buy tires and wheels online.</p>
<a href=“page.html” aria-describedby=“mystatement”>
Learn More</a>
(2) Aria-describedby attributes are used to
append existing nearby content to vague
control names to provide more context.
Buy tires and wheels online.
Learn more >
Nearby text is appended to vague link text
@lsnrae
38. Not using captions and scope
attributes for data tables
Common code-related issue #8:
<table>
<caption>Javascript Libraries</caption>
<tbody><tr>
<th scope=“col”>Name</th>
<th scope=“col”>Age</th>
<th scope=“col”>Birthday</th>
</tr>
<tr>
<td scope=“row”>Jquery</td>
<td>11</td>
<td>August 26</td>
</tr>
<tr>
<th scope=“row”>React</th>
<td>4</td>
<td>March 21</td>
</tr>
</tbody></table>
Name Age Birthday
JQuery 11 August 26
React 4 March 21
Javascript Libraries
39. Not using captions and scope
attributes for data tables
Common code-related issue #8:
<table>
<caption>Javascript Libraries</caption>
<tbody><tr>
<th scope=“col”>Name</th>
<th scope=“col”>Age</th>
<th scope=“col”>Birthday</th>
</tr>
<tr>
<th scope=“row”>Jquery</th>
<td>11</td>
<td>August 26</td>
</tr>
<tr>
<th scope=“row”>React</th>
<td>4</td>
<td>March 21</td>
</tr>
</tbody></table>
Name Age Birthday
JQuery 11 August 26
React 4 March 21
Javascript LibrariesTable caption is announced by screen reader
40. Building inaccessible calendars
Common code-related issue #9:
http://airbnb.io/react-dates/
Can I tab through the dates with my keyboard?
How does the screen reader read the date?
Can I select a date range in an intuitive way by
keyboard?
If not, can I simply type the date into a text field?
Is the date format provided as part of the label?
@lsnrae
41. Focus order not logical and
intuitive
Common code-related issue #10:
Log in to Online Banking
Card number*:
Remember my card number
Password (case sensitive)*:
Forgot my password
Bank
Logo
Contact us | Help
Log in
1
2
3
4 5
6
7
8
@lsnrae
42. All of this information belongs in
the wireframes.
If it’s not there, ask!
Heading levels/structure
Keyboard functionality
Hidden wayfinding cues
Hidden form labels
What the screen reader should
SAY if different than what the
sighted user sees
Updating content areas and
associated notification text
Focus order (if not default)
Table captions and hidden
column or row heading values
Etc.
@lsnrae
44. Automated vs.
Manual testing –
Do both!
Automated testing –
For issues that do not
require human
judgment to be
detected.
E.g. 1.1.1 Non-Text
Content.
• If there is an <img>
tag, does it have an
alt attribute?
44
@lsnrae
45. Automated vs.
Manual testing –
Do both!
Manual testing – For
issues that do require
human judgment to be
detected.
E.g. 1.1.1 Non-Text
Content
A human can judge the
following
characteristics:
• Should the alt
attribute be null or
descriptive?
• What constitutes a
descriptive alt
attribute?
45
@lsnrae
46. Page-level
automated
testing tool
examples• Free browser
plugins you can
download.
46
WAVEWeb accessibility evaluation tool by WebAIM
Google Lighthouse
for developers
Axe accessibility
tool by Deque
ACHECKER
47. Manual web accessibility test procedure:
1.Build the functionality.
2.Test it with your keyboard alone (employing your sight).
3.Test it with your keyboard plus a screen reader, without
employing your sight.
47
@lsnrae
48. 3-Step manual testing
1. Build the functionality.
2. Test it with your keyboard alone (employing your sight).
Is all of the functionality available to the keyboard?
Is the method of access an intuitive one that the user will
understand? (e.g. Do you force them to navigate with the
keyboard arrows without actually saying that is how it works?)
Can content be accessed without employing non-intuitive
workarounds (e.g. tabbing past something, then back-tabbing
to access something else)?
3. Test it with your keyboard plus a screen reader, without
employing your sight.
Are all of the points above still true?
Could you in good faith use what you built if you were not the
person who developed it?
Procedure:
48
@lsnrae
50. Things to remember:
1. An accessible web benefits everyone.
2. The WCAG guidelines are easy to read.
3. Test with your keyboard & screen reader.
50
@lsnrae
52. thank you
copyright publicis sapient | confidential
Alison Walden
Director of Technology
@lsnrae
Medium.com/@lsnrae
Notas do Editor
My name is Alison Walden, and I’m a director of technology at Publicis Sapient. I’m responsible for the quality of our front-end code deliverables, the customer-facing aspect of our code. I’m also our accessibility lead.
This combination role puts me in a position where I get to review large samples of our front end code and that of vendors we work with, and I started to compile a list of the most common accessibility issues inadvertently caused by front end developers.
I’m going to share this list with you today, in hopes that you can avoid making these same issues. So let’s get started.
I’ve been focusing on accessibility in my work for over 10 years.
One of the first times I thought about accessibility was on a trip to the Great Wall of China in 2006.
The Great Wall is one of the wonders of the ancient world, as you know. There’s no denying that it wasn’t designed to be accessible. That’s understandable for a structure built over 2000 years ago.
As a healthy, active person, I wouldn’t have noticed the accessibility challenges of the Great Wall if I had not been traveling with my elderly father in law. He simply couldn’t climb up all of those stairs. It was the first time that someone else’s accessibility requirements affected me personally.
The next time I recall noticing accessibility barriers is when I had a baby. This isn’t a picture of me but it illustrates what all parents face when they want to take their child out in a stroller.
Carrying a stroller up the stairs is challenging. Depending on how many stairs there are, it could be impossible without help.
It made me empathize with people in wheelchairs who always faced this problem that had never affected me before.
And it struck me how willing strangers were to help me carry the stroller up the stairs. People are kind, and they want to help.
And people are smart. They find workarounds. Even when something isn’t designed for accessibility, sometimes people can find a way to succeed in their task.
But we also have an opportunity to consider everyone’s needs up front, and to design and develop accessible experiences purposefully, so that everyone can enjoy them.
Here’s another view of this style of accessible ramp. This won an urban design award and it shows that it’s definitely possible to have an experience that is both beautiful AND accessible.
What I’m trying to convey is that when we make a physical space accessible, it actually benefits everyone.
With the advent of smartphones we are all subject to a degree of new challenges when trying to navigate websites. Here I’m showing how the glare on the screen can cut down on anyone’s ability to view content.
We also have to consider the temporary disabilities we’re all subject to – temporary vision loss or when you injure your arms.
Getting older is another fact of life we can’t avoid.
We have all ages of people surfing the internet, with varying degrees of dexterity and vision loss…
…who wouldn’t even self-identify as needing an “accessible” experience.
But let’s talk about the population of people with disabilities, who will also benefit from accessible experiences.
A full 16% of the US population had some kind of disability in 2016.
Let’s put ambulatory disabilities to the side for a moment and talk about the other three types:
Cognitive issues, hearing loss, and vision loss.
I refer to these as “web impacting” disabilities, because these are the disabilities that affect peoples’ ability to navigate the web. How many people are impacted by these disabilities?
A significant number.
The top grey bar represents the number of people online in the US.
The middle grey bar is the population of people online in Canada.
I want to draw your attention to the blue bar at the bottom, which is the population of people with “web impacting” disabilities in the US. ~35 million people. This is almost the same as the population of Canada.
Here are some Canadian numbers:
~half a million Canadians live with significant vision loss. (Like the whole population of Newfoundland and Labrador). Or Hamilton.
Canadians who identify themselves as culturally Deaf comprise more than 350,000 people across Canada. (Canadian Association of the Deaf, 2007)
That’s about ¾ of a million people. It’s like there is an invisible store that already exists that could service a community the size of Winnipeg. That’s what you already have, if it were accessible. For the US, there’s an invisible store that could service a community the size of Canada.
The principles and high level criteria…
And here they are in regular language…
Even the W3C doesn’t recommend trying to adhere to all of level AAA because some of the guidelines are less measurable.
E.g. There’s a AAA guideline about having a title with context. Who gets to decide if the title has enough context? Me? You? This is not objective enough to be measurable.
And the web works in a variety of ways:
It can work with a mouse pointing device and a monitor, the way many of us probably use it.
It can work with just a keyboard and a monitor. Consider someone who has a tremor and cannot focus their mouse pointer and needs to use a keyboard instead. Or, a sighted person who may be paralyzed, and use a puff and suck device that mimics the function of a tab key.
Or, in the case of a non-sighted person, they will use their keyboard in conjunction with a screen reader.
In both of these latter two cases, the main way people are navigating is with their keyboard, not a mouse.
But most people who design websites today actually use a mouse pointer to navigate.
Would you ask someone to design OR BUILD the perfect bike who has never ridden one?
You probably wouldn’t. But that is effectively what we’re asking designers AND DEVELOPERS to do, when they usually navigate the web using a mouse pointing device, and we ask them to start designing or DEVELOPING experiences for people who mainly use their keyboards.
Just because it works fine with our mouse pointing device doesn’t mean it’ll work with a keyboard.
Let’s now look at a few common issues I see in front end code. These are issues where the site works fine with a mouse, but has problems with the keyboard and/or screen reader.
When people don’t test with their keyboards, they miss it when obvious problems exist like a flyout menu not closing on tab out.
When a user launches a modal window, the first focus should be on the modal’s close button.
The alternate text on the close button should say “Close” or “Dismiss” – not “X”. (Text should be determined by a copywriter).
Tabbing should now be restricted to within the modal content. The user should not be able to tab out of, or behind, the modal window, without closing it.
The escape button should also dismiss the modal.
When the user dismisses the modal, keyboard focus should be placed on the element that launched the modal.
Use role=“dialog” and label the dialog title.
This is the MOST COMMON error I see in front end development. These icons are designed for sighted users only.
Form validation paradigms:
Reactive/Traditional: Users can tab through form fields, filling them out, then hit the submit button at the end. At that point, the form will be validated, and error messages will appear on any fields that have issues. The user can try to submit the form at any time because the submit button is always enabled.
Proactive: Each form field is validated as the user leaves the field. Typically a visually highlighted error message will appear next to the field that has the issue. The submit button is not available (it is disabled) until all form fields are free of errors.This method of form validation is not accessible because non-sighted users may not notice the error messaging, and they will not be able to submit because the button is disabled. Disabled buttons never get keyboard focus. For this paradigm, design the disabled state in CSS but do not disable the button.
The problem with WAI-ARIA is that too many developers are using it the wrong way. Respected accessibility service provider WebAIM recently analyzed the home pages for the top one million websites (read more about the WebAIM million) and among their other results, they discovered that home pages with ARIA present averaged 11.2 more detectable errors than pages without ARIA.
Misuse of ARIA roles can make websites impossible to navigate. Relying on ARIA when simple, semantic HTML will suffice is a mistake, because some screen reader/browser combinations do not support ARIA.
When should I use ARIA?
For custom controls (e.g. styled select menus)
For tabs, or other interface elements that can provide context to a user when described
To describe labels that are otherwise vague
Anytime semantic HTML and CSS cannot provide an accessible experience on their own
When should I NOT use ARIA?
Anytime you could accomplish the same thing with semantic HTML and CSS
Screen readers use the caption element and scope attributes to help non-sighted people understand how a data table is organized.
TABLE DO’s AND DON’Ts:
DO use the table heading in the caption element.
DO use the <th> element for table headings.
DO define the scope of a heading as belonging to a column or row.
DON’T make insanely complex tables without trying to help a designer to simplify them. Some screen readers can’t handle merged rows or columns, for example.
DON’T use <div> elements to mark up tabular data.
Jquery initial release Aug. 26 2006
React initial release March 2013
Screen readers use the caption element and scope attributes to help non-sighted people understand how a data table is organized.
TABLE DO’s AND DON’Ts:
DO use the table heading in the caption element.
DO use the <th> element for table headings.
DO define the scope of a heading as belonging to a column or row.
DON’T make insanely complex tables without trying to help a designer to simplify them. Some screen readers can’t handle merged rows or columns, for example.
DON’T use <div> elements to mark up tabular data (unless you apply the appropriate ARIA roles).
Jquery initial release Aug. 26 2006
React initial release March 2013
Is my calendar accessible?
Can I tab through the dates with my keyboard?
Are the dates read out in an understandable way by the screen reader? (“Monday, June 6,” not “J-U-N Mo 6”)
Can I select a date or date range in an intuitive way with my keyboard?
If none of that is true, can I simply type the date into a text field?
In order to type the date into a text field, is the date format provided within the field’s label?
EXAMPLE: http://airbnb.io/react-dates/
Most of these things should be part of the specifications provided to us in wireframes.
But even if we knew none of these rules, the most important thing is for us to always test with our keyboards and screen readers.
These are free browser plugins you can download.
This matters. A lot of times our QA team or the client’s UAT testers do this wrong. Ask what is being used. Valid/intended combinations work best.
Today I’ve talked about the most common code-related accessibility issues that I see on web experiences every day that make it impossible for a person with disabilities to access content and to really be part of our community. I wanted to empower all of you to understand the extra steps we must take as developers to enable accessible experiences so that you could bring these skills to your daily work.
I conduct screen reader training internally and with clients at Publicis Sapient, and the most impactful moment during the session is when I invite the class to do some online shopping.
I let them choose any online retailer and any product, then let them loose to try to purchase that product with their keyboard and screen readers alone.
I always make sure they notice that I do not constrain their choices – I let them pick any online store. That’s how confident I am that no e-commerce experience will be accessible.
We’ve tried many popular retailers and they are getting better, but it is still all to rare that someone gets through the checkout.
A positive way of looking at this is that there is a massive opportunity in this area.
I like to imagine the amazing impact as developers like us continue to learn how to implement websites in an accessible way, and to influence our respective agencies and through them, our clients. Imagine the top ecommerce and content websites becoming truly accessible, and what it will mean to so many people. Thanks again for having me here today.