accessibility: proven, easy integration into design and development workflows
TRANSCRIPT
Accessibility
Proven, easy integration into design and development workflows
@iamjolly
What is accessibility?
Accessibility (a11y), simply put, means that we’re making our sites work well for everyone.
1,000,000,000people with disabilities
on our planet today
Source: WHO/World Bank World Report on Disability, 2011
There are more than
people in the United States have a disability
1 in 5
Source: United States Census Bureau
$175 billionannually in the United States.
People with disabilities spend
Source: U.S. Departments of Justice and Labor
MARKETERS BE LIKE
The disability community is the only group that anyone can join at any time.
Where to start?
HINT: NOT AT THE END
OF THE PROJECT!
Everyone on the project has a role in making a website accessible.
Accessibility in planning
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
““When the requirements state...
Site must be built in accordance with the W3C’s Web Content Accessibility Guidelines 2.0
OMG, it’s 34 pages long!
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
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
Accessibility in content
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)
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”
Check your content’s reading level
● Text for general audiences: aim fora grade level of around 8.
Online Tool: Readability-Score.com
Accessibility in design
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
Starting design with an accessible color palette
Online tool: ColorSafe.co
Checking for color contrast during design
Web Utility: Lea Verou’s Contrast Ratio
Checking for color contrast during design
Application: Colour Contrast Analyser
Design in browser? We got that!
Tool: Chrome Accessibility Developer Tools
What’s the contrast ratio for “Webcam” in light blue?
The Pinhole/Squint Test
Virgin America - Where We Fly
Accessibility in development
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
Accessibility for developers
● Use your keyboard for quick tests - regularly!
Accessibility for developers
● Help users with great form error handling
Forms Example: Simply Accessible
Accessibility for developers
● Unit test all the things
Test Suite: QuailJS
Accessibility for developers
● Unit test all the things
Test Suite: QuailJS A11y testing plugin: Access Monitor
Keyboard, keyboard,
KEYBOARD!After that, screen readers.
A11y plugins and themes
Accessibility Ready Themes: WordPress.org
Plugin: WP Accessibility
Plugin: Genesis Accessible
Plugin: WCAG 2.0 form fields for Gravity Forms
Plugin: Contact Form 7: Accessible Defaults
But… we really should NOT fix themes and plugins this way!
Questions? Thank you!
Please reach out via Twitter or JollyPM.com
@iamjolly