Tag: 1.4.5

I’ve been in developing websites for over twenty years. When I started in the industry, we had to create images of text if we wanted to use a specific font. This was necessary to make things work the way we wanted visually.

The problem of images of text is that screen readers can’t see the text. Like other images we need to provide alt text that reflects the text in the image. It was early in my career, so I tried to find a way to write. I used individual PNGs of letters with the alt text set to that letter. What I didn’t fully understand was assistive technology. My attempted method ended up with the AT announcing each letter. This is because they read each image as a separate unit of text. Spelling my name would be announced as, “N image, A image, T image.” This doesn’t help anyone.

20 years later…

The folks at the W3C’s CSS working group have been working overtime. They have provided us ways to import fonts from CDNs. We have the ability to clip with text. Drop shadows, gradients, transforms provide additional customization.

We also have SVGs. They allow us to put text directly into an image as text. This text is available to AT. This allows us to put stylized text on a path for display.

And…

We do not need to put text in our images anymore. And I’m not referring to logos. That another can of worms. We have multiple ways to add stylized text with unique fonts. We don’t need to use text in images anymore. Just don’t do it.

But…

I know what you are thinking, “My current platform doesn’t allow me to…” or “That requires me to work with IT to make changes and I don’t have many hours…”

There are always constraints. What I described earlier is a best case scenario where all conditions are right to make this problem go away. But that’s not how life works. You will need to use a custom font as an image of text at some point.

And it isn’t difficult. We treat it just like we do with other images. We use alternative text to supplement the image with a text equivalent. In the case of text in an image, that includes all the text.

If you alt text is over 150 characters, I want you to pause. When alt text gets really long it can overwhelm some users. Neuro-typical brains will probably be fine. But neuro-divergent users will have problems. This may be an area where you can break up the image into smaller images. Break the text up to match the images. You can also use figure and figcaption. Here, everything is wrapped in a figure. The alt text is placed on the image. The figcaption contains the rest of the explanatory text.

<figure>
  <img src="https://placekitten.com/200/300" alt="Text in the image." />
  <figcaption>The remainder of the the text described in the image to complete the message needed to express things.</figcaption>
</figure>

And the most important tip I can leave you with is:

When you don’t use closing punctuation, most AT browser combos will start reading the next item. They will read it as if it were a run-on sentence. This causes added confusion. With the punctuation in place, the AT will pause or announce the punctuation. This is determined by the user’s settings. In either case, the user understands the concepts better without the run-on sentence.

Have some thoughts on this topic? Let’s talk over on LinkedIn and BlueSky!