A presentation at An Event Apart: Front-End Focus by Dave Rupert
Dave Rupert • @davatron5000
One day hundreds of JIRA tickets showed up in my inbox…
This triggered my fight or flight response.
Some simple math told me…
We had created a log jam.
The Theory of Constraints Inventory Operational Expense Throughput
The Theory of Constraints
The Theory of Constraints
The Theory of Constraints Inventory Operational Expense Throughput
A Bug’s Life Bug exists Bug discovered Backlog triage Work performed Bug fixed
We needed to undo our backlog jam.
How do you eat the proverbial elephant?
Conventional wisdom: One bite at a time.
My perspective: Find the most delicious and easiest to eat parts first.
Understanding how accessibility audits are performed
Often done screen by screen, button by button, requirement by requirement, browser by browser, platform by platform
Often focused on the output and ignorant of the input input output
Often focused on the output and ignorant of the input input output
Often very repetitive due to how we reuse our code
Often ignorant of “easy” vs “hard” in the underlying systems production database high effort static site low effort
Often ignorant of metrics and relative importance of the page 1,000,000 views high impact 5,000 views low impact
e.g. alt text is missing production database 1,000,000 views weeks to fix static site 5,000 views minutes to fix
How do you eat the proverbial elephant?
We were struggling with digestive issues.
Hitting the limitations of JIRA
It was easier to triage in Excel ID Summary Priority PROJ-123 Missing alt attribute on page HIGH PROJ-124 Focus not visible on hamburger menu HIGH PROJ-125 Page is missing alt attribute MED PROJ-126 Missing 3:1 contrast on search LOW PROJ-127 Focus not visible on checkout MED
Which page is effected? ID Summary Page Priority PROJ-123 Missing alt attribute on page /about HIGH PROJ-124 Focus not visible on hamburger menu All HIGH PROJ-125 Page is missing alt attribute /features MED PROJ-126 Missing 3:1 contrast on search All LOW PROJ-127 Focus not visible on checkout /checkout MED
Which component is effected? ID Summary Page Component Priority PROJ-123 Missing alt attribute on page /about Image HIGH PROJ-124 Focus not visible on hamburger menu All Header HIGH PROJ-125 Page is missing alt attribute /features Image MED PROJ-126 Missing 3:1 contrast on search All Header, Forms LOW PROJ-127 Focus not visible on checkout /checkout Forms MED
Which WCAG violation? ID Summary Page Component WCAG Violation Priority PROJ-123 Missing alt attribute on page /about Image Non-text content HIGH PROJ-124 Focus not visible on hamburger menu All Header Focus visible HIGH PROJ-125 Page is missing alt attribute /features Image Non-text content MED PROJ-126 Missing 3:1 contrast on search All Header, Forms Non-text contrast LOW PROJ-127 Focus not visible on checkout /checkout forms Focus visible MED
New dimensions appear! ID Summary Page Component WCAG Violation Priority PROJ-123 Missing alt attribute on page /about Image Non-text content HIGH PROJ-124 Focus not visible on hamburger menu All Header Focus visible HIGH PROJ-125 Page is missing alt attribute /features Image Non-text content MED PROJ-126 Missing 3:1 contrast on search All Header, Forms Non-text contrast LOW PROJ-127 Focus not visible on checkout /checkout Forms Focus visible MED 5 4 3 3 …But we can only really visualize one dimension at a time.
Can we leverage modern spreadsheeting applications? notion.so airtable.com
Maybe we could experience multiple dimensions at once
How-to create a multi-dimensional accessibility audit.
The WP Campus Gutenberg Audit
Step 1. Import data
Step 2. Hide columns
Step 3. Convert columns to selects and multi-selects
Step 4. Color code
Step 5. Add Counts
Step 6. Add dimensions
Wrapping up our multi-dimensional accessibility audit
38cols → 10cols Before After
How’d it work out for us? No repro 50 Contrast Promo code form 19 15 Remove icon Fix accordion Design system reconciliation 171 15 9 5 Fix duplicate ID alt attributes 5 12 12 142 of 313 issues closed (46%) in ~2.5 months with part-time capacity Other TODO
Some thoughts on improving workplace satisfaction via the backlog process
“Individuals and interactions over process and tools” — The Agile Manifesto
Tip #1: Avoid extensive audits, start with a few core templates first.
Tip #2: Deliver issues in small packs of related issues.
Modals Header Fix contrast (static site) Fix contrast (production database) Fix alt attributes Fix focus states Resize Text
Tip #3: Gamify the experience, progressively increase the difficulty
WORLD 1-1 Fix alt attributes WORLD 2-3 WORLD 4-1 Fix contrast Fix focus states
Tip #4: Give a s#!% about accessibility before legal shows up.
A quick thanks to… Danh Hoang @danhhoang Christopher Schmitt @teleject
Dave Rupert @davatron5000
As designers, developers, and managers a lot of our lives are spent beholden to the product backlog by creating, assigning, or fixing issues. But accessibility audits don’t have to be bad news! In this talk, I share some strategies for eating the proverbial elephant by using modern spreadsheet applications to breakdown and visualize accessibility problems from a variety of different angles. Through that we can improve the accessibility audit hand-off process, the development process, and the entire concept of backlogs, all while preserving a sense of autonomy for everyone involved. Achieve the ultimate goal of creating more usable and accessible products.
Here’s what was said about this presentation on social media.
for free. You
can too.