Clever, clever that Andy Bell. He shares [a technique for displaying image alt text when the image fails to load](https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/?ref=main-rss-feed). Well, more precisely, it’s a technique to apply styles to the `alt` when the image doesn’t load, offering a nice UI fallback for what would otherwise be a busted-looking error.

The recipe? First, make sure you’re using `alt` in the HTML. Then, a little JavaScript snippet that detects when an image fails to load:

```
const images = document.querySelectorAll("img");

if (images) {
images.forEach((image) => {
image.onerror = () => {
image.setAttribute("data-img-loading-error", "");
};
});
}
```

That slaps an attribute on the image — `data-img-loading-error` — that is selected in CSS:

```
img[data-img-loading-error] {
--img-border-style: 0.25em solid
color-mix(in srgb, currentColor, transparent 75%);
--img-border-space: 1em;

border-inline-start: var(--img-border-style);
border-block-end: var(--img-border-style);
padding-inline-start: var(--img-border-space);
padding-block: var(--img-border-space);
max-width: 42ch;
margin-inline: auto;
}
```

And what you get is a lovely little presentation of the `alt` that looks a bit like a blockquote and is is only displayed when needed.

CodePen Embed Fallback

Andy does note, however, that Safari does not render `alt` text if it goes beyond a single line, which 🤷‍♂️.

---

[You can style alt text like any other text](https://css-tricks.com/you-can-style-alt-text-like-any-other-text/) originally published on [CSS-Tricks](https://css-tricks.com), which is part of the [DigitalOcean](https://try.digitalocean.com/css-tricks/?utm%5Fmedium=rss&utm%5Fsource=css-tricks.com&utm%5Fcampaign=family%5F&utm%5Fcontent=) family. You should [get the newsletter](https://css-tricks.com/newsletters/).