You can use alt text on the CSS content property

Like many other folks, I typically only run into the CSS content property when working with the :before and :after pseudo-elements. And, even then, I leave it empty because I’m only using it because the pseudo-elements require it for styling.

.some-element:before {
  content: "";
  /* other stuff */
}

I stumbled into a post by Stefan Judis by way of Keven Ball’s weekly Friday Frontend newsletter that shows content being used as alternative text. Copying his example verbatim:

.new-item::before {
  /* "black star" and element content is read out */
  content: "★";

  /* "Highlighted item" and element content is read out */
  content: "★" / "Highlighted item";

  /* Generated content is ignored and only element content is read out */
  content: "★" / "";
}

Pretty neat! Screenreaders will read read the generated content out loud when interacting with the element. Apparently, this was added to the CSS Generated Content Module Level 3 spec which is in Editor’s Draft status dated January this year.

Here’s how the spec currently describes the use case:

This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.

Check out the comments in Stefan’s post because a good question was raised as to whether using hard coded strings is a maintainable way to manage accessible alternative text. I’ll add that this may even stoke the ongoing debate over the separation of markup and styles.

Regardless, this is new to me!

(Source / Spec)