Bill & Ted's Accessibility adventure — retro logo

Accessibility Testing
for Developers

Phone box time machine
Moon
Saturn
Earth

Alistair Shepherd

(he/him)

S8

Head of Development,
Series Eight

website logo

alistairshepherd.uk

mastodon

@accudio@front-end.social

bluesky

@alistairshepherd.uk

Phone box time machine
Cover art of Bill & Ted's Excellent Adventure. Two 80s teens are sitting on top of a time travelling phone box flying through space. The phone box is filled with historical figures.
Animated loop of Bill & Ted playing air guitar with the caption "Excellent!"
Bill and Ted look astonished and alarmed
But Alistair, I've seen five Bill & Ted themed accessibility talks just this week!

The perfect combination?

Bill & Ted 🤝 Accessibility

Historical figures standing at the front of a classroom looking at the class. Includes Beethoven, Abraham Lincoln, Socrates, Sigmund Freud, Joan of Arc and Genghis Khan

Socrates

Bill and Ted philosophise wiht Socrates in front of ancient greek columns. They look amused, Socrates serious
A <div> is not a button!

Joan of Arc

Body text needs a 4.5:1
colour contrast ratio
Joan of Arc is kneeling, looking at the viewer surprised. She's wearing armour and holding a sword

Napoleon

Provide good descriptive
alternative text for images
Napoleon at a buffet having just eaten a big bowl of ice cream. He's still got ice cream on his chin and has eyes wide in a weird expression. He's wearing typical Napoleon fare

Genghis Khan

Conquer Accessibility directly —
don't use an accessibility overlay
Genghis Khan looks at a baseball bat in a sport shop. He's wearing lots of furs and is looking at the bat with great interest
Bruce Lawson's face

Accessibility at
Series Eight

The Test:
WCAG 2.2 AA

Screenshot of a Slack message. Alistair says "Hey @devs, we're making all of our websites 100% perfectly accessible now! Please start doing that immediately and have them on my desk Monday!". People have reacted with "!?", thinking face and shocked face. Ben responds with "wtf dude"
Screenshot of the Web Content Accessibility Guidelines, illustrating its length and size
A set of old looking encyclopedias except the text on the spines hav been replaced by "role=region", "role=tablist", "role=button" and "role=alert"

None of it worked

That's what happened for Bill & Ted!

Bill and Ted speak to their teacher in the classroom. Bill is holding books, both don't look very pleased whilst the teacher talks. In the background on the blackboard is a list of historical figures
Bill and Ted walk towards a convertible car with Bill's stepmom in the drivers seat. Ted is holding an enormous stack of books
Mr Ryan the teacher stands at the front of the classroom looking towards his class. They look like standard US 80s stereotypes with our heroes Bill & Ted in the centre

None of it worked

Bill and Ted look look serious, standing outside their school. Ted has a huge stack of history books in his arms
Bill and Ted look triumphant, fist raised in the air with spotlights from above. Most triumphant! Bill is wearing a crop top exposing some belly, and Ted is in his standard waistcoat

🏰

Bill and Ted went out and experienced history
first-hand

🔍

We could experience the accessibility of our sites first-hand

📜

They used and relied on the expertise of the historical figures

🛠️

We could use the expertise and tools of accessibility experts

🤔

They learned from their experience to know more about history

🧠

We can learn from our experience to know more about accessibility

Experience accessibility first hand

Use experience and tools from others

Learn from our mistakes

Phone box time machine

Use experience and tools from others

Learn from our mistakes

Phone box time machine

Learn from our mistakes

Phone box time machine
Phone box time machine

Learn Accessibility Testing!

Learn Accessibility Testing!

Accessibility Testing?

Accessibility Testing?

Google Lighthouse

Google Lighthouse

Manual — keyboard

Manual — keyboard

Accessibility Insights

Accessibility Insights

</demo>

How does it help?

👷

Allows for practical learning

😌

Less intimidating and more accessible

⏳

Work can be progressive over time

📝

Gives you a great method of benchmarking yourself

With this we passed!

  • Like Bill & Ted, we passed!

  • Conforming with WCAG 2.2 AA and much more accessible

  • Worked for our team, and for this guy!

  • Our clients and sales team love it

Learn accessibility testing

Improve your websites and ability

Benchmark yourself using testing

Watch Bill & Ted

Build most accessible websites dudes!

Phone box time machine
Moon
Earth
website logo

alistairshepherd.uk

mastodon

@accudio@front-end.social

bluesky

@alistairshepherd.uk

Ask me for Stickers!

Bill and Ted's Accessibility Adventure

By Alistair Shepherd

Bill and Ted's Accessibility Adventure

As Bill and Ted discovered in their excellent adventure, it can be easier to learn through hijinks, trials and practice than through reading. How can we learn from their experience to get better at web accessibility? Accessibility is essential to build into our work, but it has a high barrier to entry and is notoriously difficult to learn. Reading guides and specifications can only get you so far. Through my experience training my team in accessibility, I've discovered that learning accessibility testing is the easiest and most effective way of mastering accessibility. In this talk — and with the guidance of Bill and Ted — we'll explore the different ways of learning accessibility, and why focusing on accessibility testing works so well. You'll gain a method of benchmarking your work and progress, and find yourself building up accessibility experience that will last your career.

  • 61

More from Alistair Shepherd