Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is accessible, all users can access your content and functionality no matter their abilities. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Most accessibility features will also improve your SEO.
When your site is inaccessible, research shows you could be excluding up to 20 percent of your users.
This talk will cover the basics of accessibility, why it’s important, and how you can support accessibility in your projects.
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
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.
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.
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.
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.
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
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!