Let’s Be Real A practical, developer guide to common accessibility challenges

About Me

Melanie Sumner • • • • • LinkedIn Ember Chicago Meetup EmberJS Core Team ember-a11y US Navy Veteran @melaniersumner

Reality Check

Developer Concerns

• Package management • Code environment • Workspaces • Performance • Optimizations • Asset loading • Server-side rendering • CDN optimizations • Collaboration tools • Review tools • Linting • Formatting • Coverage reports • Lighthouse scores • Examples • Documentation • Changelogs • Version control • Package publishing • Deployments • Unit tests • Integration tests • Visual regression tests • API integration tests • Continuous deployment • Accessibility

Who We’re (probably) Working With

• Project Manager • Content Manager • BA • Designer • Developer • QA

You're Not Alone

You have a team. You are not alone. P.S. if you don’t have a team and you are alone, you especially have no excuse…

You are not alone, but….

• Accessibility is not only your responsibility but developers need to be realistic about this. • You’re the technical expert. You’re probably the one who makes accessible code a reality.

You do not require permission to create accessible code. -Melanie Sumner

What do you do…

•If your hard drive failed? •If your monitor wouldn’t turn on? •If GitHub went down? •If you didn’t have the basics you needed to complete your work?

Alt text: a cat with a look of panic on its face

Alt text: a baby with a scrunched up crying face

What do you do…

•When there is no keyboard navigation pattern in the spec? •When you’re reviewing code that works but isn’t using semantic HTML? •When you can tell the designs don’t have enough contrast?

Alt text: a cartoon dog sitting on a chair and smiling, while the room around him is on fire.

Stop just accepting it. You’re being set up for failure. You deserve better.

Speak Up

•Gracefully educate your colleagues • “I noticed the keyboard specs were missingwould you like me to add them?” •Set them up for success, too! • “Here’s where I get the common keyboard navigation patterns. They’re super useful!”

Be Persistent

https://www.youtube.com/watch?v=KxGRhd_iWuE

Focus, please!

Focus vs. Selection

•Focus • Focus is a pointer (think, mouse cursor) • There is only ONE point of focus at any time • Interactions happen at the point of focus

Focus vs. Selection (con’t)

•Selection • Selection can be performed on specific elements • You could have a multi-select • When focus leaves, the selection persists

Simple Developer Rule

• document.activeElement must always have a value • The value can’t be null • The value can’t be the body element •Maybe you can test for this somehow…

Overlays

• It might look like an overlay. • It might act like an overlay. • If I can use my keyboard to navigate to the options behind the overlay, guess what? • It’s not an overlay.

Keyboard Navigation

N.I.H. is real

Photo of a giant wheel by Kosta Bratsos on Unsplash

Know what already exists

• Operating systems • Assistive technology • Browsers • Common conventions

http://w3c.github.io/aria-practices/#keyboard

A11ynomicon #noBlackMagic

Presentation Role

• WAI-ARIA requires browsers to automatically apply role=“presentation” to some types of UI components. • Role-based, not element based. • Even if you ‘div’, this is a gotcha!

Drumroll, please…

• button • checkbox • img • math • menuitemcheckbox • menuitemradio • option • progressbar • radio • scrollbar • separator • slider • switch • tab

Wait, what?

Insert Incantation Here

Alt: blob character saying "oh no"

How to succeed

Mel’s list for developer success

#10

Accept that “Not Invented Here” syndrome is real

#9

Use a checklist.

#8

Be part of the conversation. Silence is not golden.

#7

Get to know the techniques…and the failures. https://www.w3.org/TR/WCAG20-TECHS/

#6

Keyboard navigation must exist!

#5

Sometimes the answer isn’t more code, it’s a simpler UX.

#4

There might be several ways to do a thing. Keep an open mind.

#3

There is no substitute for knowing how assistive technology works.

#2

Use semantic HTML.

#1

Be Magnanimous.

Thank You!

I believe in you. You got this. Persistence, patience and passion will win. I’m proud of you. I want to tell you that incase no one else ever has. Don’t beat yourself up. You are a work in progress which means you’ll get there a little at a time, not all at once. Everything will be okay in the end. If it’s not okay, it’s not the end. You are much stronger than you think. A little progress each day adds up to big results. You are amazing. You are good enough. You are worth it. @melaniersumner