Whimsica11y:
bringing the joy and whimsy to *everyone*

• Whimsica11y SotB2025 Slides
• My Website Title
• Website Boilerplate - CodePen
• Webrings
• Robb Knight Blog Roll
• Manu Guestbook
• Daniel Schulz
• Localghost.dev
• Henry.codes
• Autistic As Fxxk
• Sites on Neocities
• Melonland
• Spoon theory - Wikipedia
• Web Content Accessibility Guidelines (WCAG) 2.2
• Agitprop
• Sophie Koonin SotB2022 talk - Building websites like it’s 1999… in 2022
• Gov.uk
• Whimsica11y.net
• What, if any, personal websites and homepages have you really enjoyed? (Mastodon)
• Pirate Ship
• Florian Beijers
• CSS Speech Module Level 1
• Losing sight - Léonie Watson
• Regaining sight? - Léonie Watson
• Flexbox & the keyboard navigation disconnect - Léonie Watson
• RSS readers make me want to jump into a vat of acid!
• Pirate Ship signup
• Go make things - Drum Machine
• Why we need CSS Speech - Léonie Watson
• CSS Speech - csswg-drafts
• Alt Text as Poetry
• Alt Text Selfies
• Sara's personal site
• London 2012, Opening Ceremony - This is for everyone

Oh, microphone sounds weird. At lunch, I had this conversation with somebody, I remembered a random call and response, and I kind of would like to do it. I don't know if it was Tim Vine or Alex Horne or someone, but the call is, "what's been killed?" And the response is, "the atmosphere!" And it might be good half way through if I get stuck somewhere. So, "what's been killed?" [crowd: "The atmosphere!"] And the good thing is, you instantly have atmosphere at that point.

OK. So whimsica11y or whimsic accessibility. So number one, find a cute word to add to a11y, the numeronym for accessibility, because them's a lot of letters. Because you need a cute name for every project (and a domain name). And a11y, I say ally and I can't help it, I'm not sorry.

My name is Sara, also known as Sara Joy, I'm both an old hand, I was making my little websites for myself as a teenager in 1999. And also, a not so newbie, because 3 years ago, I moved into web development from kind of just doing electronics, and a little bit of hardware and a little bit of code sort of. I work for a company called Pirate Ship that no one's heard of unless you're American. We help people send packages. You can ask me later. It's fine.

So I've been messing around with ideas to help more laypeople build simple websites, and by laypeople, I mean non-devs. Just because I thought people might want to build their own simple websites. So this is one, it's based on James Hoffman's landing place, the landing page, he's the coffee guy. And the idea was like, well, maybe if the actual code taught them what to do, maybe it would be easier just to -- take the code, be told what goes where inside it, and then, be exposed to it instead of doing a WYSIWYG sort of thing and never seeing it.

So that was just an idea, and there's another one which is a bit more bloggy and possibly somewhere in that code, I've said you can repeat from here to here. I just thought, well, maybe people would quite like to play with the code. I don't know.

I tried to ask a couple of my friends who would be maybe interested in that sort of thing. But laypeople or not, they have other interests. They're busy and they've got kids and there's other stuff to do. And they might just not be interested in code, and I guess that's OK. Even if I don't get it.

Anyway, it's probably because I miss the old web. The old web. Like, maybe you do, too. Maybe some of you had a home page between about 1995 and 2005, probably still do. But there was something about that decade, right?

There were web rings and later came blog rolls and guestbooks, which were my favorite. I tried so many different guestbooks and my friends would always try to break it by putting random HTML and JavaScript in there. And so, no, more web rings left. They're all gone, none at all apart from the ones signed up to by brisray.com, he's now somewhere in America, I forget.

And he's also been like logging all of the web rings he can find, 337 for a total of 12,717 websites. There's quite a few of them around, still.

And blog rolls. Passé, but not, actually, he's redesigned this website since I put this up. But blog rolls have suddenly come back in. I have one, well, I did, and then, I have felt really slightly anxious about which friends should go into it and which shouldn't. Because I didn't want to insult anyone, I made it really small.

And guest books, how embarrassing, but they're not really. So I was lucky enough to be interviewed by Manu Moreale, he has a really nice, very gentle web page. And at some point he mailed back saying, saying you've got a guest book, why have you got a guest book? I said, I don't know, it's fun?

It's this kind of drive by way. He was always very keen on emails and people emailing him. And it's like, sometimes, people want to leave a drive by comment and don't want to email. Yeah, so mine was there, as well, he's got a blog roll of guest books.

So, actually, lots of people are building their own sites. So we do have us devs and nerds have our own little website circles. Some are sleek and professional. So this is Daniel Schultz. I mean, it's also kind of fun as well as professional.

I just like that it's punchy and simple and it's got this lovely little contrast, the color slider at the bottom, and I was like, ooh, and then I went, ooh, what happens when you get to the middle? Something very clever there. What's nice about that, is actually, if you get migraines, low contrast is better. So great.

Some are playful and joyous, and this is a call back to our own Sophie Koonin who's up here somewhere, and if you haven't seen her website, go and play with it. Because there's so many linked style sheets and they're all just gloriously different. I think my favorite one might be the vaporware one. But they're all so good. But I don't know if you added a new one, but every time I go, I feel like there's new buttons and I love it. There's my favorite.

And, some make our jaws drop. So this is Henry, Henry from the web. Henry.codes, Henry Desroches I think his name is, and it's just extremely buttery. And it doesn't have all of the colors, but it's lovely. And if it jerks a bit, that was my computer struggling at the time. But just, oh, just -- really lovely scroll-based animations.

Yeah. So, this isn't nearly all of the websites in the internet, of course, because it's not only devs making our own personal websites. I feel like as a lot of us are in the same circles on the internet and only see other developers making websites but there's a lot more, the old web is not dead.

There's this Melonland surf club, and I love this. Autistic as F-X-X-K, "raise your middle finger to neuronormativety". Here's a whimsical, could be called whimsy, floating unicorn, two-tone, lots of GIFs everywhere. And these- this web, this old web, it still exists.

I wanted to show that it's not gone away. So the surf club is this kind of bar across the top, I guess, a way to navigate between them. They don't have to have that there.

And, I found it interesting, slow loading pictures. I wondered if they've done that on purpose to make it look a bit like 56K stuff like the old days. No, they're just loading massive pictures. But it's fine. This is their, they're experimenting. And they're toying with the web, and some are less interesting than others. And at some point, they get a bit less safe for work, but --

See that huge picture, that was probably quite a lot of MBs 'cause I was on my broadband at home.. I want to show how glorious that is. These things are still there. So that's that, there's also Neocities, you probably remember Geocities, that went away at some point. But Neocities now exists and it's championing all of this exploration, some of the websites we've just seen, actually, a lot of them are hosted on Neocities.

And then this surf club is part of the Melonland Project. I can't remember his name, I think he's Irish, he calls himself the Melon King and there's a forum and the forum is glorious, as well.

But he's dedicated to the idea of the web revival, he calls it. And I just -- I just really love everything he's done. And just wanted to show you that these things do exist. There is so much whimsy on the internet.

Sometimes, we get stuck in our developer bubble, I think, and don't see so much in it. Hello? OK. Don't remember that one. And then, there's also, some of you are probably part of the IndieWeb, there's the yesterweb, the tildeverse, the 32-bit cafe, there are communities everywhere, and they're building and teaching each other. And the old web is not dead.

It's almost more interconnected than it ever was. I feel like nowadays, the internet is so big and everyone's on it, this looks like it's gone, but there's probably more people doing that than there ever was.

So these people, they are diverse, and they are inclusive and many are themselves neurodivergent or autistic as FXXK, and/or disabled. And they want their websites to be accessible, if possible. I don't know if you've heard of spoon theory, but the idea that you can talk about energy, but imagine you wake up with ten spoons every day, and you give one away to your shower, and you give one away to making breakfast, and you have to go to the grocery store, and that's four spoons at once. And at some point, you run out of spoons and you're just done. Some people call themselves spoonies, they wake up with fewer spoons than other people.

It's a nice tangible way to think of it. So the last place I want to send them is to the web content accessibility guidelines. This is not their world. It's not written for them. It's written for auditors and, well, us. And, you know, I'm not going to send them there. Yeah, so these sites, they are joyous and experimental and excited and multimedia, some of them even have like a sort of web-based WinAmp on top of them.

They're colorful and inventive and avant-garde and... not always accessible. Some are a bit tricky. Some of them are strongly not responsive. They actually do quite proudly say, best on a desktop of a particular resolution. And it's clearly a callback to the '90s. Yeah.

But do they have to be? And these are people's homes and their pet projects on the web. And most of our own homes do not have stair lifts, ramps, adapted bathrooms or labels in braille, yet. I mean, my father just got a stair lift. These things will happen, I expect I will get arthritis in my hands like my parents and grandparents who got adapted taps, it'll come.

Should all types of art be accessible to everyone? And this is where there might be some sound. Luckily, there was a content warning. I can read this out to you. There's flashing imagery and quick glitchy animations, please, don't view this web art if you have photosensitivity or are epileptic. Close your eyes if you are. Click button below to proceed. And there's also a bit of sound.

And I don't want this stuff to go away from the web. I went through that with a screen reader, and it's garbled, it's not really readable. But I don't want that stuff not to be there any more. I feel like this art should be allowed.

So maybe not all art can be accessible to everyone. But it doesn't mean we can't try. So, 2 1/2 years go, Sophie, again, taught us how to make the whimsy of these 90s and noughties websites more accessible. Because it can be done. Even stuff like embedded audio.

I mean, that was embedded audio. I had to go and click it. So here's this music, the auto-playing nightmare. You have your embed with your source. Mine was always "Here Comes the Sun" by the Beatles. Hidden, true, loop, yes. Volume 10, autostart, true. Awesome.

Luckily, eventually, we got tabs and ways to turn off the volume from the tab, and at some point, you actually got an indicator which tab's making all of this noise. What we do now or should do now strictly opt in. There's an audio element, an aria-label of "play music", it has controls, there's nothing about autoplay. And you've got your source. And controls. Excellent.

And, the trails, there may have been trails on the websites I quickly flashed up. The cursor trails can be done through Canvas and request animations frame, I don't know how that works, but there's a website there that does. And what's even more important is that you can reference prefers-reduced-motion and just not do it.

So, good. This makes the content more accessible. The content of your website. But does it bring the fun vibes through? And this was my big question. This is where we're headed. "Vibes" is sort of a naff phrase, I think, but when we load a website, we get this visual measure of it. Maybe it's dark, brooding or light and airy. We saw very different moods of websites flick across.

Maybe it's full of bubblegum, anime, kawaii imagery, but the content is much darker, or vice versa, sort of wholesome Gothic. Those are the most fun. But how do we transmit these vibes beyond the visual layer? And I don't know any answers, there's lots of questions going to come now.

So what does make a personal art project unique? Does it square with the standards based accessibility advice? Is accessibility advice geared to public services and e-commerce, maybe? There may be truth in guidelines making websites dull, but I want my banking and government sites to be dull. Safe and predictable and boring.

Please. And no shade, the GovUK site is exactly what it should be. Safe and predictable and not janky and even when the services I access through it drive me potty (I'm having to deal with annoying citizenship stuff) it's not the site itself causing the issues, it's the departments behind it, right?

So, I started a little website whimsica11y.net to try and bridge this gap. And I had some fun with it. I made a nice little slider, tried to keep all of the contrasts good. I make sure I used OKLCH, so the contrast stayed no matter what color you had. It's extremely under construction.

I started it, started pouring some content in, there's this lovely video that Apple made two years ago. And they've just thrown it away. It's quite hard to find it on the internet, it's wonderful. It's called "The Greatest". Anyway.

But I found myself just repeating existing advice and worrying about being wrong. And what if I accidentally excluded yet more people with my well meaning but ultimately misguided advice? So, the project stalled. I got a little bit tied up about it.

I thought, well, OK. I want to tell people to go bigger 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 structures. If you go to brisray.com, you know, it's not like only navigation, it's like here's an icon, here's an icon, goes to this section, that section, and you can keep browsing forever.

And I feel like if the website is strange and full of twists and turns, then a disabled person should get to enjoy the same journey. But this advice doesn't really play well with the WCAG. I asked people on Mastodon who use assistive technologies, because there's quite a few on there, what has delighted them online? I wanted some concrete examples to help inform my advice and take back to my whimsica11y.net.

Here's the question: Dear users of assistive technologies, what if any personal websites and home pages have you really enjoyed? What was it about them? Aside from personal sites, have any websites amused or delighted you? They don't need to be specific accessibility related things at all. Being myself sighted and not disabled, I'm just not able to tell if what I enjoy can also be enjoyed across the board, and I'm really curious.

And I got answers almost exclusively about functionality. People were delighted when things just worked.

The bar is like down here. The -- there's -- there were one or two answers and I'll show you examples later that weren't functionality, but it was overwhelmingly people just saying, "oh, it's so great when this thing just happens".

And "it's really handy when I get, like, reading time indicator at the top of a big post". And it's just like -- so accessibility is not only about those who are blind, but the web is sort of dull right now when you can't see it.

And this has been bugging me. So Pirate Ship, my company, it amused one user of assistive technology. We had Florian Beijers, who is a blind developer, streamer, accessibility advocate, and consultant, and gamer, and he did an audit and came across the sound board built into our app.

And this is the app once you've logged in. It's about making labels.

Ahoy there, matey!

Where's me rum? Where's me booty?

I think that's one of my --

Blow me down. Send him to Davy Jones' locker. Yarr.

SARA: Some of those were actors, but a few of them I recognize. It's kind of sad, we even get a "Yarr" at the end of our meetings!

But this was apparently unusual. So, I mean, OK, you might get less of this in government and bank websites, but there's quite a few e-commerce websites that could be more interesting. And the rest of our app does have accessibility issues, he found quite a few. I'm pleased to say they're actively being worked on, and I think finally, we've got the main user flow, usable.

Florian, he's been blind since birth, so he learned braille, and a majority of people with visual impairments do not. These people are likely to have lost their sight later in life. And we might well lose our sight later in our own lives. And I remind myself not to other these groups that I may yet join. Because I fall into the othering too often for my own comfort. It's OK when you recognize this in yourself.

What's been killed? [The atmosphere!] Good.

So unless blind or severely visually impaired readers can use Braille displays, all text online has a screen reader's voice. And the web is full of text, and we skim read all the time.

We scroll, scroll, scroll, scroll, look down the headers, people want to get through it fast, and often pick voices with specific properties to help that. So Florian here says, "the flatness allows for cranking it up to stupid rapid speeds, which gets harder when there's more variance in the signal." So he picks quite, yeah, quite fricative, I suppose.

He's listening to the text at somewhere like 700 words per minute. Super fast. You can just about, if we normal sighted people, I guess, are listening to it, we can pick out the odd word here and there, if we're lucky.

Many of us read books and articles in an imagined voice that we think fits the author or a story's character. And imagine not having that flexibility. And it's all Microsoft George or whatever other voice you've chosen.

There's a good reason why Léonie Watson, also known as Tink, has been advocating for CSS speech. She lost her sight as an adult. When I share my slides, those two are links, and they're worth reading to understand the lived experience of somebody who has gone through that.

And of course, CSS Speech would have to be opt-in, and she makes that very clear. [Sara speaks in a silly over-emphasized way] "Because someone would clearly enjoy making their fantastic prose too emphatic and dramatic just because they can." Yeah, that hurt me to read. I'm sorry. It was fun to write.

But the big question to me is, what has happened to our multimedia web? I feel like it was very multimedia sometime ago. Why is there so little audio and video outside of YouTube? "If we see sound on the web now, it's ads or other auto playing videos. Truly a loss," says Florian.

"I agree that beyond it works, there's 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 state of accessibility in general."

Why? I enjoy a bit of speculation. I think that maybe a lot of browsing is happening in mobiles in public spaces. We are often using them in silence or on the bus, on the train. Or conversely, somewhere much louder where it would be hard to hear anyway. People have earphones, of course.

Maybe that's why captions are everywhere now. I mean, I'm a classic elder millennial, I love captions, I find it hard to watch movies without them now.

There's also, as mentioned by Scott, if everything's been drawn up in Figma first, I don't know if they have any audio things in Figma. And I really like that example of Josh Comeau's little web API, dings and bloops and things. We just don't do that.

Why else? CSS is very visual in nature. And we bend the HTML to our whims. And sometimes, we confuse the structure so much that the web pages turn into entirely different documents. Or we just use it to sort of fix something, a respondent to one of my posts had said that "why is the table of contents underneath the contents? How does that make sense?"

Because I've seen it with a screen reader -- I say, well, it's shown visually on the right, which sort of makes sense then in the DOM to place it-- sorry, that's a very German pronunciation of DOM-- to put it on the right-hand side, but then, to then put it under the contents in the document model -- so we end up with this disconnect between visual order and DOM order of elements.

And is it Rachel Andrews who has been pioneering the reading flow, is it called reading flow now? No. Reading order. Yeah, especially when we're talking about grid and masonry and possibly things turning up in different orders that we're starting to need new CSS to say, actually, can you make the screen readers go through in the order that we can see it?

Yep. And I mean, I absolutely love playing with CSS. And I imagine lots of you do, too. Kind of why you're here. But the whimsy is so visual.

How can we change that? Again, I have no answers. I have some examples. I just want us to be aware yeah, that jumped ahead. So some ideas and examples. We have audio related ideas and examples. So, Keenan writes a very good blog, he's an excellent writer, and actually a very good speaker. He does a podcast, not every, every now and then when he's got a particularly good blog post, he does audio counterpart of it.

[Audio] "Originally published on February 22nd, 2024. What RSS reader are you reading these words in right now?"

SARA: Oh, well, we skipped the title.

"Please don't email me the answer. Instead, whisper it in a cup, cover it with cling wrap and use its lingering reverberance as a sweetener for tomorrow's cold brew. This is a gift you've given yourself. You can thank me later. I accept affirmation and Apple pay."

SARA: Can you imagine? Otherwise, you would read that with a screen reader, possibly. It would be fine. His words are good. He's got lots of personality in his words. But how much more personality are we getting through the audio?

And another example is the Pirate Ship sounds, you've seen that, unfortunately, you do need to sign up to play with those and it only really makes sense to use when sending from America. We're hiring if you live in Hamburg.

And yeah, this is the one that popped up, Chris Ferdinandi, the JS guy, he's done all sorts of things, he has a little Easter egg. [unco-ordinated drum beats play]

I have no rhythm. I was experimenting. Anyway. So, I feel like there used to be probably a few more silly Easter eggs like this, we don't get this quite as much any more. The other thing we can do is learn about and contribute CSS Speech, I think it's been sort of lingering as a thing in the -- which working group would it be? It must be CSS Working Group, it needs a little bit more people to be into the idea and help and contribute.

That's one thing we can do. And also, yes, calling back to Josh Comeau's website, I hadn't seen before, and all of these lovely web audio API things. And the other vibe transmission methods. So alt text as part of the art, or as poetry even. I like the idea instead of going, oh, no, how do I get this right? How do I describe this picture to befit? Oh, no, I need to keep it short, says some advice.

How about you think of it about poetry instead and pay a little bit of attention to the language. And yes, you have word economy maybe to keep it short and sweet, but maybe it's not just being short, but it's having an experimental spirit with what words you're going to put in there.

I mean, it's hard when you're just posting to social media and trying to shove in alt text to make sure it makes sense to everyone. But on your website? You can toy with it. Why not have an actual poem in there? I don't see why not.

Next, is alt text selfies to complement profile pictures. And this is actually a project by the same people who did the alt text as poetry. And these are really lovely. They give much more insight to a little picture of a person than just the picture would give. So Kirsten Hatfield is "a white cherub-faced woman, gazes lovingly at her little black doggy. He is in her arms licking the bottom of her chin. They stand in front of a large deep green bush covered in bright pink flowers. The sun is warm on their--" stop, argh!

Either way -- and they don't all have to be long. "Hot mirror selfie in the bathroom wearing black graphic crop tee with black panties, my hair wet, I'm feeling good." Why not? And then, some of them are quite sad in places. And -- yeah, I just, it's worth going to this website and reading through lots of them. And you get much more of a sense, like this one, "a photo of myself, white woman with short, brown hair and bangs looking glum, my left palm is cupping my chin, supporting the weight of my head. My eyelids are weights that can barely keep open after spending all day entwined with fatigue. I'll leave my house in about an hour and no one will be able to tell I've been sick for 14 years."

She's probably a spoonie. The amount of information a little paragraph can give. I made my own one. Has it come off the page? Yes.. "Sara positions her phone camera above and in front of her trying for some kind of enigmatic expression of her eyes, which end up bisected by the red framed varifocal glasses she thinks makes her look cool or sassy or something. She's wearing the pussy hat she crocheted in 2017 for the anti-Trump demos she attended that year. Just out of shot lies the chaos of a young nuclear family, toys all over the floor and the kitchen counter covered with stuff she's too tired to tidy away.

What's been killed? [response] ..I need to find what comedian that was.

I think we can also create atmosphere in adding fun in visually hidden text. And there's a little star here because people are like, oh, you shouldn't change the experience for one group over another group. But we leave Easter eggs in code all the time. Here's some ASCII I put in my code. Text here, as well. "You found the source code. Steal whatever you like. Credit me if you want, but there's no need to. Welcome to the personal web, you belong here. Some of this code is spaghetti, sorry." So we're always giving Easter eggs, why not give Easter eggs to people who are using accessible tech? Why not?

And my last point here is to maybe allow more of your personality into your writing. And I feel a bit harsh, I've said no Grammarly. You can use Grammarly. But every time I try it, it takes away my Britishness and shortens everything.

And it's not me anymore. And maybe people who have got English as a second or third language are taking all of its advice, and then, the language ends up very the same. And think about these screen reader users who are reading all of these different blog posts in the same voice all the time.

Like, what makes your writing yours? It's OK if you have a dialect. It's OK if you have strange idioms. It's your humor, your text, you don't have to use all kinds of audio, you don't have to write a -- record a podcast, but you can make your text more yours. So there's only a few ideas. And I'm sure you'll have more different ones. You might think most of those are not good.

And like I say, they don't square well with the accessibility guidelines. But the web is for everyone. And this picture gets me every time for some reason. So this is the -- whew, weird. It's only the Olympics, right? The 2012 Olympics. I don't know if Tim Berners-Lee is in that floaty house at this point or it's been lifted off of him. He's sitting there computing and -- is he underneath it? Is he there?

Yes, maybe sitting here typing on the internet and the seats have lit up, "this is for everyone" I'm just like, oh, yes, it is -- the joy of the whimsy, the vibes, too, for everyone. Thank you.