Alt text in CSS content

25 November 2020

The CSS content property is used with ::before or ::after to add additional content dynamically. For example, it could be used to add an asterisk * to the label for required form fields:

css
label.required::after {
  content: '*';
}

But what happens if someone uses a screen reader to fill in this hypothetical form? They'd hear something like this:

Username star, text field.

While the user might be able to work out from context that a star indicates a required field, it would be better to explicitly convey that.

New syntax was recently added to a draft of the CSS spec which allows alt text to be added to the CSS content property. It looks like this:

css
label.required::after {
  content: '*' / 'required';
}

Anything specified after the slash / will be used as alt text, so it'll be read by screen readers. Now the form field gets read like this:

Username required, text field.

That's much more understandable! And the asterisk still appears visually in the browser.

Accessibility note

This example of using the alt text for a required form field is contrived just for a simple explanation. In reality, a required form field should be marked up with aria-required="true", which screen readers can use to let the user know a field is required. There's no need to explicitly add "required" to the label.

The content property can also be used to display images using CSS, so adding alt text is especially important for those cases.

The bad news is that this syntax is still a draft, which means it's not real CSS syntax yet. As of writing, it's only available in Chromium-based browsers. Other browsers will treat it as invalid, which might cause the entire content property to be disregarded, even the content before the slash.

For now, unless you can guarantee your users are all using Chrome, it's probably best to wait before adopting this syntax. But in future please bear it in mind as more browsers begin to support it, because accessibility is important.

This post was inspired by a tweet by @chordbug.


Update: 25 November 2020

I have now removed Netlify CMS from my site because I realised it was overkill for a site I only update a few times a year. The information below still stands as a semi-useful tutorial.

As part of rebuilding my website to use Next.js and Netlify CMS, I wanted to reuse components I made for Next.js as the editor preview in Netlify CMS. Unfortunately for me, I couldn't find any resources about how to do so.

After lots of trial and error, I found a way to initialize the CMS as part of a Next.js page, so I was able to import other components to use as the preview. Here's how I did it.


Update: 25 November 2020

I have now removed Netlify CMS from my site because I realised it was overkill for a site I only update a few times a year. The story below is still mostly relevant.

For my first post in almost two years, and to go along with the redesign I've just rolled out, here's the story of why and how I rebuilt this site from scratch on an entirely new technology stack.


Go Pack

28 December 2018

The worst part about travelling anywhere for more than a day trip is packing. More specifically, trying to make sure you have all the cables and adapters you'll need to charge all the devices you're bringing along.

I used to try to keep one of everything I need in the backpack I use as a laptop bag. However, on multiple occasions I've either taken something out of that bag and forgotten to return it, or I've gone somewhere using a different bag and forgotten to transfer all the cables to the other bag.

After reading Casey Liss's post about his "go pack", which he uses to keep all his cables and adapters together in one place, I decided to totally steal his idea (as well as his blog post format) and create one of my own.


In macOS 10.11 El Capitan, the full screen feature gained the ability to display two apps side by side in split view. The most common way I've seen people activate split view is to make an app full screen, then use Mission Control to drag another app on top. However, as I discovered recently, there's a much faster and less annoying way to do it.


Older posts →