Web Accessibility and Inclusive Design

1. Building websites for all
Web Accessibility and Inclusive Design
Claudio Luis Vera - Designer, information architect, human
Simple-theory.com

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

3. 19%
of the US population overall has a disability
- US Census Bureau, 2010

4. 38.7%of the US population over age 65 has a disability
- US Census Bureau, 2010

5. 81-98%of the US population over age 90 has a disability
- from US Census Bureau, 90+ in the United States: 2006-2008

6. CLAUDIO LUIS VERA, SIMPLE-THEORY
Types of disabilities
Low vision
Color blindness
Blindness
Cognitive disabilities
Mood disorders
Math disabilities
Hearing impairments
Physical impairments
Lack of mobility
Dyslexia
Seizure disorders
Psychological / psychiatric

7. CLAUDIO LUIS VERA, SIMPLE-THEORY
Which ones are most important for websites?
Low vision
Color blindness
Blindness
Cognitive disabilities
Mood disorders
Math disabilities
Hearing impairments
Physical impairments
Lack of mobility
Dyslexia
Seizure disorders
Psychological / psychiatric

8. Not everyone sees the
full color spectrum.
9% of males have some sort of
color vision deficiency
0.5% of females
-National Eye Institute

9. CLAUDIO LUIS VERA, SIMPLE-THEORY
Designing for
color deficiencies
Don’t rely on color coding alone
in your interface - add another
graphical treatment for those
who don’t see color

10. What does partial
blindness feel like?
Let’s see what a website looks like
to someone with low vision

11. What does a motor
disability feel like?
Let’s try using a website without a
pointing device.

12. #1“A little accessibility” helps no one.

13. 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

14. CLAUDIO LUIS VERA, SIMPLE-THEORY
main
Skipto
main
Skipto
main
main

15. CLAUDIO LUIS VERA, SIMPLE-THEORY
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.

16. #2Be accessible, or be sued.

17. CLAUDIO LUIS VERA, SIMPLE-THEORY
Section 508
Mandates that all electronic and
information technology developed,
procured, maintained, or used by the
federal government be accessible to
people with disabilities.
Section 508 affects:
State universities
Government contractors
Software companies

18. CLAUDIO LUIS VERA, SIMPLE-THEORY
Title III of the Americans with Disabilities Act
Original interpretation:
Prohibits discrimination on the basis of
disability in the activities of places of
public accommodations.
Title III affects brick-and-mortar
facilities, especially:
Restaurants, movie theaters, schools,
day care facilities, recreation facilities,
and doctors’ offices

19. CLAUDIO LUIS VERA, SIMPLE-THEORY
Title III of the Americans with Disabilities Act
Who’s affected now:
Websites operated by public
accommodations
Websites offering services available
in public accommodations
Who will be affected:
Any commercial website,
starting with major brands

20. CLAUDIO LUIS VERA, SIMPLE-THEORY
Who’s been sued
Target
Dicks Sporting Goods
Greyhound Lines
Patagonia
Adidas
Blick Art Supplies
Marriott
Winn-Dixie
eHarmony
Harvard, MIT
Red Roof Inns
Safeway

21. Gil v. Winn-Dixie
Landmark case tried in June 2017

22. CLAUDIO LUIS VERA, SIMPLE-THEORY
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

23. CLAUDIO LUIS VERA, SIMPLE-THEORY
How an accessibility suit plays out:
Inaccessible
website fails
for user with
disability
Website
owner is
notified by
user
Website
owner fails
to respond
favorably
User files
ADA
complaint
Website
owner fails to
fix website
quickly or file
ADA
statement
User files
ADA lawsuit
in state or
federal
court
Website
owner fails
to settle
with
plaintiff
ADA case is
decided by
judge in
non-jury
trial

24. CLAUDIO LUIS VERA, SIMPLE-THEORY
What lies ahead:
There will be no guidance from the DOJ.
Web accessibility will be decided
piecemeal by the courts.
Title III is likely to be found to apply to
all websites
All websites will have to be accessible or
risk a lawsuit.
All websites will need an ADA statement
along with Privacy policy and copyright.
WCAG 2.0 AA will be the standard going
forward.

25. What is WCAG 2.0 AA?
The international standard for
web accessibility, made up of an
exhaustive set of guidelines.

26. Because it’s boring AF.

27. CLAUDIO LUIS VERA, SIMPLE-THEORY
Top accessibility mistakes
Missing alt tags or alt text
Using styles instead of headings
Using buttons where links should go
Insufficient color contrast
Missing “Skip navigation” link
Missing form field labels
Broken tab index
Social toolbars that don’t skip links

28. 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

29. CLAUDIO LUIS VERA, SIMPLE-THEORY
Sample of a color palette built around color contrast.
An accessible color palette

30. CLAUDIO LUIS VERA, SIMPLE-THEORY
WAI-ARIA
Applies to more complex interactivity,
such as AJAX and javascript.
Uses HTML attributes that tell assistive
technologies how to handle the content
that follows.
Examples:
aria-role
aria-label=”my label”
aria-hidden=”true”

31. CLAUDIO LUIS VERA, SIMPLE-THEORY
Who’s responsible?
How different disciplines
impact web accessibility

32. CLAUDIO LUIS VERA, SIMPLE-THEORY
Who’s responsible?
Management
● sets budgets
● makes sure resources and processes
are right for accessibility
Accessibility consultants*
● conduct accessibility audit
● make recommendations
● create test plan (sometimes)
Project management*
● Manages workflow and team’s
adherence to guidelines

33. CLAUDIO LUIS VERA, SIMPLE-THEORY
Who’s responsible?
Design/UX/Creative
● Choose accessible design patterns
● Ensure sufficient color contrast (> 4.5)
● Ensure fonts are large enough (> 14pt)
Content
● Add meaningful alt tags to images
● Add transcripts or captions to video
● Add transcripts to audio
● Enforce semantic header structure to
HTML and PDF content

34. CLAUDIO LUIS VERA, SIMPLE-THEORY
Who’s responsible?
Front end dev
● Choose accessible components
● Declare language in header
● Set up skip navigation links
● Set up proper default heading
structures
● Use links for hyperlinks
● Use buttons for form inputs
Back end dev
● Choose accessible third-party apps for
integration

35. #3Once accessible does not mean always accessible.

36. CLAUDIO LUIS VERA, SIMPLE-THEORY
Staying in shape
How do you keep inaccessible content
and code from being added to your
accessible site?
● Train content editors to be well-versed
in accessibility
● Set up internal QA for content and peer
review for code
● Budget for periodic audits
● Audit all third party components
● Accessibility needs to be part of the
workforce’s culture.

37. CLAUDIO LUIS VERA, SIMPLE-THEORY
What’s next
BUILT-FOR-ALL INITIATIVE
Open source / community initiative for
checking apps and components for
compliance.
Seal of approval to be displayed on
download page.

38. CLAUDIO LUIS VERA, SIMPLE-THEORY
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

39. CLAUDIO LUIS VERA, SIMPLE-THEORY
Resources
No Coffee vision simulator (Chrome
extension)
WAVE accessibility tester (Chrome/Firefox)
AXE accessibility tester (Chrome dev tools)
WebbIE (screenreader 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)