SlideShare a Scribd company logo
1 of 47
Download to read offline
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
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
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
Digital Accessibility
Digital accessibility is the practice
of making digital experiences
useful by everyone, regardless of
physical abilities.
Why is accessibility important?
Why is accessibility important?
Independence.
19%
of the overall US population reports having a disability
- US Census Bureau, 2010
38.7%of the US population over age 65 reports having a disability
- US Census Bureau, 2010
81-98%of the US population over age 90 reports having a disability
- from US Census Bureau, 90+ in the United States: 2006-2008
What is a disability?
Disability is not
a personal health condition.
Disability comes from
mismatched human
interactions
Disabilities vs. Impairments
Sometimes the limitations with our
senses and physical abilities are the
same.
It’s just the circumstances that differ.
Permanent / Temporary /
Situational
Universal design serves everyone,
not just the full-time disabled.
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.
What about tailoring user
experiences for people with
disabilities?
Many view this as
“separate but equal”
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.
Understanding barriers to accessibility
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.
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
Not everyone sees the
full color spectrum.
9% of males have some sort of
color vision deficiency
0.5% of females
-National Eye Institute
Global Accessibility Awareness Day
Dirty window Cataracts
What does a motor
disability feel like?
Let’s try using a website without a
pointing device.
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
main
Skipto
main
Skipto
main
main
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.
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
Gil v. Winn-Dixie
Landmark case tried in June 2017
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
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.
What is WCAG 2.0?
The international standard for
web accessibility, made up of an
exhaustive set of guidelines.
Because it’s boring AF.
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
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
“Mostly accessible”
helps no one.
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
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
Once accessible does not mean
always accessible.
Who’s responsible?
How different disciplines
impact web accessibility
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
Best Practices
PwC’s Digital Services
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.
Sample of a color palette built around color contrast.
An accessible color palette
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
Global Accessibility Awareness Day
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
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)

More Related Content

What's hot

Accessible Environment For The Persons with Disabilities
Accessible Environment For The Persons with DisabilitiesAccessible Environment For The Persons with Disabilities
Accessible Environment For The Persons with DisabilitiesSahibzada Anjum Nadeem
 
Medical management of osteoporosis
Medical management of osteoporosisMedical management of osteoporosis
Medical management of osteoporosisARPUTHA SELVARAJ A
 
Assistive Technology
Assistive TechnologyAssistive Technology
Assistive TechnologyTaril Slater
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsUXPA International
 
development of special education in India.
development of special education in India.development of special education in India.
development of special education in India.Md Shadab Alam
 
Causes & prevention of disabilities
Causes & prevention of disabilitiesCauses & prevention of disabilities
Causes & prevention of disabilitiesDr Saim Ali soomro
 
Assistive technology
Assistive technologyAssistive technology
Assistive technologymorganneh
 
Inclusive education for persons with disabilities
Inclusive education for persons with disabilitiesInclusive education for persons with disabilities
Inclusive education for persons with disabilitiesDhananjay Bhole
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
 
Disability Awareness Training Slideshow
Disability Awareness Training SlideshowDisability Awareness Training Slideshow
Disability Awareness Training Slideshowartbeyondsight
 
Assistive technology for inclusive classroom
Assistive technology for inclusive classroomAssistive technology for inclusive classroom
Assistive technology for inclusive classroomDhivya Dhivya
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web AccessibilitySteven Swafford
 
Disability :Current Concepts
Disability :Current ConceptsDisability :Current Concepts
Disability :Current ConceptsAhmed-Refat Refat
 
history of special education
history of special educationhistory of special education
history of special educationRosechelVioleta1
 
Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityRachel Cherry
 

What's hot (20)

Causes of Disability
Causes of DisabilityCauses of Disability
Causes of Disability
 
Accessible Environment For The Persons with Disabilities
Accessible Environment For The Persons with DisabilitiesAccessible Environment For The Persons with Disabilities
Accessible Environment For The Persons with Disabilities
 
Medical management of osteoporosis
Medical management of osteoporosisMedical management of osteoporosis
Medical management of osteoporosis
 
Assistive Technology
Assistive TechnologyAssistive Technology
Assistive Technology
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
 
Osteoartritis
OsteoartritisOsteoartritis
Osteoartritis
 
development of special education in India.
development of special education in India.development of special education in India.
development of special education in India.
 
Causes & prevention of disabilities
Causes & prevention of disabilitiesCauses & prevention of disabilities
Causes & prevention of disabilities
 
Assistive technology
Assistive technologyAssistive technology
Assistive technology
 
MODELS OF DISABILITY
MODELS OF DISABILITY MODELS OF DISABILITY
MODELS OF DISABILITY
 
Inclusive education for persons with disabilities
Inclusive education for persons with disabilitiesInclusive education for persons with disabilities
Inclusive education for persons with disabilities
 
Disability awareness pt version
Disability awareness pt versionDisability awareness pt version
Disability awareness pt version
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
Disability Awareness Training Slideshow
Disability Awareness Training SlideshowDisability Awareness Training Slideshow
Disability Awareness Training Slideshow
 
Assistive technology for inclusive classroom
Assistive technology for inclusive classroomAssistive technology for inclusive classroom
Assistive technology for inclusive classroom
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web Accessibility
 
Osteoporosis
Osteoporosis Osteoporosis
Osteoporosis
 
Disability :Current Concepts
Disability :Current ConceptsDisability :Current Concepts
Disability :Current Concepts
 
history of special education
history of special educationhistory of special education
history of special education
 
Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web Accessibility
 

Similar to Global Accessibility Awareness Day

Forms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App DesignForms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App DesignDianaGray10
 
Enhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with DisabilitiesEnhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with DisabilitiesUXPA International
 
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
 
Accessibility importance
Accessibility importanceAccessibility importance
Accessibility importanceKrishna Vutla
 
World IA Day DC 2019: What we can all learn from one university's journey to ...
World IA Day DC 2019: What we can all learn from one university's journey to ...World IA Day DC 2019: What we can all learn from one university's journey to ...
World IA Day DC 2019: What we can all learn from one university's journey to ...Rachel Weatherly
 
Digital Divide And Accessibility
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And AccessibilityGlenn McKnight
 
Digital Divide And Accessibility
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And AccessibilityGlenn McKnight
 
The overlap between Web Accessibility and Web Usability for Older people
The overlap between Web Accessibility and Web Usability for Older peopleThe overlap between Web Accessibility and Web Usability for Older people
The overlap between Web Accessibility and Web Usability for Older peopleDavid Sloan
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetCity University London
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Whole Brain Group, LLC
 
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.Scorpion Healthcare
 
Wordcamp Ottawa 2014 - WordPress Accessibility
Wordcamp Ottawa 2014 - WordPress AccessibilityWordcamp Ottawa 2014 - WordPress Accessibility
Wordcamp Ottawa 2014 - WordPress Accessibilitythegeniusca
 
hcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonan
hcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonanhcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonan
hcid2011 - Practial Tips for Designing for Inclusive UX: Kath MoonanCity University London
 
BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...Lyndon Borrow
 
Accessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG ComplianceAccessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG ComplianceFrank Walsh
 
Diverse User Experience by Kath Moonan
Diverse User Experience by Kath MoonanDiverse User Experience by Kath Moonan
Diverse User Experience by Kath MoonanCity University London
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?Russ Weakley
 

Similar to Global Accessibility Awareness Day (20)

Forms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App DesignForms for All: Building Accessibility into UiPath App Design
Forms for All: Building Accessibility into UiPath App Design
 
Enhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with DisabilitiesEnhancing the User Experience for People with Disabilities
Enhancing the User Experience for People with Disabilities
 
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Accessibility importance
Accessibility importanceAccessibility importance
Accessibility importance
 
World IA Day DC 2019: What we can all learn from one university's journey to ...
World IA Day DC 2019: What we can all learn from one university's journey to ...World IA Day DC 2019: What we can all learn from one university's journey to ...
World IA Day DC 2019: What we can all learn from one university's journey to ...
 
Digital Divide And Accessibility
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And Accessibility
 
Digital Divide And Accessibility
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And Accessibility
 
The overlap between Web Accessibility and Web Usability for Older people
The overlap between Web Accessibility and Web Usability for Older peopleThe overlap between Web Accessibility and Web Usability for Older people
The overlap between Web Accessibility and Web Usability for Older people
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
Fa qs 2016-04-21
Fa qs 2016-04-21Fa qs 2016-04-21
Fa qs 2016-04-21
 
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
Beckers Hospital Review : The Hospital Marketer's Guide to ADA Compliance.
 
Wordcamp Ottawa 2014 - WordPress Accessibility
Wordcamp Ottawa 2014 - WordPress AccessibilityWordcamp Ottawa 2014 - WordPress Accessibility
Wordcamp Ottawa 2014 - WordPress Accessibility
 
hcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonan
hcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonanhcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonan
hcid2011 - Practial Tips for Designing for Inclusive UX: Kath Moonan
 
Building websites for all
Building websites for allBuilding websites for all
Building websites for all
 
BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...BDA - The Importance of Digital Accessibility and why it should matter to the...
BDA - The Importance of Digital Accessibility and why it should matter to the...
 
Accessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG ComplianceAccessibility Overview - 508 and WCAG Compliance
Accessibility Overview - 508 and WCAG Compliance
 
Diverse User Experience by Kath Moonan
Diverse User Experience by Kath MoonanDiverse User Experience by Kath Moonan
Diverse User Experience by Kath Moonan
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
 

More from Claudio Luis Vera, MBA, CPWA

More from Claudio Luis Vera, MBA, CPWA (15)

Ten Commandments CSUN 20220316-v3-export.pptx
Ten Commandments CSUN 20220316-v3-export.pptxTen Commandments CSUN 20220316-v3-export.pptx
Ten Commandments CSUN 20220316-v3-export.pptx
 
CSUN - Ten Commandments DRAFT
CSUN - Ten Commandments DRAFTCSUN - Ten Commandments DRAFT
CSUN - Ten Commandments DRAFT
 
The role of design in discrimination
The role of design in discriminationThe role of design in discrimination
The role of design in discrimination
 
Giving a voice to those without speech
Giving a voice to those without speechGiving a voice to those without speech
Giving a voice to those without speech
 
Everyone here spoke sign language
Everyone here spoke sign languageEveryone here spoke sign language
Everyone here spoke sign language
 
How can I test my website for accessibility?
How can I test my website for accessibility?How can I test my website for accessibility?
How can I test my website for accessibility?
 
Accessibility: the letter of the law
Accessibility: the letter of the lawAccessibility: the letter of the law
Accessibility: the letter of the law
 
IXDA - Build apps like you mean it
IXDA - Build apps like you mean itIXDA - Build apps like you mean it
IXDA - Build apps like you mean it
 
Disabilities and digital equality
Disabilities and digital equalityDisabilities and digital equality
Disabilities and digital equality
 
Build apps like you mean it
Build apps like you mean itBuild apps like you mean it
Build apps like you mean it
 
Business case for accessibility
Business case for accessibilityBusiness case for accessibility
Business case for accessibility
 
Building the business case for accessibility
Building the business case for accessibilityBuilding the business case for accessibility
Building the business case for accessibility
 
Built for all: a badge for accessibility
Built for all: a badge for accessibilityBuilt for all: a badge for accessibility
Built for all: a badge for accessibility
 
Accessibility testing for everyone
Accessibility testing for everyoneAccessibility testing for everyone
Accessibility testing for everyone
 
Building websites for all
Building websites for allBuilding websites for all
Building websites for all
 

Recently uploaded

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (19)

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

Global Accessibility Awareness Day

  • 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
  • 4. Digital Accessibility Digital accessibility is the practice of making digital experiences useful by everyone, regardless of physical abilities.
  • 5. Why is accessibility important?
  • 6. Why is accessibility important? Independence.
  • 7. 19% of the overall US population reports having a disability - US Census Bureau, 2010
  • 8. 38.7%of the US population over age 65 reports having a disability - US Census Bureau, 2010
  • 9. 81-98%of the US population over age 90 reports having a disability - from US Census Bureau, 90+ in the United States: 2006-2008
  • 10. What is a disability? Disability is not a personal health condition. Disability comes from mismatched human interactions
  • 11. Disabilities vs. Impairments Sometimes the limitations with our senses and physical abilities are the same. It’s just the circumstances that differ.
  • 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.
  • 16. Understanding barriers to accessibility
  • 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.
  • 18. 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
  • 19. Not everyone sees the full color spectrum. 9% of males have some sort of color vision deficiency 0.5% of females -National Eye Institute
  • 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
  • 27. Gil v. Winn-Dixie Landmark case tried in June 2017
  • 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
  • 37. Once accessible does not mean always accessible.
  • 38. Who’s responsible? How different disciplines impact web accessibility
  • 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

  1. [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.
  2. What benefit does it provide
  3. What percentage of people in the US do you think has a disability?
  4. [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
  5. 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.
  6. Disability is when your abilities at a given time are not up to the task at hand.
  7. Source: Microsoft Inclusive Toolkit https://www.microsoft.com/en-us/design/inclusive
  8. Note that the concept of universal design is broader than the concept of accessible design for people with disabilities.
  9. 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?
  10. What benefit does it provide
  11. Color blindness example taken from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
  12. Here are 30 of the 38 test plates used in the Ishihara color blindness test. Example http://wearecolorblind.com/example/google-analytics/
  13. 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.
  14. 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.
  15. 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/
  16. Definition from http://www.afb.org/prodBrowseCatResults.aspx?CatID=49
  17. 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.
  18. Wen you make your services accessible you reach more people
  19. Claudio can give you an example of a Title III lawsuit.
  20. 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.
  21. WCAG = Web Content Accessibility Guidelines Why hasn’t WCAG gotten more traction among more web professionals?
  22. ...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?
  23. 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)
  24. Or top irritants, based on conversations with a colleague of mine who works with assistive technologies.
  25. 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.
  26. This is Claudio’s unscientific blame-o-gram which shows which job functions play the biggest role in accessibility.
  27. Transition to practical examples.
  28. Putting accessibility to use
  29. 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.
  30. 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.
  31. 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
  32. 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.
  33. Go to https://www.linkedin.com/in/anello/ and show WAVE and aXe plugins
  34. CPACC - Certified Professional in Accessibility Core Competencies WAS - Web Accessibility Specialist CPWA - Certified Professional in Web Accessibility