SlideShare a Scribd company logo
TOOLS AND TECHNIQUES FOR

EVALUATING #A11Y
A C C E S S I B I L I T Y
@bamadesigner
https://bamadesigner.com

https://wa11y.org
Rachel Carden
Senior Software Engineer, Disney

Founder, WPCampus
What is accessibility?#a11y
Web accessibility refers to 

the inclusive practice of 

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

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

of your potential users, 

customers, students, 

and more.
#a11y
WEB ACCESSIBILITY STANDARDS
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.
All non-text content needs 

a text equivalent to help
convey information to those
with sensory disabilities
Accessible text equivalents:
• Image captions or alt attributes
• Captioned video
• Audio transcripts
Examples of non-text content:
• Images / Word Art
• Charts / Graphs
• Decorative images, such as backgrounds
#a11y
Without alternative text, life-saving information in this
graphic is not available to visually impaired users.
#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 would be 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.
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.
#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 and 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.
#a11y
GOOD MARKUP
The foundation for good accessibility is
#a11y
CHECKLISTS
• WCAG 2.0 Checklist - from WebAIM
• http://webaim.org/standards/wcag/checklist
• Section 508 Checklist - from WebAIM
• http://webaim.org/standards/508/checklist
#a11y
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
wA11y - The Web Accessibility Toolbox

https://wordpress.org/plugins/wa11y/
BROWSER TOOLS#a11y
BROWSER TOOLS#a11y
Take advantage of in-browser
testing tools to evaluate
WordPress theme demos
before you purchase.
ACCESSIBILITY PRO TIP:
#a11y
TOOLS
• Which Tool Is Best?
• http://webaim.org/articles/tools
• Web Accessibility Evaluation Tools
• https://www.w3.org/WAI/ER/tools
#a11y
• Color Contrast Checker
• http://webaim.org/resources/contrastchecker
• Getting Started With ARIA
• http://a11yproject.com/posts/getting-started-aria
#a11y OTHER RESOURCES
• 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/
#a11y OTHER RESOURCES
#A11y, WordPress and Your Website
https://www.wpwatercooler.com/video/a11y-wordpress-
website-wrachel-carden-bamadesigner-wpblab/
Accessibility In WordPress
https://www.thewpcrowd.com/podcast/episode-006-
accessibility-in-wordpress/
wA11y
"web a11y" or "web accessibility"

wA11y.org is a new initiative to contribute to web
accessibility by providing information, education,
resources, and tools.
Interested in joining or contributing?

Sign up at https://wa11y.org
A community and conference for web
professionals, educators and people
dedicated to the confluence of
WordPress in higher education.
https://wpcampus.org
@wpcampusorg
#WPCampus
QUESTIONS?
Get involved at https://wa11y.org
#A11Y / #wA11Y
@bamadesigner
https://bamadesigner.com

https://wa11y.org
Rachel Carden
Senior Software Engineer, Disney

Founder, WPCampus

More Related Content

What's hot

Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
Eric Malcolm
 
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
 
A11y presentation-2017
A11y presentation-2017A11y presentation-2017
A11y presentation-2017
Kevin Erickson, CSM
 
#techInColor 2017: Practical Web Accessibility Testing
#techInColor 2017: Practical Web Accessibility Testing#techInColor 2017: Practical Web Accessibility Testing
#techInColor 2017: Practical Web Accessibility Testing
Mikey Ilagan
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
Domenico Monaco
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
Devin Olson
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
Antonio Peric-Mazar
 
Information Architecture in Mobile
Information Architecture in MobileInformation Architecture in Mobile
Information Architecture in Mobile
Lazar Petrakiev
 
Netlog Developer Day
Netlog Developer DayNetlog Developer Day
Netlog Developer Day
Folke Lemaitre
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
Sur College of Applied Sciences
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
Harvard Web Working Group
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
Netlog & The Open Web
Netlog & The Open WebNetlog & The Open Web
Netlog & The Open Web
Folke Lemaitre
 
Whyprogressivewebapps
WhyprogressivewebappsWhyprogressivewebapps
Whyprogressivewebapps
involveall technologies
 
Accessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and SiddhanthAccessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and Siddhanth
bhumika2108
 
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileShape SharePoint 2013 for Mobile
Shape SharePoint 2013 for Mobile
Eric Overfield
 
Presentation1
Presentation1Presentation1
Presentation1
csimmons44
 
Tips from the trenches Accessibility Testing
Tips from the trenches Accessibility TestingTips from the trenches Accessibility Testing
Tips from the trenches Accessibility Testing
Manoj Kumar Kumar
 
Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"
Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"
Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"
BBC News Labs
 
Cross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureCross Platform Mobile Application Architecture
Cross Platform Mobile Application Architecture
Derrick Bowen
 

What's hot (20)

Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
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...
 
A11y presentation-2017
A11y presentation-2017A11y presentation-2017
A11y presentation-2017
 
#techInColor 2017: Practical Web Accessibility Testing
#techInColor 2017: Practical Web Accessibility Testing#techInColor 2017: Practical Web Accessibility Testing
#techInColor 2017: Practical Web Accessibility Testing
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
 
Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Information Architecture in Mobile
Information Architecture in MobileInformation Architecture in Mobile
Information Architecture in Mobile
 
Netlog Developer Day
Netlog Developer DayNetlog Developer Day
Netlog Developer Day
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Netlog & The Open Web
Netlog & The Open WebNetlog & The Open Web
Netlog & The Open Web
 
Whyprogressivewebapps
WhyprogressivewebappsWhyprogressivewebapps
Whyprogressivewebapps
 
Accessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and SiddhanthAccessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and Siddhanth
 
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileShape SharePoint 2013 for Mobile
Shape SharePoint 2013 for Mobile
 
Presentation1
Presentation1Presentation1
Presentation1
 
Tips from the trenches Accessibility Testing
Tips from the trenches Accessibility TestingTips from the trenches Accessibility Testing
Tips from the trenches Accessibility Testing
 
Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"
Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"
Dan Appelquist at BBC News Labs : "firefoxOS - the web, mobile, web apps"
 
Cross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureCross Platform Mobile Application Architecture
Cross Platform Mobile Application Architecture
 

Viewers also liked

Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going Crazy
John Eckman
 
What is the Responsibility of Plugin Developers?
What is the Responsibility of Plugin Developers?What is the Responsibility of Plugin Developers?
What is the Responsibility of Plugin Developers?
Takayuki Miyoshi
 
Core plugins - WordCamp UK 2010
Core plugins  - WordCamp UK 2010Core plugins  - WordCamp UK 2010
Core plugins - WordCamp UK 2010
Peter Westwood
 
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike LittleWordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
Mike Little
 
WordPress APIs
WordPress APIsWordPress APIs
WordPress APIs
mdawaffe
 
WordPress as a Service
WordPress as a ServiceWordPress as a Service
WordPress as a Service
Andrew Bauer
 
Empowering Your Clients and Be an Advocate for Yourself
Empowering Your Clients and Be an Advocate for YourselfEmpowering Your Clients and Be an Advocate for Yourself
Empowering Your Clients and Be an Advocate for Yourself
Linchpin
 
Sweet Child O' Themes
Sweet Child O' ThemesSweet Child O' Themes
Sweet Child O' Themes
Breno Alves
 
Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.
Beto Muniz
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
Sergio Costa
 
Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!
Bronson Quick
 
Never fear, the customizer is here!
Never fear, the customizer is here!Never fear, the customizer is here!
Never fear, the customizer is here!
Cameron Jones
 
Método The bridge
Método The bridgeMétodo The bridge
Método The bridge
Daniel Coscarelli
 
Do marketplace ao WordPress - WordCamp BH 2015
Do marketplace ao WordPress -  WordCamp BH 2015Do marketplace ao WordPress -  WordCamp BH 2015
Do marketplace ao WordPress - WordCamp BH 2015
Fellyph Cintra
 
Getting to Know Underscores
Getting to Know Underscores Getting to Know Underscores
Getting to Know Underscores
Jason Yingling
 
Create a newsletter in less than 17 minutes without writing a single word
Create a newsletter in less than 17 minutes without writing a single wordCreate a newsletter in less than 17 minutes without writing a single word
Create a newsletter in less than 17 minutes without writing a single word
Nik Cree
 
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane - Content Modeling - WordCamp St. Louis 2016Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane
 
Building a Simple Project Plan for WordPress Projects
Building a Simple Project Plan for WordPress ProjectsBuilding a Simple Project Plan for WordPress Projects
Building a Simple Project Plan for WordPress Projects
Lucas Lima
 
Organizing Your First Website Usability Test - WordCamp Boston 2016
Organizing Your First Website Usability Test - WordCamp Boston 2016Organizing Your First Website Usability Test - WordCamp Boston 2016
Organizing Your First Website Usability Test - WordCamp Boston 2016
Anthony D. Paul
 
Teste A/B
Teste A/BTeste A/B
Teste A/B
Leonardo Velozo
 

Viewers also liked (20)

Managing Clients without Going Crazy
Managing Clients without Going CrazyManaging Clients without Going Crazy
Managing Clients without Going Crazy
 
What is the Responsibility of Plugin Developers?
What is the Responsibility of Plugin Developers?What is the Responsibility of Plugin Developers?
What is the Responsibility of Plugin Developers?
 
Core plugins - WordCamp UK 2010
Core plugins  - WordCamp UK 2010Core plugins  - WordCamp UK 2010
Core plugins - WordCamp UK 2010
 
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike LittleWordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
 
WordPress APIs
WordPress APIsWordPress APIs
WordPress APIs
 
WordPress as a Service
WordPress as a ServiceWordPress as a Service
WordPress as a Service
 
Empowering Your Clients and Be an Advocate for Yourself
Empowering Your Clients and Be an Advocate for YourselfEmpowering Your Clients and Be an Advocate for Yourself
Empowering Your Clients and Be an Advocate for Yourself
 
Sweet Child O' Themes
Sweet Child O' ThemesSweet Child O' Themes
Sweet Child O' Themes
 
Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
 
Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!Debugging WordPress Core and Plugins!
Debugging WordPress Core and Plugins!
 
Never fear, the customizer is here!
Never fear, the customizer is here!Never fear, the customizer is here!
Never fear, the customizer is here!
 
Método The bridge
Método The bridgeMétodo The bridge
Método The bridge
 
Do marketplace ao WordPress - WordCamp BH 2015
Do marketplace ao WordPress -  WordCamp BH 2015Do marketplace ao WordPress -  WordCamp BH 2015
Do marketplace ao WordPress - WordCamp BH 2015
 
Getting to Know Underscores
Getting to Know Underscores Getting to Know Underscores
Getting to Know Underscores
 
Create a newsletter in less than 17 minutes without writing a single word
Create a newsletter in less than 17 minutes without writing a single wordCreate a newsletter in less than 17 minutes without writing a single word
Create a newsletter in less than 17 minutes without writing a single word
 
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane - Content Modeling - WordCamp St. Louis 2016Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
 
Building a Simple Project Plan for WordPress Projects
Building a Simple Project Plan for WordPress ProjectsBuilding a Simple Project Plan for WordPress Projects
Building a Simple Project Plan for WordPress Projects
 
Organizing Your First Website Usability Test - WordCamp Boston 2016
Organizing Your First Website Usability Test - WordCamp Boston 2016Organizing Your First Website Usability Test - WordCamp Boston 2016
Organizing Your First Website Usability Test - WordCamp Boston 2016
 
Teste A/B
Teste A/BTeste A/B
Teste A/B
 

Similar to Tools And Techniques For Evaluating 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 Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
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
 
Wave training
Wave trainingWave training
Wave training
Sean Yo
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web Accessibility
All Things Open
 
Lightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing toolsLightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing tools
Globant
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
FNian
 
Accessibility Workshop
Accessibility WorkshopAccessibility Workshop
Accessibility Workshop
Lar Veale
 
Getting Started With Web Accessibility
Getting Started With Web AccessibilityGetting Started With Web Accessibility
Getting Started With Web Accessibility
Sean Yo
 
Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developers
Sergei Martens
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
Will Jayroe
 
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
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
Margarida Sousa
 
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
elianna james
 
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill CorporationWeb Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
hannonhill
 
Accessibility part 2
Accessibility part 2Accessibility part 2
Accessibility part 2
Yongjie Chen 陈永杰
 
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
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
Emagination ®
 
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
 
Tips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptxTips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptx
Inclusivea11y
 

Similar to Tools And Techniques For Evaluating 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 Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
 
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
 
Wave training
Wave trainingWave training
Wave training
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web Accessibility
 
Lightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing toolsLightning Talks by Globant - Accessibility for everyone testing tools
Lightning Talks by Globant - Accessibility for everyone testing tools
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
 
Accessibility Workshop
Accessibility WorkshopAccessibility Workshop
Accessibility Workshop
 
Getting Started With Web Accessibility
Getting Started With Web AccessibilityGetting Started With Web Accessibility
Getting Started With Web Accessibility
 
Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developers
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
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)
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
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
 
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill CorporationWeb Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
Web Accessibility Demystified, by Penny Harding, Hannon Hill Corporation
 
Accessibility part 2
Accessibility part 2Accessibility part 2
Accessibility part 2
 
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
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
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?
 
Tips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptxTips to Improve WCAG Compliance.pptx
Tips to Improve WCAG Compliance.pptx
 

Recently uploaded

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
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
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
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 

Recently uploaded (20)

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
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
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
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 

Tools And Techniques For Evaluating Accessibility

  • 1. TOOLS AND TECHNIQUES FOR
 EVALUATING #A11Y A C C E S S I B I L I T Y @bamadesigner https://bamadesigner.com
 https://wa11y.org Rachel Carden Senior Software Engineer, Disney
 Founder, WPCampus
  • 3. Web accessibility refers to 
 the inclusive practice of 
 removing barriers that prevent interaction with, or access to, websites by people with disabilities. #a11y
  • 4. We need to make every single thing accessible to 
 every single person with a disability. - Stevie Wonder
  • 5. Information wants to be free ACCESSIBLE Information needs to be #a11y
  • 6. Data shows 1 in 5 people have a disability. You could be excluding 20% 
 of your potential users, 
 customers, students, 
 and more. #a11y
  • 7. WEB ACCESSIBILITY STANDARDS 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.
  • 8. All non-text content needs 
 a text equivalent to help convey information to those with sensory disabilities
  • 9. Accessible text equivalents: • Image captions or alt attributes • Captioned video • Audio transcripts Examples of non-text content: • Images / Word Art • Charts / Graphs • Decorative images, such as backgrounds #a11y
  • 10. Without alternative text, life-saving information in this graphic is not available to visually impaired users. #a11y
  • 11. 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
  • 12. 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:
  • 13. The link would be 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.
  • 14. 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:
  • 15. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  • 16. Pages should have
 <proper heading structure>
 in order to be readable without a stylesheet for those who do not navigate visually. #a11y
  • 17. All site functionality
 should be available 
 using the keyboard 
 for persons who do 
 not use a mouse. #a11y
  • 18. While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. #a11y
  • 19. Another important consideration is download speeds and order to ensure those who don’t have access to high speed Internet can consume your information. #a11y
  • 20. ARIA (Assistive Rich Internet Applications)
 Was created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. #a11y
  • 21. GOOD MARKUP The foundation for good accessibility is #a11y
  • 22. CHECKLISTS • WCAG 2.0 Checklist - from WebAIM • http://webaim.org/standards/wcag/checklist • Section 508 Checklist - from WebAIM • http://webaim.org/standards/508/checklist #a11y
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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:
  • 27. 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
  • 28. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/
  • 29.
  • 32. Take advantage of in-browser testing tools to evaluate WordPress theme demos before you purchase. ACCESSIBILITY PRO TIP: #a11y
  • 33. TOOLS • Which Tool Is Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools #a11y
  • 34. • Color Contrast Checker • http://webaim.org/resources/contrastchecker • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria #a11y OTHER RESOURCES
  • 35. • 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/ #a11y OTHER RESOURCES
  • 36. #A11y, WordPress and Your Website https://www.wpwatercooler.com/video/a11y-wordpress- website-wrachel-carden-bamadesigner-wpblab/ Accessibility In WordPress https://www.thewpcrowd.com/podcast/episode-006- accessibility-in-wordpress/
  • 37. wA11y "web a11y" or "web accessibility"
 wA11y.org is a new initiative to contribute to web accessibility by providing information, education, resources, and tools. Interested in joining or contributing?
 Sign up at https://wa11y.org
  • 38. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org @wpcampusorg #WPCampus
  • 39. QUESTIONS? Get involved at https://wa11y.org #A11Y / #wA11Y @bamadesigner https://bamadesigner.com
 https://wa11y.org Rachel Carden Senior Software Engineer, Disney
 Founder, WPCampus