Rethink Real: Accessible Web Development

whoami

• Military Veteran • LinkedIn A11y Eng Team • Ember JS Framework Core Team • WAI ARIA Working Group • The Zen Dev • melanie.codes • @melaniersumner

Today's Plan

• The meta of a11y • Personas • Roles and responsibilities

We thought things were simple

• You had a disability. • You didn’t have a disability. • We were incorrect.

Mindset Shift

• Context dependent • Not a personal health condition • Mismatched interaction

“I can’t see the screen”

• Could be blind • Could be color-blind • Could be near/far sighted • Could be a pirate with one eye patch • Could be outside in the bright sun

“I need captions”

• Maybe the viewer is deaf • Maybe the viewer has an ear infection • Maybe the viewer is in a quiet place and doesn’t have headphones with them • Maybe the viewer is in a noisy place • Maybe the speaker has a heavy accent

“I need keyboard shortcuts”

• Perhaps the user is blind and using a screen reader • Perhaps the user has RSI • Perhaps the user’s mouse batteries died and they don’t have extras • Perhaps the user broke their hand • Perhaps the user is holding a newborn or a pet in one hand • Perhaps the user is an awesome dev power user and can code faster with keyboard shortcuts

When we think this way...

When we start thinking this way, we start to connect the dots Thinking about keyboard shortcuts will naturally get you thinking about touch interactions.

By solving for one...

By solving for one, we solve for many We start thinking beyond stereotypes

When we ignore A11y…

• Unequal distribution of emotional labor • Lose customers • Expensive re-writes • Risk of lawsuits

We choose change

We can make an active choice to think differently.

It might be hard at first

• There’s a lot to learn • Automated tests and linters make it easier in the long run, but not at first • Be willing to be held accountable • Be willing to hold others accountable

It’s okay to have expectations

Both of ourselves and of others

Leadership

• Vocalize A11y as a priority • Budget for it – both time and money. • Create inclusive environments

Content Creators

• Use clear language • Do not permit “dark horse” marketing techniques • Use consistent phrasing • Provide devs with alt text for images

UX Designers

• Logical workflows, please! • Simplify the user experience • Make context and purpose clear

Visual Designers

• Color contrast • Think about zoom • Plan for high-contrast mode • Make sure font sizes and interactive element sizes are large enough

QA Testers

• Think about user personas • Keyboard-only users • Different types of color blindness • Learn about visible focus vs screen-reader focus

Developers

• Be curious • Have the conversation • Be kind • Use the tools you already have!

“Wait, what tools?”

Everyone has….

• Semantic HTML • Browser defaults • A11y browser extensions • A free screen-reader • WAI-ARIA Authoring Guide

Ember gives us…

• Pragmatic Core Values • Strong Defaults • Addons • Community Support

Extras

• A11y Automation Tracker • Ember Component Patterns

Recap

• Meta of a11y • The persona mindset • Roles and responsibilities • The tools we have

You do not require permission to create accessible code.