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