This is a terrific presentation from Paul. He gives a history lesson and then focuses on what makes the indie web such a powerful idea (hint: it’s not about specific technologies).
Web Content Accessibility Guidelines—or WCAG—looks very daunting. It’s a lot to take in. It’s kind of overwhelming. It’s hard to know where to start.
I recommend taking a deep breath and focusing on the four principles of accessibility. Together they spell out the cutesy acronym POUR:
A lot of work has gone into distilling WCAG down to these four guidelines. Here’s how I apply them in my work…
I interpret this as:
Content will be legible, regardless of how it is accessed.
For example:
I interpret this as:
Core functionality will be available, regardless of how it is accessed.
For example:
I interpret this as:
Content will make sense, regardless of how it is accessed.
For example:
This is where it starts to get quite collaboritive. Working at an agency, there will some parts of website creation and maintenance that will require ongoing accessibility knowledge even when our work is finished.
For example:
I interpret this as:
Content and core functionality will still work, regardless of how it is accessed.
For example:
If you’re applying a mindset of progressive enhancement, this part comes for you. If you take a different approach, you’re going to have a bad time.
Taken together, these four guidelines will get you very far without having to dive too deeply into the rest of WCAG.
Good advice for documentation—always document steps in the order that they’ll be taken. Seems obvious, but it really matters at the sentence level.
Another terrific interactive tutorial from Ahmad, this time on container queries.
This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!
I’ve mentioned before that one of my roles at Clearleft is to be a content buddy:
If anyone is writing a talk, or a blog post, or a proposal and they want an extra pair of eyes on it, I’m there to help.
Ideally this happens in real time over video while we both have the same Google doc open:
That way, instead of just getting the suggestions, we can talk through the reasoning behind each one.
I was doing that recently with Rebecca when she was writing an announcement blog post for the Leading Design on-demand platform.
Talking through the structure, I suggested this narrative flow:
I think that blog post turned out well. And we both had good fun wrangling it into shape.
Today I was working on another great blog post, this time by Luke. Alas, the content buddying couldn’t be in real time so I had to make my suggestions asynchronously.
I still like to provide some reasoning for my changes, so I scattered comments throughout. I was also able to refer to something I put together a little while back…
Here’s the Clearleft tone of voice and style guide document.
I tried to keep it as short as possible. There’s always a danger that the style guide section in particular could grow and grow, so I kept to specific things that have come up in actual usage.
I hadn’t looked at it in a while so I was able to see it with somewhat fresh eyes today. Inevitably I spotted some things that could be better. But overall, I think it’s pretty good.
It’s just for internal use at Clearleft, but rather than have it live in a Google Drive or Dropbox folder, I figured it would be easier to refer to it with a URL. And we’ve always liked sharing our processes openly. So even though it’s probably of no interest to anyone outside of Clearleft, here it is: toneofvoice.clearleft.com
This is a wonderfully in-depth interactive explainer on touch target sizes, with plenty of examples.
This is a terrific interactive explainer!
Michelle has written a detailed practical guide to container queries here.
When you think of heraldry what comes to mind is probably knights in shining armor, damsels in distress, jousting, that sort of thing. Medieval stuff. But I prefer to think of it as one of the earliest design systems.
This totally checks out.
I like Jason’s guidelines—very in keeping with The Session’s house rules.
And I really like his motivation for trying out comments:
The timing feels right. Twitter has imploded and social sites/services like Threads, Bluesky, and Mastodon are jockeying to replace it (for various definitions of “replace”). People are re-thinking what they want out of social media on the internet and I believe there’s an opportunity for sites like kottke.org to provide a different and perhaps even better experience for sharing and discussing information. Shit, maybe I’m wrong but it’s definitely worth a try.
Yes! More experiments like this please! Experiments that aren’t just “let’s clone Twitter”.
I didn’t know the Washington Post had a design system or that the system has this good section on accessibility.
Imagine a collaboratively developed, universal content style guide, based on usability evidence.
Stuart has written this fantastic concise practical guide to privacy for developers and designers. A must-read!
A very handy guide to considering privacy at all stages of digital product design:
This guidance is written for technology professionals such as product and UX designers, software engineers, QA testers, and product managers.
This is a great step-by-step guide to HTML by Estelle.
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
The Clearleft newsletter goes out every two weeks on a Thursday. You can peruse the archive to see past editions.
I think it’s a really good newsletter, but then again, I’m the one who writes it. It just kind of worked out that way. In theory, anyone at Clearleft could write an edition of the newsletter.
To make that prospect less intimidating, I put together a document for my colleagues describing how I go about creating a new edition of the newsletter. Then I thought it might be interesting for other people outside of Clearleft to get a peek at how the sausage is made.
So here’s what I wrote…
The description of the newsletter is:
A round-up of handpicked hyperlinks from Clearleft, covering design, technology, and culture.
It usually has three links (maybe four, tops) on a single topic.
The topic can be anything that’s interesting, especially if it’s related to design or technology. Every now and then the topic can be something that incorporates an item that’s specifically Clearleft-related (a case study, an event, a job opening). In general it’s not very salesy at all so people will tolerate the occasional plug.
You can use the “iiiinteresting” Slack channel to find potential topics of interest. I’ve gotten in the habit of popping potential newsletter fodder in there, and then adding related links in a thread.
Imagine you’re telling a friend about something cool you’ve just discovered. You can sound excited. Don’t worry about this looking unprofessional—it’s better to come across as enthusiastic than too robotic. You can put real feelings on display: anger, disappointment, happiness.
That said, you can also just stick to the facts and describe each link in turn, letting the content speak for itself.
If you’re expressing a feeling or an opinion, use the personal pronoun “I”. Don’t use “we” unless you’re specifically referring to Clearleft.
But most of the time, you won’t be using any pronouns at all:
So-and-so has written an article in such-and-such magazine on this-particular-topic.
You might find it useful to have connecting phrases as you move from link to link:
Speaking of some-specific-thing, this-other-person has a different viewpoint.
or
On the subject of this-particular-topic, so-and-so wrote something about this a while back.
The format of the newsletter is:
Take a look through the archive of previous newsletters to get a feel for it.
Currently the newsletter is called dConstruct from Clearleft. The subject line of every edition is in the format:
dConstruct from Clearleft — Title of the edition
(Note that’s an em dash with a space on either side of it separating the name of the newsletter and the title of the edition)
I often try to come up with a pun-based title (often a punny portmanteau) but that’s not necessary. It should be nice and short though: just one or two words.
Vitaly has rounded up a whole load of accessibility posts. I think I’ve linked to most of them at some point, but it’s great to have them all gathered together in one place.
It all started at Patterns Day…
(Note: you’ll probably need to use Reader mode to avoid taxing your eyes reading this—the colour contrast …doesn’t.)