Let’s Be Real A practical, developer guide to common accessibility challenges
A presentation at Accessibility Camp Chicago in September 2018 in Chicago, IL, USA by Melanie Sumner
Let’s Be Real A practical, developer guide to common accessibility challenges
Melanie Sumner • • • • • LinkedIn Ember Chicago Meetup EmberJS Core Team ember-a11y US Navy Veteran @melaniersumner
Reality Check
• 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
• Project Manager • Content Manager • BA • Designer • Developer • QA
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…
• 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
•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
•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.
•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!”
https://www.youtube.com/watch?v=KxGRhd_iWuE
Focus, please!
•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
•Selection • Selection can be performed on specific elements • You could have a multi-select • When focus leaves, the selection persists
• 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…
• 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
Photo of a giant wheel by Kosta Bratsos on Unsplash
• Operating systems • Assistive technology • Browsers • Common conventions
http://w3c.github.io/aria-practices/#keyboard
A11ynomicon #noBlackMagic
• 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!
• 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"
Mel’s list for developer success
Accept that “Not Invented Here” syndrome is real
Use a checklist.
Be part of the conversation. Silence is not golden.
Get to know the techniques…and the failures. https://www.w3.org/TR/WCAG20-TECHS/
Keyboard navigation must exist!
Sometimes the answer isn’t more code, it’s a simpler UX.
There might be several ways to do a thing. Keep an open mind.
There is no substitute for knowing how assistive technology works.
Use semantic HTML.
Be Magnanimous.
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
