SlideShare a Scribd company logo
1 of 39
Download to read offline
@roadwarriorwp | RoadWarriorCreative.com
Website Accessibility
& WordPress
Georgetown WordPress Meetup
August 21, 2018 | AMBER HINDS
@roadwarriorwp | RoadWarriorCreative.com
Objective
Have a website that can be used by everyone -
people of all abilities and disabilities.
@roadwarriorwp | RoadWarriorCreative.com
@roadwarriorwp | RoadWarriorCreative.com
Today’s Agenda
● Why accessibility matters
● Accessibility laws - who needs to follow them
● Accessibility best practices
● How to test if your website is accessible or has any accessibility issues
● How to fix accessibility issues if they arise
● Noteworthy WordPress specific accessibility tools/themes
@roadwarriorwp | RoadWarriorCreative.com
Why Accessibility Matters
@roadwarriorwp | RoadWarriorCreative.com
>1 billion
of the world’s population have a disability.
World Health Organization 2018 World Report on Disability
@roadwarriorwp | RoadWarriorCreative.com
15%
of the world’s population have a disability.
World Health Organization 2018 World Report on Disability
@roadwarriorwp | RoadWarriorCreative.com
1 in 8
people in the United States have a disability.
U.S. Census Bureau's 2016 American Community Survey
@roadwarriorwp | RoadWarriorCreative.com
$200 billion
spent annually by disabled Americans.
U.S. Department of Labor
@roadwarriorwp | RoadWarriorCreative.com
Accessibility matters because...
● It’s good karma
● It’s good for SEO
● It increases revenue opportunities
● In some cases it’s legally required
@roadwarriorwp | RoadWarriorCreative.com
Accessibility Laws*
*I am not a lawyer.
@roadwarriorwp | RoadWarriorCreative.com
Accessibility is a Civil Right
● Equal access to information:
education, transit, voting, healthcare, employment, human services, etc.
● Equal ability to participate fully in our society
@roadwarriorwp | RoadWarriorCreative.com
Rehabilitation Act of 1973
Section 504:
“No otherwise qualified individual with a disability in the United States... shall, solely
by reason of her or his disability, be excluded from participation in, be denied the
benefits of, or be subjected to discrimination under any program or activity
receiving Federal financial assistance.”
Applies to: Government agencies, federally-funded projects, K-12 schools,
postsecondary entities (state colleges, universities, and vocational training schools)
@roadwarriorwp | RoadWarriorCreative.com
Rehabilitation Act of 1973
Section 508:
Bars the Federal government from procuring electronic and information technology
goods and services (including website design) that are not fully accessible to those
with disabilities.
@roadwarriorwp | RoadWarriorCreative.com
Rehabilitation Act of 1973
When complaints arise, members of the public,
students, and employees with disabilities may:
1. File an administrative complaint with agencies they believe to be in violation of
Section 508.
2. File a private lawsuit in federal district court, or
3. File a formal complaint through the US DOJ Office of Civil Rights.
https://webaim.org/articles/laws/usa/rehab
@roadwarriorwp | RoadWarriorCreative.com
Americans with Disabilities Act (ADA)
Title II
Communications with persons with disabilities must be "as effective as
communications with others" [28 C.F.R. ss 35.160 (a)].
Title III
Deals with public accommodation of people with disabilities.
https://webaim.org/articles/laws/usa/ada
@roadwarriorwp | RoadWarriorCreative.com
Americans with Disabilities Act (ADA)
No clear laws on how ADA applies the the web -
no regulations - but increasing numbers of
lawsuits filed and won under ADA.
https://webaim.org/articles/laws/usa/ada
@roadwarriorwp | RoadWarriorCreative.com
Telecommunications Act of 1996
“The Act requires manufacturers of telecommunications equipment and customer
premises equipment to ensure that the equipment is designed, developed, and
fabricated to be accessible to and usable by individuals with disabilities, if readily
achievable.”
Complaints
● Filed with FCC
● Lawsuits are not authorized and there is no provision for damages.
https://webaim.org/articles/laws/usa/telecomm
@roadwarriorwp | RoadWarriorCreative.com
Don’t forget about your state...
● State funded IT laws
● State anti-discrimination laws
● Many states allow damages for ADA cases
+ Local governments
+ World laws
https://webaim.org/articles/laws/world/
@roadwarriorwp | RoadWarriorCreative.com
Best Practices
@roadwarriorwp | RoadWarriorCreative.com
Your website should be...
Perceivable
Operable
Understandable
Robust
@roadwarriorwp | RoadWarriorCreative.com
Perceivable
Information needs to be
transformable from one form to
another.
Main content and message should be
separable from the way it is styled or
presented.
@roadwarriorwp | RoadWarriorCreative.com
Operable
Not everyone uses a standard keyboard + mouse
to navigate the web.
● Multiple ways to interact with the website
● User control over time limits/timing
● Clear instructions
● Error recovery options
@roadwarriorwp | RoadWarriorCreative.com
Understandable
● Appropriately targeted language/reading level
● Supplemental representation of information
○ Graphics, videos, audio players, graphs, etc.
○ Summaries or excerpts before long articles
● Understandable functionality
○ Navigation structure, form interactions, available tooltips etc.
@roadwarriorwp | RoadWarriorCreative.com
Robust
● Functionality across current and future devices,
operating systems, and browsers
● Support some outdated versions
● Validate against technical standards for that
platform
@roadwarriorwp | RoadWarriorCreative.com
When to start thinking about accessibility...
@roadwarriorwp | RoadWarriorCreative.com
@roadwarriorwp | RoadWarriorCreative.com
Accessibility Checklist
@roadwarriorwp | RoadWarriorCreative.com
Accessibility in Content
● Images need appropriate alt text or empty alt
text if decorative
● Caption videos
● Provide transcripts for audio and video
● Be careful about reading level (8th grade)
● Avoid rapid flashing (no more than 3x/sec.)
@roadwarriorwp | RoadWarriorCreative.com
Accessibility in Design
● Website must have consistent interface
● Check color contrast
● Beware of line length issues
● Keep related items close (proximity)
● Design focus states for links, buttons, etc.
● Design for error states
@roadwarriorwp | RoadWarriorCreative.com
Accessibility in Development
● Follow Web Standards (W3C/WAI)
● Set page language
● Use semantics (headings, buttons, labels)
● Foreground images, please (with alt text)
● Hide informative text for screen readers with a CSS class
like: .screen-reader-text
● Mobile-first, responsive design navigable with keyboard
only (tab key)
@roadwarriorwp | RoadWarriorCreative.com
Example: Fort Collins Montessori School
@roadwarriorwp | RoadWarriorCreative.com
Guideline + Testing Resources
● P.O.U.R.: https://webaim.org/articles/pour
● Current web content accessibility guidelines (WCAG) 2.1:
https://www.w3.org/TR/WCAG21
● WCAG 2 implementation checklist:
https://webaim.org/standards/wcag/checklist
● Test your website: http://wave.webaim.org or get the Chrome extension
● Chrome Dev Tools > Audits
● Color contrast checker: https://webaim.org/resources/contrastchecker
● Screen readers:
○ ChromeVox
○ NVDA
@roadwarriorwp | RoadWarriorCreative.com
@roadwarriorwp | RoadWarriorCreative.com
Accessibility & WordPress Core
● Handbook on WordPress Accessibility
● Theme Developer’s Handbook Accessibility Guidelines
● Requirements for the accessibility-ready tag in the theme directory
● Make WordPress Accessible - you can help!
● Learn More: Accessibility talks on WordPress.tv
@roadwarriorwp | RoadWarriorCreative.com
Accessibility Ready Themes
Free Themes
● 124 tagged “Accessibility ready” in the Theme Directory at
https://wordpress.org/themes/tags/accessibility-ready
Premium Themes
● Genesis by StudioPress - https://my.studiopress.com/themes
● 200 tagged “Accessible” on Themeforest -
https://themeforest.net/category/wordpress?term=accessible
@roadwarriorwp | RoadWarriorCreative.com
Accessibility Plugin
Fix common accessibility
issues without changing your
theme.
https://wordpress.org/plugin
s/wp-accessibility
@roadwarriorwp | RoadWarriorCreative.com
What if I just want to hire someone?
Ask yourself how much of an expert you want, and
how key accessibility is to your website’s success
and reputation (or legal compliance)...
● Knowability - Austin-based nonprofit
● Check with local agencies
● Find a freelancer
Is there anyone in the room today?
@roadwarriorwp | RoadWarriorCreative.com
Amber Hinds
Creative Director
Road Warrior Creative
amber@roadwarriorcreative.com
@roadwarriorwp
on all the socials

More Related Content

Similar to Website Accessibility & WordPress

Similar to Website Accessibility & WordPress (20)

Making Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web AccessibilityMaking Web Easily Accessible with Web Accessibility
Making Web Easily Accessible with Web Accessibility
 
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
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
Web accessibility strategies for the new decade
Web accessibility strategies for the new decadeWeb accessibility strategies for the new decade
Web accessibility strategies for the new decade
 
ADA Compliance & Website Accessibility
ADA Compliance & Website AccessibilityADA Compliance & Website Accessibility
ADA Compliance & Website Accessibility
 
ADA Compliance
ADA ComplianceADA Compliance
ADA Compliance
 
A T Resources
A T  ResourcesA T  Resources
A T Resources
 
How to Improve Digital Accessibility While Reducing Legal Risk
How to Improve Digital Accessibility While Reducing Legal RiskHow to Improve Digital Accessibility While Reducing Legal Risk
How to Improve Digital Accessibility While Reducing Legal Risk
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
Building a transit website around user needs - CalACT 2016 spring presentation
Building a transit website around user needs - CalACT 2016 spring presentationBuilding a transit website around user needs - CalACT 2016 spring presentation
Building a transit website around user needs - CalACT 2016 spring presentation
 
Basics of creating accessible code for websites
Basics of creating accessible code for websitesBasics of creating accessible code for websites
Basics of creating accessible code for websites
 
Accessibility Primer Version 2 - UXfrkln meetup
Accessibility Primer Version 2 - UXfrkln meetupAccessibility Primer Version 2 - UXfrkln meetup
Accessibility Primer Version 2 - UXfrkln meetup
 
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.
 
S8746
S8746S8746
S8746
 
What is Accessibility
What is AccessibilityWhat is Accessibility
What is Accessibility
 
Portland, ME WordPress Meetup - Web Accessibility in 2020
Portland, ME WordPress Meetup - Web Accessibility in 2020Portland, ME WordPress Meetup - Web Accessibility in 2020
Portland, ME WordPress Meetup - Web Accessibility in 2020
 
Website Accessibility FAQs by Mediacurrent
Website Accessibility FAQs by MediacurrentWebsite Accessibility FAQs by Mediacurrent
Website Accessibility FAQs by Mediacurrent
 
Web content accessibility
Web content accessibilityWeb content accessibility
Web content accessibility
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Test your website for Web Accessibility
Test your website for  Web AccessibilityTest your website for  Web Accessibility
Test your website for Web Accessibility
 

Recently uploaded

一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
F
 
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
AS
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
ayvbos
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
AS
 
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
ayvbos
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
AS
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
ayvbos
 
一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书
F
 
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
c6eb683559b3
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理
AS
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
AS
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
A
 
一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理
F
 
Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
mikehavy0
 

Recently uploaded (20)

一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
 
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
一比一原版(Wintec毕业证书)新西兰怀卡托理工学院毕业证原件一模一样
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
 
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download NowHUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
 
Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303
 
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
 
Abortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
Abortion Pills In Jeddah+966572737505 & Get cytotec JeddahAbortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
Abortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
 
Washington Football Commanders Redskins Feathers Shirt
Washington Football Commanders Redskins Feathers ShirtWashington Football Commanders Redskins Feathers Shirt
Washington Football Commanders Redskins Feathers Shirt
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
 
一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书
 
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
一比一原版(NYU毕业证书)美国纽约大学毕业证学位证书
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理
 
[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon
[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon
[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon
 
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide HandbookTOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
 
一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理一比一原版犹他大学毕业证如何办理
一比一原版犹他大学毕业证如何办理
 
Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
 

Website Accessibility & WordPress