'Batteries Included' Accessibility:
A Pragmatic Guide to
getting started today
Brett Haymaker, UI Engineer, Consultant & Instructor
Accessibility is a massive topic
🐇🕳️
"Don't make me think about it"
The temptation to "automate away" all the accessibility things
AI will catch and fix accessibility things for me.
Maybe. Maybe not.
aria-overload='true'
"No ARIA is better than bad ARIA."
What does it mean for a product to be
"Batteries Included"?
A:
Everything I need to fully use the product is included. No additional purchases or products are required.
B:
"Ready to be used straight out of the box"
Consumer-centric
Consumer POV
Why is this type of "batteries included" so tempting?
Why is this type of "batteries included" dangerous?
The point:
Inputs & Outputs
TDD
Test Driven Development
A button exists.
<button />
TEST
CODE
has innerText of "Click me"
<button>
Click me </button>
button is blue
<button style={
background-color:
blue;}>Click me</button>
button text and background color contrast
ratio. How to test?
How to implement? Go out and learn how.
TDD is a Design Methodology for Software Architecture
TDD is so effective because of its tight feedback loops that are co-located in the same work space.
"Batteries Included" Accessibility is a Design Methodology
"Batteries Included" Accessibility is a Design Methodology
This is an invitation to consider Accessibility topics, concerns and insights as INPUTS that steer DESIGN DECISIONS that result in tangible product outcomes
A11y tools become sources of insight: inputs that direct your outputs.
So where do I start today?
Step 1.
Ground your craft with foundational understanding of the full-spectrum of disability
Familiarize yourself with the various Models of Disability
Medical vs. interface vs charity
Step 2.
Semantic HTML
Step 3.
Tab-index; keyboard discoverability; CSS pseudo states (hover, focus, etc); visual feedback.
Step 4.
Audit with Lighthouse + Axe devtools.
Step 5.
Enable and explore the Accessibility Tree in Chrome Developer tools; evaluate potential screen reader output.
Step 6.
Audit your web site or app while using a screen reader such as VoiceOver (mac) or NVDA (open-source screen reader)
Links
Thank you!
Batteries Included Accessibility
By Brett Haymaker
