Rethink Real: Accessible Web Development
A presentation at AuditBoard Internal Event in April 2021 in by Melanie Sumner
Rethink Real: Accessible Web Development
• Military Veteran • LinkedIn A11y Eng Team • Ember JS Framework Core Team • WAI ARIA Working Group • The Zen Dev • melanie.codes • @melaniersumner
• The meta of a11y • Personas • Roles and responsibilities
• You had a disability. • You didn’t have a disability. • We were incorrect.
• Context dependent • Not a personal health condition • Mismatched interaction
• 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
• 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
• 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 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, we solve for many We start thinking beyond stereotypes
• Unequal distribution of emotional labor • Lose customers • Expensive re-writes • Risk of lawsuits
We can make an active choice to think differently.
• 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
Both of ourselves and of others
• Vocalize A11y as a priority • Budget for it – both time and money. • Create inclusive environments
• Use clear language • Do not permit “dark horse” marketing techniques • Use consistent phrasing • Provide devs with alt text for images
• Logical workflows, please! • Simplify the user experience • Make context and purpose clear
• Color contrast • Think about zoom • Plan for high-contrast mode • Make sure font sizes and interactive element sizes are large enough
• Think about user personas • Keyboard-only users • Different types of color blindness • Learn about visible focus vs screen-reader focus
• Be curious • Have the conversation • Be kind • Use the tools you already have!
• Semantic HTML • Browser defaults • A11y browser extensions • A free screen-reader • WAI-ARIA Authoring Guide
• Pragmatic Core Values • Strong Defaults • Addons • Community Support
• A11y Automation Tracker • Ember Component Patterns
• Meta of a11y • The persona mindset • Roles and responsibilities • The tools we have
You do not require permission to create accessible code.
