SlideShare a Scribd company logo
#a11y
UNDERSTANDING AND SUPPORTING

WEB ACCESSIBILITY
@bamadesigner
https://bamadesigner.com

https://wpcampus.org
Rachel Cherry
Senior Software Engineer, Disney

Director, WPCampus
#a11y
Web accessibility refers to 

the inclusive practice of 

removing barriers that prevent
interaction with, or access to,
websites by people with disabilities.
We need to make
every single thing
accessible to 

every single person
with a disability.
- Stevie Wonder
#a11y
Information wants to be free
ACCESSIBLE
Information needs to be
#a11y
#a11y
Data shows 1 in 5 people 

have a disability. 

You could be excluding 20%
of your potential users, 

customers, students, and more.
#a11y
If you’re federally funded:

Section 508 (with new rules enforced Jan 2018)
If you’re a business:
They’re on the way (2018)

There are legal requirements:
Introduction to US Laws

http://webaim.org/articles/laws/usa/


*Be sure to follow along with the

Department of Justice ruling on Website Accessibility 

Requirements for the Americans with Disability Act (ADA).

Current status: delayed until 2018 (not too far away)
WCAG 2.0
Web Content

Accessibility

Guidelines
Section 508
WCAG are part of a series of guidelines published by 

the Web Accessibility Initiative (WAI) of the World
Wide Web Consortium (W3C), the main international
standards organization for the Internet.
Current version was published in December 2008.
Section 508 Standards apply to electronic and 

information technology developed, procured, maintained,
or used by federal agencies, including computer hardware
and software, websites, phone systems, and copiers.
Standards were issued in 2000.
WEB ACCESSIBILITY STANDARDS
CHANGES COMING FOR SECTION 508
Section 508 is getting an update that will 

change the web accessibility requirements 

to match WCAG 2.0 AA.

The Final Rule is effective March 17, 2017, 

and organizations (that receive federal funding)
will have to comply by January 18, 2018.
WCAG 2.0 Checklist
http://webaim.org/standards/wcag/checklist


Section 508 Checklist
http://webaim.org/standards/508/checklist
All non-text content needs 

a text equivalent to help
convey information to those
with sensory disabilities
#a11y
Accessible text equivalents:
• Image captions or alt attributes
• Captioned video
• Audio transcripts
Examples of non-text content:
• Images / Word Art
• Charts / Graphs / Infographics
• Decorative images, such as backgrounds
Without alternative text, life-saving information in this 

graphic is not available to visually impaired users.
.screen-reader-text {

clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
position: absolute !important;
white-space: nowrap;
height: 1px;
width: 1px;
overflow: hidden;
}
How to hide content visually:
#a11y
Color usage should
have sufficient contrast
and should not be used
as the sole method for
conveying information
or direction.
Minimum: 4.5:1
GREAT CONTRAST

8.47:1
REALLY BAD
CONTRAST
2.63:1
YOU GOTTA BE
KIDDING ME
1.63:1
POOR CONTRAST
3.5:1
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
If color is the only method for conveying a link:
The link is invisible to those who can’t see blue:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
If a different color AND an underline is used:
Then the link would become visible:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
#a11y
The purpose of all links /actions

should be determined from 

the text alone and its context. 

In other words: 

Never use “click here”.
#a11y
Pages should have

<proper heading structure>

in order to be readable without 

a stylesheet for those who do not
navigate visually.
#a11y
All site functionality should 

be available using the keyboard
for persons who do not 

use a mouse.
How to provide “Skip to Content”:
<a id=“skip” href="#content">Skip to Main Content</a>
#skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip:focus {
position: static;
width: auto;
height: auto;
}
#a11y
While not an official standard,
responsive web design is
important to ensure your site can
be viewed on assistive devices of
various sizes.
#a11y
Another important consideration 

is download speeds/order 

to ensure those who don’t have
access to high speed Internet can
consume your information.
#a11y
ARIA (Assistive Rich Internet Applications)

Was created to improve accessibility 

of applications by providing extra
information to screen readers via
HTML attributes.
<nav role=“navigation”>
<ul>
<li>
<a href=“/">Home</a>
</li>
<li>
<a href="/contact">Contact Us</a>
</li>
</ul>
</nav>
ARIA example:
GOOD MARKUP
The foundation for good accessibility is
#a11y
Which improves your SEO!
an accessibility evaluation tool from WebAIM
http://wave.webaim.org
• Free in-browser testing
• Free Chrome extension
• Premium API
TESTS FOR: Section 508 and WCAG 2.0 A/AA
an accessibility visualization toolkit
http://khan.github.io/tota11y
• Alt text and confusing link text
• Color contrast
• Heading structure
• Form labels
• ARIA landmarks
TESTS FOR:
• Javascript file that
places button on site
• Free Chrome
extension
client-side script that checks HTML source code
and detects violations of a defined coding standard
http://squizlabs.github.io/HTML_CodeSniffer
• Copy/paste code for quick testing
• Free bookmarklet for in-browser testing
TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA
an automated accessibility testing library
http://pa11y.org
• Section508
• WCAG 2.0 A/AA/AAA
TESTS FOR:
• Web dashboard
• JSON web service
• Command line
PROVIDES:
Javascript library that executes automated accessibility
testing inside your testing framework or browser of choice
http://www.deque.com/products/axe
• Free Javascript library
• Free Chrome extension
Material Design:

Color Tool
https://material.io/color/
Allows you to measure 

the accessibility level of 

any color combination.
wA11y - The Web Accessibility Toolbox

https://wordpress.org/plugins/wa11y/
WORDPRESS PLUGINS
WORDPRESS PLUGINS
BROWSER TOOLS
BROWSER TOOLS
BROWSER TOOLS
Take advantage of in-browser
testing tools to evaluate
WordPress theme demos 

and other products before 

you purchase.
ACCESSIBILITY PRO TIP:
#a11y
• Which Tool Is Best?
• http://webaim.org/articles/tools
• Web Accessibility Evaluation Tools
• https://www.w3.org/WAI/ER/tools
• Color Contrast Checker
• http://webaim.org/resources/contrastchecker
RESOURCES
• Getting Started With ARIA
• http://a11yproject.com/posts/getting-started-aria
• Practical ARIA Examples
• http://heydonworks.com/practical_aria_examples
• Videos of screen readers using ARIA
• http://zomigi.com/blog/videos-of-screen-readers-
using-aria-updated/
RESOURCES
• Accessibility - WordPress Theme Handbook
• https://developer.wordpress.org/themes/functionality/
accessibility/
• The A11Y Project
• http://a11yproject.com/
• The API You Probably Didn't Know Existed

Amanda Rush, LoopConf
• https://www.youtube.com/watch?v=IYg66C9PQy8
RESOURCES
The A11Y Project has

an AMAZING list of resources:


http://a11yproject.com/resources.html
RESOURCES
So what are my first
steps to get started
supporting accessibility?
#a11y
#1:

Learn accessibility
deeply
#a11y
#2:

Implement testing
tools into your
workflow
#a11y
#3:

User testing is

the best testing
#a11y
#4:

Tell your friends
#a11y
#5:

Repeat
#a11y
WCAG 2.0 Checklist
http://webaim.org/standards/wcag/checklist


Section 508 Checklist
http://webaim.org/standards/508/checklist
COMMERCIAL SERVICES
• Deque
• https://www.deque.com/
• Tenon
• http://www.tenon.io
• Siteimprove
• https://siteimprove.com
• SSB Bart
• http://www.ssbbartgroup.com/
A community and conference for web
professionals, educators and people
dedicated to the confluence of
WordPress in higher education.
https://wpcampus.org

@wpcampusorg / #WPCampus
TICKETS STILL
AVAILABLE!
QUESTIONS? #a11y
@bamadesigner
https://bamadesigner.com

https://wpcampus.org
Rachel Cherry
Senior Software Engineer, Disney

Director, WPCampus

More Related Content

What's hot

Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
Alexander Loechel
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
Media Access Australia
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
AGILEDROP
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Mindfire Solutions
 
Accessibility Basics
Accessibility BasicsAccessibility Basics
Accessibility Basics
Whitney Quesenbery
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
Sivaprasad Paliyath (CUA - HFI)
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
Russ Weakley
 
WCAG
WCAGWCAG
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
Whitney Quesenbery
 
Web content accessibility
Web content accessibilityWeb content accessibility
Web content accessibility
krishnapriya Tadepalli
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
ciwstudy
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website Accessibility
SilverTech
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
PurnimaAgarwal6
 
Automated-Accessibility-Testing
Automated-Accessibility-TestingAutomated-Accessibility-Testing
Automated-Accessibility-Testing
Manoj Kumar Kumar
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiences
Whitney Quesenbery
 
Accessibility Testing 101
Accessibility Testing 101Accessibility Testing 101
Accessibility Testing 101
Patrick Dunphy
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
Aparna A Gopalakrishnan
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Amal Abduallah
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick Wins
Media Access Australia
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
YogeshDaphane
 

What's hot (20)

Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Accessibility Basics
Accessibility BasicsAccessibility Basics
Accessibility Basics
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
WCAG
WCAGWCAG
WCAG
 
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
 
Web content accessibility
Web content accessibilityWeb content accessibility
Web content accessibility
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website Accessibility
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Automated-Accessibility-Testing
Automated-Accessibility-TestingAutomated-Accessibility-Testing
Automated-Accessibility-Testing
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiences
 
Accessibility Testing 101
Accessibility Testing 101Accessibility Testing 101
Accessibility Testing 101
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick Wins
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
 

Viewers also liked

Vestidos de novia y ramos
Vestidos de novia y ramosVestidos de novia y ramos
Vestidos de novia y ramos
Susana Gallardo
 
How to Handle Life's Wake-Up Calls Wisely
How to Handle Life's Wake-Up Calls WiselyHow to Handle Life's Wake-Up Calls Wisely
How to Handle Life's Wake-Up Calls Wisely
Michael Mamas
 
Designing in the Open
Designing in the OpenDesigning in the Open
Designing in the Open
Mark Uraine
 
The Marketer's Guide To Customer Interviews
The Marketer's Guide To Customer InterviewsThe Marketer's Guide To Customer Interviews
The Marketer's Guide To Customer Interviews
Good Funnel
 
The Be-All, End-All List of Small Business Tax Deductions
The Be-All, End-All List of Small Business Tax DeductionsThe Be-All, End-All List of Small Business Tax Deductions
The Be-All, End-All List of Small Business Tax Deductions
Wagepoint
 
Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
Rachel Cherry
 
Brief role of patient empowerment on hhc 2 draft3 - with video 2
Brief role of patient empowerment on hhc  2      draft3 - with video 2Brief role of patient empowerment on hhc  2      draft3 - with video 2
Brief role of patient empowerment on hhc 2 draft3 - with video 2
Dr. Maryanne McGuckin, FSHEA
 
Layser
LayserLayser
Announcements- Wednesday, March 29, 2017
Announcements- Wednesday, March 29, 2017Announcements- Wednesday, March 29, 2017
Announcements- Wednesday, March 29, 2017
Ken Stayner
 
Apptk.es
Apptk.esApptk.es
Apptk.es
Raquel Gómez
 
Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017
Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017
Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017
Bernhard Krabina
 
Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)
Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)
Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)
University of Ferrara
 
Draft Roadmap to Improve Primary Education & Health in Delhi
Draft Roadmap to Improve Primary Education & Health in DelhiDraft Roadmap to Improve Primary Education & Health in Delhi
Draft Roadmap to Improve Primary Education & Health in Delhi
Rachit Seth
 
Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...
Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...
Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...
Bibdoc 37
 
モテるエンジニア
モテるエンジニアモテるエンジニア
モテるエンジニア
2celeb
 
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
🎤 Hanno Embregts 🎸
 
Memórias das trincheiras (parte 2)
Memórias das trincheiras (parte 2)Memórias das trincheiras (parte 2)
Memórias das trincheiras (parte 2)
Elton Minetto
 

Viewers also liked (17)

Vestidos de novia y ramos
Vestidos de novia y ramosVestidos de novia y ramos
Vestidos de novia y ramos
 
How to Handle Life's Wake-Up Calls Wisely
How to Handle Life's Wake-Up Calls WiselyHow to Handle Life's Wake-Up Calls Wisely
How to Handle Life's Wake-Up Calls Wisely
 
Designing in the Open
Designing in the OpenDesigning in the Open
Designing in the Open
 
The Marketer's Guide To Customer Interviews
The Marketer's Guide To Customer InterviewsThe Marketer's Guide To Customer Interviews
The Marketer's Guide To Customer Interviews
 
The Be-All, End-All List of Small Business Tax Deductions
The Be-All, End-All List of Small Business Tax DeductionsThe Be-All, End-All List of Small Business Tax Deductions
The Be-All, End-All List of Small Business Tax Deductions
 
Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
 
Brief role of patient empowerment on hhc 2 draft3 - with video 2
Brief role of patient empowerment on hhc  2      draft3 - with video 2Brief role of patient empowerment on hhc  2      draft3 - with video 2
Brief role of patient empowerment on hhc 2 draft3 - with video 2
 
Layser
LayserLayser
Layser
 
Announcements- Wednesday, March 29, 2017
Announcements- Wednesday, March 29, 2017Announcements- Wednesday, March 29, 2017
Announcements- Wednesday, March 29, 2017
 
Apptk.es
Apptk.esApptk.es
Apptk.es
 
Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017
Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017
Open Spending Austria -.Offenerhaushalt.at at the SharingReuse-Conference 2017
 
Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)
Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)
Giurisprudenza tributaria vicentina di merito (settembre - dicembre 2016)
 
Draft Roadmap to Improve Primary Education & Health in Delhi
Draft Roadmap to Improve Primary Education & Health in DelhiDraft Roadmap to Improve Primary Education & Health in Delhi
Draft Roadmap to Improve Primary Education & Health in Delhi
 
Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...
Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...
Bibdoc 2016 - Maitriser la lecture : de la maternelle à l'université. Enjeux ...
 
モテるエンジニア
モテるエンジニアモテるエンジニア
モテるエンジニア
 
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
 
Memórias das trincheiras (parte 2)
Memórias das trincheiras (parte 2)Memórias das trincheiras (parte 2)
Memórias das trincheiras (parte 2)
 

Similar to Understanding and Supporting Web Accessibility

How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
Rachel Cherry
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
Rachel Cherry
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
Rachel Cherry
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
Emagination ®
 
Access by Default
Access by DefaultAccess by Default
Access by Default
Great Wide Open
 
Access by Default
Access by DefaultAccess by Default
Access by Default
Kendra Skeene
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?
Devin Olson
 
Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016
Maureen (Moe) Kraft
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
Rachel Cherry
 
A11y presentation-2017
A11y presentation-2017A11y presentation-2017
A11y presentation-2017
Kevin Erickson, CSM
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
Devin Olson
 
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
 
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteTear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Sarah Joy Arnold
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web Accessibility
All Things Open
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
Will Jayroe
 
Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developers
Sergei Martens
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
John Coonen
 
Accessibility part 2
Accessibility part 2Accessibility part 2
Accessibility part 2
Yongjie Chen 陈永杰
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)
cspin
 
Best Tools for Website Accessibility Testing in 2022.pdf
Best Tools for Website Accessibility Testing in 2022.pdfBest Tools for Website Accessibility Testing in 2022.pdf
Best Tools for Website Accessibility Testing in 2022.pdf
Zoe Gilbert
 

Similar to Understanding and Supporting Web Accessibility (20)

How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?
 
Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016Html5 aria-css-ibm-csun-2016
Html5 aria-css-ibm-csun-2016
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
 
A11y presentation-2017
A11y presentation-2017A11y presentation-2017
A11y presentation-2017
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
 
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...
 
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteTear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web Accessibility
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developers
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
Accessibility part 2
Accessibility part 2Accessibility part 2
Accessibility part 2
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)
 
Best Tools for Website Accessibility Testing in 2022.pdf
Best Tools for Website Accessibility Testing in 2022.pdfBest Tools for Website Accessibility Testing in 2022.pdf
Best Tools for Website Accessibility Testing in 2022.pdf
 

Recently uploaded

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 

Recently uploaded (20)

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 

Understanding and Supporting Web Accessibility

  • 1. #a11y UNDERSTANDING AND SUPPORTING
 WEB ACCESSIBILITY @bamadesigner https://bamadesigner.com
 https://wpcampus.org Rachel Cherry Senior Software Engineer, Disney
 Director, WPCampus
  • 2. #a11y Web accessibility refers to 
 the inclusive practice of 
 removing barriers that prevent interaction with, or access to, websites by people with disabilities.
  • 3. We need to make every single thing accessible to 
 every single person with a disability. - Stevie Wonder
  • 4. #a11y Information wants to be free ACCESSIBLE Information needs to be #a11y
  • 5. #a11y Data shows 1 in 5 people 
 have a disability. 
 You could be excluding 20% of your potential users, 
 customers, students, and more.
  • 6. #a11y If you’re federally funded:
 Section 508 (with new rules enforced Jan 2018) If you’re a business: They’re on the way (2018)
 There are legal requirements:
  • 7. Introduction to US Laws
 http://webaim.org/articles/laws/usa/ 
 *Be sure to follow along with the
 Department of Justice ruling on Website Accessibility 
 Requirements for the Americans with Disability Act (ADA).
 Current status: delayed until 2018 (not too far away)
  • 8. WCAG 2.0 Web Content
 Accessibility
 Guidelines Section 508 WCAG are part of a series of guidelines published by 
 the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. Current version was published in December 2008. Section 508 Standards apply to electronic and 
 information technology developed, procured, maintained, or used by federal agencies, including computer hardware and software, websites, phone systems, and copiers. Standards were issued in 2000. WEB ACCESSIBILITY STANDARDS
  • 9. CHANGES COMING FOR SECTION 508 Section 508 is getting an update that will 
 change the web accessibility requirements 
 to match WCAG 2.0 AA.
 The Final Rule is effective March 17, 2017, 
 and organizations (that receive federal funding) will have to comply by January 18, 2018.
  • 10. WCAG 2.0 Checklist http://webaim.org/standards/wcag/checklist 
 Section 508 Checklist http://webaim.org/standards/508/checklist
  • 11. All non-text content needs 
 a text equivalent to help convey information to those with sensory disabilities
  • 12. #a11y Accessible text equivalents: • Image captions or alt attributes • Captioned video • Audio transcripts Examples of non-text content: • Images / Word Art • Charts / Graphs / Infographics • Decorative images, such as backgrounds
  • 13. Without alternative text, life-saving information in this 
 graphic is not available to visually impaired users.
  • 14. .screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px); clip-path: polygon(0 0, 0 0, 0 0, 0 0); position: absolute !important; white-space: nowrap; height: 1px; width: 1px; overflow: hidden; } How to hide content visually:
  • 15. #a11y Color usage should have sufficient contrast and should not be used as the sole method for conveying information or direction. Minimum: 4.5:1 GREAT CONTRAST
 8.47:1 REALLY BAD CONTRAST 2.63:1 YOU GOTTA BE KIDDING ME 1.63:1 POOR CONTRAST 3.5:1
  • 16. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If color is the only method for conveying a link:
  • 17. The link is invisible to those who can’t see blue: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  • 18. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If a different color AND an underline is used:
  • 19. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  • 20. #a11y The purpose of all links /actions
 should be determined from 
 the text alone and its context. 
 In other words: 
 Never use “click here”.
  • 21. #a11y Pages should have
 <proper heading structure>
 in order to be readable without 
 a stylesheet for those who do not navigate visually.
  • 22. #a11y All site functionality should 
 be available using the keyboard for persons who do not 
 use a mouse.
  • 23. How to provide “Skip to Content”: <a id=“skip” href="#content">Skip to Main Content</a> #skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } #skip:focus { position: static; width: auto; height: auto; }
  • 24. #a11y While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes.
  • 25. #a11y Another important consideration 
 is download speeds/order 
 to ensure those who don’t have access to high speed Internet can consume your information.
  • 26. #a11y ARIA (Assistive Rich Internet Applications)
 Was created to improve accessibility 
 of applications by providing extra information to screen readers via HTML attributes.
  • 27. <nav role=“navigation”> <ul> <li> <a href=“/">Home</a> </li> <li> <a href="/contact">Contact Us</a> </li> </ul> </nav> ARIA example:
  • 28. GOOD MARKUP The foundation for good accessibility is #a11y Which improves your SEO!
  • 29. an accessibility evaluation tool from WebAIM http://wave.webaim.org • Free in-browser testing • Free Chrome extension • Premium API TESTS FOR: Section 508 and WCAG 2.0 A/AA
  • 30. an accessibility visualization toolkit http://khan.github.io/tota11y • Alt text and confusing link text • Color contrast • Heading structure • Form labels • ARIA landmarks TESTS FOR: • Javascript file that places button on site • Free Chrome extension
  • 31. client-side script that checks HTML source code and detects violations of a defined coding standard http://squizlabs.github.io/HTML_CodeSniffer • Copy/paste code for quick testing • Free bookmarklet for in-browser testing TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA
  • 32. an automated accessibility testing library http://pa11y.org • Section508 • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:
  • 33. Javascript library that executes automated accessibility testing inside your testing framework or browser of choice http://www.deque.com/products/axe • Free Javascript library • Free Chrome extension
  • 34. Material Design:
 Color Tool https://material.io/color/ Allows you to measure 
 the accessibility level of 
 any color combination.
  • 35. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/ WORDPRESS PLUGINS
  • 40. Take advantage of in-browser testing tools to evaluate WordPress theme demos 
 and other products before 
 you purchase. ACCESSIBILITY PRO TIP: #a11y
  • 41. • Which Tool Is Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools • Color Contrast Checker • http://webaim.org/resources/contrastchecker RESOURCES
  • 42. • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria • Practical ARIA Examples • http://heydonworks.com/practical_aria_examples • Videos of screen readers using ARIA • http://zomigi.com/blog/videos-of-screen-readers- using-aria-updated/ RESOURCES
  • 43. • Accessibility - WordPress Theme Handbook • https://developer.wordpress.org/themes/functionality/ accessibility/ • The A11Y Project • http://a11yproject.com/ • The API You Probably Didn't Know Existed
 Amanda Rush, LoopConf • https://www.youtube.com/watch?v=IYg66C9PQy8 RESOURCES
  • 44. The A11Y Project has
 an AMAZING list of resources: 
 http://a11yproject.com/resources.html RESOURCES
  • 45. So what are my first steps to get started supporting accessibility? #a11y
  • 47. #2:
 Implement testing tools into your workflow #a11y
  • 48. #3:
 User testing is
 the best testing #a11y
  • 51. WCAG 2.0 Checklist http://webaim.org/standards/wcag/checklist 
 Section 508 Checklist http://webaim.org/standards/508/checklist
  • 52. COMMERCIAL SERVICES • Deque • https://www.deque.com/ • Tenon • http://www.tenon.io • Siteimprove • https://siteimprove.com • SSB Bart • http://www.ssbbartgroup.com/
  • 53. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org
 @wpcampusorg / #WPCampus TICKETS STILL AVAILABLE!