Rethink Real: Accessible Web Development

A presentation at AuditBoard Internal Event in April 2021 in by Melanie Sumner

Slide 1

Slide 1

Rethink Real: Accessible Web Development

Slide 2

Slide 2

whoami

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

Slide 3

Slide 3

Today's Plan

• The meta of a11y • Personas • Roles and responsibilities

Slide 4

Slide 4

We thought things were simple

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

Slide 5

Slide 5

Mindset Shift

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

Slide 6

Slide 6

“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

Slide 7

Slide 7

“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

Slide 8

Slide 8

“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

Slide 9

Slide 9

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.

Slide 10

Slide 10

By solving for one...

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

Slide 11

Slide 11

When we ignore A11y…

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

Slide 12

Slide 12

We choose change

We can make an active choice to think differently.

Slide 13

Slide 13

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

Slide 14

Slide 14

It’s okay to have expectations

Both of ourselves and of others

Slide 15

Slide 15

Leadership

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

Slide 16

Slide 16

Content Creators

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

Slide 17

Slide 17

UX Designers

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

Slide 18

Slide 18

Visual Designers

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

Slide 19

Slide 19

QA Testers

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

Slide 20

Slide 20

Developers

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

Slide 21

Slide 21

“Wait, what tools?”

Slide 22

Slide 22

Everyone has….

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

Slide 23

Slide 23

Ember gives us…

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

Slide 24

Slide 24

Extras

• A11y Automation Tracker • Ember Component Patterns

Slide 25

Slide 25

Recap

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

Slide 26

Slide 26

You do not require permission to create accessible code.