Bill and Ted's Accessibility Adventure

Accessibility Testing
for Developers

Phone box time machine

Moon

Saturn

Earth

Alistair Shepherd

(he/him)

Head of Development,
Series Eight

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!

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

alistairshepherd.uk

mastodon

@accudio@front-end.social

bluesky

@alistairshepherd.uk

Ask me for Stickers!