It's a process; not a product


A pet cat typing on a computer keyboard.

Sometimes a client asks me a question and I'm a little stunned by their mental model of the world. A few weeks ago, we were discussing the need for better cybersecurity in their architecture. We spoke about several aspects of security, then they asked an outstanding question. "What should I buy to be secure?" It […]

Continue reading →

Laziest Possible Dark-Mode Toggle - Using :has() and invert()


A dark website with a photo of a kitten.

I'm not saying this is a good way to make a dark mode website. I'm not even saying it's a sensible way to do dark mode. But I'm pretty sure this is the laziest way of getting dark mode on your site. And it is all done with less than a handful of CSS rules. […]

Continue reading →

Find WordPress featured images with no alt text


The Logo for WordPress.

WordPress allows you to set a featured image - called a "thumbnail" in the API. This gives a single image which can be used on a listing page, or shown when a post is shared on social media. The WordPress Media Library lets you set the alt text of an image. But, crucially, this alt […]

Continue reading →

I think I kind of hate lazy loading


An icon representing a broken image.

Yesterday I was on a train. I clicked on a link and my browser loaded a long article for me to read. Halfway through reading it, the train went into a tunnel and I lost signal. That meant I couldn't see the images on the other half of the page for the rest of the […]

Continue reading →

Should you embed alt text inside image metadata?


Screenshot showing technical details of the metadata on a photo. It contains a copyright notice.

Not everyone can see the images you post online. They may have vision problems, they may have a slow connection, or they might be using a text-only browser. How can we let them know what the image shows? The answer is alt text. In HTML we can add a snippet of text to aid accessibility. […]

Continue reading →

This link is only available by keyboard navigation


The HTML5 Logo.

There's a link, right here ➡️⬅️ but, if you're on a touchscreen, you can't tap on it. Using a mouse? Nope, that won't work either. The only way to navigate to it is via keyboard navigation. Hit your Tab ⭾ button! There's a little bit of me wants to build an entire website which can […]

Continue reading →

Unicode Roman Numerals and Screen Readers


Screenshot of a Table of Roman numerals in Unicode.

How would you read this sentence out aloud? "In Hamlet, Act Ⅳ, Scene Ⅸ..." Most people with a grasp of the interplay between English and Latin would say "In Hamlet, Act four, scene nine". And they'd be right! But screen-readers - computer programs which convert text into speech - often get this wrong. Why? Well, […]

Continue reading →

How to style your alt text


Photo of a broken and smashed picture frame. Taken by eastbeach on Flickr.

Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text? Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term! Let's take a broken image like <img src="http://example.com/bigfoot.jpg" alt="The […]

Continue reading →

Twitter's archive doesn't have alt text - but Mastodon's does!


The Twitter logo drawn in circles.

Because I don't trust Alan, the Hyperprat who now runs Twitter, I decided to download my Twitter archive before setting my account to dormant. About a decade ago, I wrote about how the Twitter archive works and where it is deficient. Things have got better, but there are still annoying limitations. For example, Hannah Kolbeck […]

Continue reading →

Woohoo! WordPress accepted my accessibility PR


Screenshot of a box to enter alt text. It is two lines high and is resizeable.

About 2.5 years ago I proposed a small accessibility improvement to WordPress. It has taken a bit longer than I'd hoped but, as of WordPress 6.1 it has been merged! Now, if you're using the Classic editor, you'll get a larger and resizeable box for entering alt text. Because the text entry uses <textarea> most […]

Continue reading →