Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
What is accessibility?#a11y
Web accessibility refers to 

the inclusive practice of 

removing barriers that
prevent interaction with, or
access to, w...
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, 
...
WEB ACCESSIBILITY STANDARDS
WCAG 2.0
Web Content

Accessibility

Guidelines
Section 508
WCAG are part of a series of guide...
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...
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 direct...
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to...
The link would be invisible to those who can’t see blue:
Web accessibility means that
people with disabilities can
perceiv...
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to...
Then the link would become visible:
Web accessibility means that
people with disabilities can
perceive, understand, naviga...
Pages should have

<proper heading structure>

in order to be readable
without a stylesheet for those
who do not navigate ...
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 ...
Another important
consideration is download
speeds and order to ensure
those who don’t have access
to high speed Internet ...
ARIA (Assistive Rich
Internet Applications)

Was created to improve
accessibility of applications by
providing extra infor...
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 ...
an accessibility evaluation tool from WebAIM
http://wave.webaim.org
• Free in-browser testing
• Free Chrome extension
• Pr...
an accessibility visualization toolkit
http://khan.github.io/tota11y
• Alt text and confusing link text
• Color contrast
•...
client-side script that checks HTML source code
and detects violations of a defined coding standard
http://squizlabs.github...
an automated accessibility testing library
http://pa11y.org
• Section508
• WCAG 2.0 A/AA/AAA
TESTS FOR:
• Web dashboard
• ...
Javascript library that executes automated accessibility
testing inside your testing framework or browser of choice
http:/...
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:
#...
TOOLS
• Which Tool Is Best?
• http://webaim.org/articles/tools
• Web Accessibility Evaluation Tools
• https://www.w3.org/W...
• Color Contrast Checker
• http://webaim.org/resources/contrastchecker
• Getting Started With ARIA
• http://a11yproject.co...
• Practical ARIA Examples
• http://heydonworks.com/practical_aria_examples
• Videos of screen readers using ARIA
• http://...
#A11y, WordPress and Your Website
https://www.wpwatercooler.com/video/a11y-wordpress-
website-wrachel-carden-bamadesigner-...
wA11y
"web a11y" or "web accessibility"

wA11y.org is a new initiative to contribute to web
accessibility by providing inf...
A community and conference for web
professionals, educators and people
dedicated to the confluence of
WordPress in higher ...
QUESTIONS?
Get involved at https://wa11y.org
#A11Y / #wA11Y
@bamadesigner
https://bamadesigner.com

https://wa11y.org
Rach...
Tools And Techniques For Evaluating Accessibility
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Managing Clients without Going Crazy
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

Tools And Techniques For Evaluating Accessibility

Download to read offline

When your website is accessible, all users can access your content no matter their abilities. Visually-impaired users can visit your website using a screen reader. Those who can’t use the mouse can navigate your site using a keyboard or other input device. Some accessibility features might also improve your SEO. When your site is inaccessible, research shows you could be excluding up to 20 percent of your users. This talk for all skill levels will review tools and techniques you can use to test and improve your site’s accessibility.

Related Books

Free with a 30 day trial from Scribd

See all

Tools And Techniques For Evaluating Accessibility

  1. 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
  2. 2. What is accessibility?#a11y
  3. 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. 4. We need to make every single thing accessible to 
 every single person with a disability. - Stevie Wonder
  5. 5. Information wants to be free ACCESSIBLE Information needs to be #a11y
  6. 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. 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. 8. All non-text content needs 
 a text equivalent to help convey information to those with sensory disabilities
  9. 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. 10. Without alternative text, life-saving information in this graphic is not available to visually impaired users. #a11y
  11. 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. 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. 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. 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. 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. 16. Pages should have
 <proper heading structure>
 in order to be readable without a stylesheet for those who do not navigate visually. #a11y
  17. 17. All site functionality
 should be available 
 using the keyboard 
 for persons who do 
 not use a mouse. #a11y
  18. 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. 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. 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. 21. GOOD MARKUP The foundation for good accessibility is #a11y
  22. 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. 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. 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. 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. 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. 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. 28. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/
  29. 29. BROWSER TOOLS#a11y
  30. 30. BROWSER TOOLS#a11y
  31. 31. Take advantage of in-browser testing tools to evaluate WordPress theme demos before you purchase. ACCESSIBILITY PRO TIP: #a11y
  32. 32. TOOLS • Which Tool Is Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools #a11y
  33. 33. • Color Contrast Checker • http://webaim.org/resources/contrastchecker • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria #a11y OTHER RESOURCES
  34. 34. • 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
  35. 35. #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/
  36. 36. 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
  37. 37. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org @wpcampusorg #WPCampus
  38. 38. QUESTIONS? Get involved at https://wa11y.org #A11Y / #wA11Y @bamadesigner https://bamadesigner.com
 https://wa11y.org Rachel Carden Senior Software Engineer, Disney
 Founder, WPCampus
  • brianshim2

    Sep. 22, 2016
  • paulfgomez

    Feb. 21, 2016

When your website is accessible, all users can access your content no matter their abilities. Visually-impaired users can visit your website using a screen reader. Those who can’t use the mouse can navigate your site using a keyboard or other input device. Some accessibility features might also improve your SEO. When your site is inaccessible, research shows you could be excluding up to 20 percent of your users. This talk for all skill levels will review tools and techniques you can use to test and improve your site’s accessibility.

Views

Total views

4,809

On Slideshare

0

From embeds

0

Number of embeds

44

Actions

Downloads

31

Shares

0

Comments

0

Likes

2

×