accessibility: proven, easy integration into design and development workflows

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