1. Building websites for all
Web Accessibility and Inclusive Design
Claudio Luis Vera - Designer, information architect, human at Simple-theory.com
Lisette Maria Arocha - Developer and accessibility specialist at PwC Experience Center
2. Hats that I’ve worn
Ranked by insight and
time spent in role
Front-
end
developer
Creative
Director
UX
Designer
Aging
human
Management
Certified
A11y
professional
Caregiver
CLAUDIO LUIS VERA, SIMPLE-THEORY / ROYAL CARIBBEAN
3. Hats that I’ve worn
Ranked by insight and
time spent in role
Front End
Developer
Accessibility
Speciality
Person with
Chronic
Health
Condition
LISETTE MARIA AROCHA / PWC EXPERIENCE CENTER
12. Permanent / Temporary /
Situational
Universal design serves everyone,
not just the full-time disabled.
13. Universal design
Create products and environments that the vast majority of people
can use, taking into account our natural physical diversity.
Design once, for use by all.
14. What about tailoring user
experiences for people with
disabilities?
Many view this as
“separate but equal”
15. Diversity of Web Users
Visual
People with “low vision”
to full blindness in one
or both eyes or color
blindness use text-to-
speech synthesis, read
using braille or need to
be able to enlarge or
reduce text size and
images and have
sufficient contrast.
Auditory
Auditory disabilities can
range from being “hard
of hearing” to deafness
and experience barriers
with audio content that
does not have captions
or transcripts and
interactions that rely on
voice only.
Physical
People with motor
disabilities experience
barriers when websites
and applications do not
allow for them to use the
keyboard or alternate
input device or when
they provide insufficient
time to respond to tasks.
Speech
Speech disabilities may
include difficulty
producing speech that
is recognizable and rely
on alternative ways of
communicating, for
example, through the
use of text based
communication.
Cognitive
Cognitive, learning or
neurological abilities
impact how people hear,
move, see, speak, and
understand information
and can experience
barriers with complex
interactions, sentences
and moving, blinking or
flickering content.
Diverse
There are many reasons
why people may
experience varying
degrees of auditory,
cognitive, physical, speech,
and visual disabilities such
as temporary or age-
related impairments,
health conditions or
situational limitations.
It is important to consider a broad diversity of functional needs.
17. Use of Color
When you use color to identify or
distinguish information, make sure
that this information is still
available to people who can't
perceive color.
22. What does a motor
disability feel like?
Let’s try using a website without a
pointing device.
23. What’s a screen
reader?
Screen readers are software programs
that allow blind or visually impaired
users to read the text that is displayed
on the computer screen with a speech
synthesizer or braille display.
-American Federation for the Blind
NVDA
JAWS
Voiceover
Mac
25. Reasons why accessibility is important
It’s our
audience
People who depend on assistive
technology are our customers, too.
We need to accommodate for
accessibility so that they can
purchase product and services
online easily.
It allows
us to scale
From a technology standpoint,
accessible websites produce
quality code that is easier to
manage, adapts to various
devices and produces better
search engine results.
It’s just
good business
Having an accessible website
means opening up your products
and services to a large and
underserved market that are loyal
to brands that accommodates
them and their needs.
It’s the
law
Title III of the Americans with
Disabilities Act requires that
business, government and
nonprofit service providers make
accommodations for accessibility
in order to enable access to the
same services and products as
clients who are not disabled.
26. The Americans with
Disabilities Act
Title III of the Americans with Disabilities
Act (ADA) requires that businesses and
nonprofit services providers make
accessibility accommodations to enable
the disabled public to access the same
services as clients who are not disabled.
It prohibits discrimination against people
with disabilities in "places of public
accommodation". This term has been read
in various lawsuits to include electronic
media and web sites.
Section 508 is an amendment made to the
Rehabilitation Act of 1973 and requires federal
agencies to make their electronic and information
technology accessible to people with disabilities
A Voluntary Product Accessibility Template (VPAT) is a
document which evaluates how accessible a particular
product is according to Section 508.
Section 508
28. Gil v. Winn-Dixie Stores, Inc.
Main findings:
Title III applies to websites that include
services that are offered in a brick-and-
mortar location.
Brands are responsible for all third party
software and services offered on their
websites.
JAWS and NVDA are the screen readers
to be evaluated against
29. Two type of plaintiffs
The trolls
Law firms that regularly scan major
brands’ sites for accessibility mistakes.
Can recoup all legal fees
Pissed-off PwDs
Individuals who are unable to complete
core tasks on a website, app or user
experience.
Can only earn a nominal award.
30. What is WCAG 2.0?
The international standard for
web accessibility, made up of an
exhaustive set of guidelines.
32. Four Principles of Accessibility (POUR)
Perceivable
Users must be able
to perceive content.
Provide text alternatives for non-
text content
Provide captions and other
alternatives for multimedia
Create content that can be
presented in different ways,
including by assistive
technologies, without losing
meaning
Make it easier for users to
consume content
Operable
Users must be able to operate
our website using a variety of
methods.
Make all functionality available
from a keyboard
Give users enough time to read
and use content
Avoid using content that causes
seizures
Help users navigate and find
content
Understandable
Content must be
understandable.
Make text readable and
understandable
Make content appear and operate
in predictable ways
Help users correct mistakes
Robust
Experience must be robust
enough to change with
technology.
Maximize compatibility with
current and future users tools
33. WCAG Levels
“Baseline”
Priority A
If success criteria is not achieved
accessibility users will find it impossible
to use
“Great standard”
Priority AA
If success criteria is not achieved
accessibility users will find it difficult
to use
“The Ideal”
Priority AAA
If success criteria is not achieved
accessibility users will find it somewhat
difficult to use
35. Top accessibility mistakes
Missing alt tags or alt text
Missing form field labels
Insufficient color contrast
Broken tab index
Hidden focus
Using styles instead of headings
Using buttons where links should go
Missing “Skip navigation” link
Social toolbars that don’t skip links
36. Bringing accessibility into your everyday work
Self testing
Use a browser plug-
in or a color contrast
checker to test your
own work.
Formal audits and
trusted testers
Run tests with users
who know assistive
technologies.
Automated testing
Use a tool like AMP
or SiteImprove to
run reports and tests
on your project
Continuous
monitoring
Review new content
and use scheduled
site crawls to check
compliance
concept visual
design
development staging production ongoing
39. Strategy & UX
Design
Development
Quality
Identifying and planning for potential
accessibility issues along the user journey.
Applying universal design principles for a
good user experience for all users,
including people with disabilities.
Developing using WCAG standards and
a stack-based approach to accessibility.
A combination of automated and
manual testing is done to ensure
WCAG compliance and an accessible
experience.
Digital
Accessibility
Accessibility
Requirements
User
Experience
Universal
Design
Content
Strategy
User
Research
Activities
Design
Accessibility
Testing
User
Centered
Usability
Testing
Developing
to WCAG
Standards
Developing
accessible
interactions
Manual
Accessibility
Testing
Automated
Accessibility
Testing
Accessibility
Stack
How to integrate accessibility into your product lifecycle
42. Indiana Jones Method
Learn an important accessibility lesson
from Indiana Jones: when you take
something in an interface away, you
need to replace it with something that
serves the same purpose just as well, or
even better.
43. Sample of a color palette built around color contrast.
An accessible color palette
44. Choosing colors for
accessibility
You can use Lea Verou’s color
checker to test ratios
WCAG sets a minimum standard
for contrast at a ratio of 4.5 : 1
46. How to get more involved
Learn to check your work
Use WAVE, aXe, or other testing tools
Get trained
Courses are available through Deque U.
Get certified
Core (CPACC), technical (WAS) and
combined (CPWA) certification
Join
UGA’s Web Accessibility Group
IAAP
IxDA
Accessibility groups in various open
source projects
47. Resources
HTML Codesniffer browser bookmarklet that
checks code conforms to standards
WAVE accessibility tester (Chrome/Firefox)
AXE accessibility tester (Chrome dev tools)
Contrast checker from the Mac App Store
WebbIE (screen reader for the sighted)
IAAP (International Association of
Accessibility Professionals)
Deque University (accessibility courses)
UGA Web Accessibility Group (WAG)
The lawsuit that will change web accessibility,
(Gil v. Winn-Dixie blog post)
Editor's Notes
[CV:] This graph explains what colors my point of view with regard to web accessibility.
The colored circles are where I draw the most insight.
What benefit does it provide
What percentage of people in the US do you think has a disability?
[CV:] This is 19% based on self-reported disabilities. I use glasses myself, and I don’t report that as a disability.
Think of 19% as an arbitrary cutoff point on a spectrum from fully-abled to severely disabled
Source:
https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
80.8% of the population over 90 living outside of nursing homes
98.2% of the population over 90 living in nursing homes
Our efforts at accessibility are really an investment in our own futures, as we will probably age into a disability of some sort.
Disability is when your abilities at a given time are not up to the task at hand.
Source: Microsoft Inclusive Toolkit
https://www.microsoft.com/en-us/design/inclusive
Note that the concept of universal design is broader than the concept of accessible design for people with disabilities.
This is the opposite of universal design…
There are stigmas associated with disabilities. Would you want to wave a flag every time you go to a website that announces that you’re disabled?
What benefit does it provide
Color blindness example taken from
https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
Here are 30 of the 38 test plates used in the Ishihara color blindness test. Example http://wearecolorblind.com/example/google-analytics/
Here’s an example of color coding used incorrectly. Not only is there no other affordance than color, the legend is on a printed card below the monitor.
Here’s an example of how situations can mirror permanent disabilities. Anyone who has tried to see a dim smartphone screen in bright sunlight is having an experience that’s similar to low vision.
This page links to https://www.winndixie.com/plenti, where the presenter shows what a web site is like for someone who can’t use a mouse/
Definition from http://www.afb.org/prodBrowseCatResults.aspx?CatID=49
Here is the same page in Chrome, and also with a rendering of how it would be read in a screen reader.
Then pull up the page https://www.sonesta.com/us/louisiana/new-orleans/royal-sonesta-new-orleans and have it read with Voiceover.
Wen you make your services accessible you reach more people
Claudio can give you an example of a Title III lawsuit.
Juan Carlos Gil is a blind man living in Coral Gables, who sometimes shopped at the Winn Dixie on 27th Avenue.
To refill the prescription, he would go into the store and ask someone to assist him. A store employee would walk him to the area of the pharmacy and he would tell the pharmacist what he needed. But he felt uncomfortable because he did not know who else was nearby listening.
Without an accessible website, his only way of getting coupons was to have a friend read the coupons from a newspaper. He would also ask employees to find coupons for him but sometimes the employees seemed annoyed by his request for help.
WCAG = Web Content Accessibility Guidelines
Why hasn’t WCAG gotten more traction among more web professionals?
...and yet we should be treating WCAG with the same respect and enforcement as a your local building codes.
This brings us to a crossroads:
Will accessibility become like tax returns, where you need an expensive professional to be compliant?
-or-
Can we make it easy to understand and adopt for every web professional?
Web Accessibility is an all-or-nothing commitment
This is what 75% accessibility looks like. (This slide also segways into next section about laws and why “A little accessibility” isn’t enough to avoid a lawsuit)
Or top irritants, based on conversations with a colleague of mine who works with assistive technologies.
Here, a wheelchair ramp that was built perfectly, then got obstructed with decorative planters. You can build perfect accessibility and have it rendered useless by later modifications.
As an accessibility consultant, you can give a seal of approval to a site, but it only applies to the pages or templates you’ve reviewed and only for the dates you reviewed the site.
This is Claudio’s unscientific blame-o-gram which shows which job functions play the biggest role in accessibility.
Transition to practical examples.
Putting accessibility to use
The Accessibility Stack…
Progressive enhancement and ARIA are the most significant concepts and tools that help people that use assistive technology, so define a baseline, use semantic HTML5 and enhance from there. The lower levels provide the most robust support for most users.
Many web people like to take the focus outline away from a browser. Removing the outline happens in almost every reset stylesheet. This causes huge accessibility problems for sighted keyboard users — tab through the example and see for yourself. You can’t see where the focus is on the screen. Why? Because the focus outline was taken away, and it wasn’t replaced. Like in Raiders of the Lost Ark. And the arrows fly.
DEMO COLOR CONTRAST TOOL
Here’s a sample palette based around color contrast.
It’s a revision of a palette from a branding company that’s treated like the Ten Commandments.
A palette like this also explains where you can overlay text on a color
Examples from color checking tool at http://leaverou.github.io/contrast-ratio/
WCAG AA requires 4.5:1
WCAG AAA requires 7:1
That effectively eliminates text on any midtone or bright color.
Go to https://www.linkedin.com/in/anello/ and show WAVE and aXe plugins
CPACC - Certified Professional in Accessibility Core Competencies
WAS - Web Accessibility Specialist
CPWA - Certified Professional in Web Accessibility