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.
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
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
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
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
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