Whimsica11y

Whimsica11y

Whimsic accessibility

1️⃣ Find a cute word to add to a11y, the numeronym for accessibility (because them's a lot of letters).

2️⃣ Because you need a cute name for every project.

3️⃣ “a-eleven-y” = ally. Sorry-not-sorry.

I'm Sara.

I'm both:

an old hand 👌
(I built websites as a teen from 1999)

and a not-so-newbie 🤯
(I switched career from small-company
general engineering into web dev in 2022)

I've been messing around with ideas to help more laypeople^* to build their own simple websites.

Well, laypeople or not – they have other interests.

And that's OK.

(Even if I don't get it.)

I miss the old web.   Don't you?

Did you have a homepage between 1995 and 2005?

Actually, LOTS of people are building their own sites!

Us devs and nerds have our own little website circles.

Some are sleek and professional,

Some are playful and joyous,

Some make our jaws drop.

This isn't nearly all of them. Not only devs build!

Take, for example,

those in MelonLand Surf Club

and on Neocities.

See also the The MelonLand Project

These people are diverse, and inclusive.

Many are themselves neuro-divergent and/or disabled.

They want their websites to be accessible, if possible.

But they may also have limited spoons^*. 🥄🥄🥄

The last place I want to send them is to the WCAG!

These sites are:

Do they have to be accessible?

These are people's homes and pet projects on the web.

Most of our own homes don't have stair-lifts, ramps, adapted bathrooms, or labels in Braille. . . Yet!

Should all types of art be accessible to everyone?

Maybe not? But that doesn't mean we can't try.

2.5 years ago right here, Sophie Koonin taught us how to make the whimsy of 90/00s websites accessible.

It definitely can be done!

Even stuff like embedded audio and cursor trails!

This of course makes the content more accessible.

Does it also bring the fun vibes through?

"Vibes" - we get a visual measure of a website on load.

Maybe it's dark and brooding 🌚, or light and airy 🌤️

Maybe it's full of kawaii bubblegum anime imagery but the content is much darker, or vice versa - wholesome gothic?

Those are the most fun!

But how to transmit these vibes beyond the visual layer?

What makes a personal or art project unique?

Does this square with the standards based a11y advice?

Is a11y advice geared to public services & ecommerce?

There may be truth in guidelines making websites dull.

But I *want* my banking and government sites to be dull.
Safe, predictable, and boring - please!

I started whimsica11y.net to bridge the ✨vibes✨ gap.

But, I found myself repeating existing advice.

I started worrying about being *wrong* . . .

What if I accidentally excluded yet more people with my well-meaning but misguided advice?

The project has stalled. For now.

I want to tell people to go big on alt text, when a picture means a lot to them.   Tell us how it makes you feel! 🥲

I really enjoy the rabbit-warren-like site structures.

If the website is strange and full of twists and turns,
a disabled person should get to enjoy that journey too.

This advice doesn't really play well with WCAG.

I asked people on Mastodon who used assistive technologies, what has delighted them online?

I wanted some concrete examples to inform my advice.

I got answers almost exclusively about functionality!
Delighted when things just worked! The bar is SO LOW!

A11y is absolutely not only about those who are blind,
but the web is sort of dull right now, when you can't see it.

Pirate Ship amused at least one user of assistive tech 🎉

We hired Florian Beijers (a blind developer, streamer, accessibility advocate and consultant) to do an audit.

He came across this soundboard built in our app:

The rest of our app does have some accessibility issues, I'm so pleased to say they are actively being worked on.

Florian has been blind since birth. He learned Braille.

A majority of people who have visual impairments do not.
These people are likely to have lost their sight later in life.

. . . We might well lose our sight later in our own lives.

I remind myself not to other groups I may yet join.

I fall into this othering too often for my own comfort.

Unless blind or severely visually impaired people can use Braille displays, all text online has a screen reader's voice.

As the web is full of text, people want to get through it fast.

Screen reader users pick voices with specific properties.

The flatness allows for cranking it up to stupid rapid speeds, which gets harder when there's more variance in the signal. ~ Florian Beijers

Many of us read books and articles in an imagined voice, that we think fits the author or a story's character.

Imagine not having that flexibility. It's all Microsoft George.
(other voices are available)

There's good reason why Léonie Watson (a.k.a. Tink) has long been advocating for CSS Speech!

She lost her sight as an adult.

Of course, CSS Speech would have to be opt-in.

SOMEone would clearly enJoY MaKING their ^fantastic prose a little too emphatic and ^dyna_mic jUSttt because they CAN.

Yes, that hurt me to read. Fun to write, though 😈

What has happened to our multi-media web?
Why is there so little audio and video outside of YouTube?

If we see sound on the web now it's ads or other autoplaying videos. Truly a loss. ~ Florian

I agree that beyond "it just works", there is little to delight screen reader users about the web these days - and "it just works" being a cause for delight is a sad indictment of the state of accessibility in general. ~ Léonie

Why? I enjoy a bit of speculation.

So much browsing happens on mobiles in public spaces.

Often in silence. On the bus or train.
Or conversely, in much louder surroundings.

Maybe that's why captions are everywhere now?

I'm a classic elder Millennial, I love captions!

Why else?

CSS is very visual in nature. We bend HTML to our whims.

Sometimes we confuse the structure so much that the web pages turn into entirely different documents.
(i.e. ToCs under contents, shown visually on the right side)

So we end up with a disconnect between visual order and DOM order (also keyboard navigation order) of elements.

I absolutely love playing with CSS.

I bet lots of you do, too!

The whimsy is so visual.

How can we change that?

Some ideas, and examples!
Audio related:

Keenan's very good blog with audio counterparts

The Pirate Ship sounds (go sign up to play with those!)

Chris Ferdinandi's Drum Machine (site footer easter egg)

Learn about and contribute to CSS Speech

Other vibe transmission methods:

Alt text as part of the art, as poetry even!

Alt text selfies to complement profile pictures

Creating atmosphere or adding fun in visually hidden text^*

Allow more of your personality into your writing.
No Grammarly - your dialect, your idioms, your humour, your self!

These are only a few ideas, I'm sure you'll have more.

The web is for everyone.

The joy, the whimsy, the vibes too —

...for everyone!