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

36.
WORDPRESS PLUGINS

37.
BROWSER TOOLS

38.
BROWSER TOOLS

39.
BROWSER TOOLS

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

46.
#1:
Learn accessibility
deeply
#a11y

47.
#2:
Implement testing
tools into your
workflow
#a11y

48.
#3:
User testing is
the best testing
#a11y

49.
#4:
Tell your friends
#a11y

50.
#5:
Repeat
#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!

54.
QUESTIONS? #a11y
@bamadesigner
https://bamadesigner.com
https://wpcampus.org
Rachel Cherry
Senior Software Engineer, Disney
Director, WPCampus