Integrating Accessibility (a11y) into the project process can be downright scary. In this session, I’ll cover basic web accessibility principles for web designers, developers, and site owners, then show how to turn seemingly daunting and confusing accessibility requirements into understandable, actionable tasks and techniques. The talk will cover some of the accessibility-specific WordPress plugins and themes available, as well as some quick, easy tests to integrate into design and development workflows.

1. Accessibility
Proven, easy integration into design and
development workflows
@iamjolly

2. What is accessibility?
Accessibility (a11y), simply put, means that we’re
making our sites work well for everyone.

3. 1,000,000,000
people with disabilities
on our planet today
Source: WHO/World Bank World Report on Disability, 2011
There are more than

4. people in the United States have a disability
1 in 5
Source: United States Census Bureau

5. $175 billion
annually in the United States.
People with disabilities spend
Source: U.S. Departments of Justice and Labor

6. MARKETERS BE LIKE

7. The disability community is
the only group that anyone
can join at any time.

10. Where to start?

11. HINT: NOT AT THE END
OF THE PROJECT!

12. Everyone on the project
has a role in making a
website accessible.

13. Accessibility in planning

14. Planning and project admin
Procurement/contracting (client teams):
● Require a11y with current guidelines (WCAG 2.0)
● Consider usability testing with people with disabilities
Project management (implementation team):
● Map a11y guidelines to roles/tasks
● Communicate requirements & expectations
● Establish test plan for a11y
● A11y represented at every stand-up

15. “
When the requirements state...
Site must be built in accordance
with the W3C’s Web Content
Accessibility Guidelines 2.0

17. OMG, it’s 34 pages long!

18. WCAG is more than just a single line item!
The Web Content Accessibility Guidelines (WCAG) 2.0 are:
● 4 Principles, consisting of:
● 12 guidelines, and
● 61 success criteria aligned with Levels A, AA, and AAA
★ Level A: 25
★ Level AA: 13
★ Level AAA: 23
Go ahead, take a look: W3C Web Content Accessibility Guidelines

19. Quick tips for project managers
● Don’t memorize WCAG—it’s imperfect, at best.
● Do understand a11y project duties
● Do communicate frequently
● Add a11y to all project phases
● Incorporate testing with each sprint/iteration
● Be an advocate for end users/a11y
Hungry for more? W3C Accessibility Responsibility Breakdown

20. Accessibility in content

21. Accessibility for content
● Images need appropriate alternate text (alt text)
● Caption your videos
● Provide transcripts for audio (and video)
● Be careful about reading level
● Avoid rapid flashing (no more than 3x per second)

22. Alt text for images - some guidelines
● Every image needs an alt attribute!
● Decorative images have an empty alt: alt=“”
● Keep alt text descriptive, but brief
● Ensure functional images have appropriate alt
text, for example:
alt=“Waffle House home”

23. Check your content’s reading level
● Text for general audiences: aim for
a grade level of around 8.
Online Tool: Readability-Score.com

24. Accessibility in design

25. Accessibility for designers (UX and UI)
● Design consistent interfaces
● Check color contrast
● Beware of line length issues
● Keep related items close (proximity)
● Design focus states for links, buttons, etc.
● Design for error states

26. Starting design with an accessible color palette
Online tool: ColorSafe.co

27. Checking for color contrast during design
Web Utility: Lea Verou’s Contrast Ratio

28. Checking for color contrast during design
Application: Colour Contrast Analyser

29. Design in browser? We got that!
Tool: Chrome Accessibility Developer Tools
What’s the contrast ratio
for “Webcam” in light blue?

30. The Pinhole/Squint Test
Virgin America - Where We Fly

31. Accessibility in development

32. Accessibility for developers
● Develop with web standards in mind
★ Set page language
★ Use semantics (headings, buttons, labels)
★ Foreground images, please (with alt text)
★ Hide informative text for screen readers with a
CSS class like:
.screen-reader-text
● Mobile-first, responsive design is your friend

33. Accessibility for developers
● Use your keyboard for quick tests - regularly!

34. Accessibility for developers
● Help users with great form error handling
Forms Example: Simply Accessible

35. Accessibility for developers
● Unit test all the things
Test Suite: QuailJS

36. Accessibility for developers
● Unit test all the things
Test Suite: QuailJSA11y testing plugin: Access Monitor

37. Keyboard, keyboard,
KEYBOARD!
After that, screen readers.

38. A11y plugins and themes

39. Accessibility Ready Themes: WordPress.org

40. Plugin: WP Accessibility

41. Plugin: Genesis Accessible

42. Plugin: WCAG 2.0 form fields for Gravity Forms

43. Plugin: Contact Form 7: Accessible Defaults

44. But… we really should
NOT fix themes and
plugins this way!

45. Questions? Thank you!
Please reach out via Twitter or JollyPM.com
@iamjolly