Images of Text

Let's talk about images of text. So in general, images of text are not allowed in WCAG. And you should never, if you can do it otherwise, you should never use image or text on an image as the only way to convey that image.

And that has a couple of reasons. For example, you can't properly resize text that is on an image.

You run into like pixelation and stuff like that. So it's much preferred to have it in text.

You also can't copy and paste it, though that is changing as we speak, because a lot of computers just get OCR by default.

default, you know, and if you have like an iPhone, and I think Androids also can do that,

where you can just copy and paste text from an image. But, you know, it's still a challenge for

many people, and you have to be aware of the functionality. And you have to be aware that

there's actually text inside of the image, which you might not be. So there's, you know, just using

images, text on images is not the best thing to do. And it can also interfere with like user

preferences. For example, if I want my text to be always white on black, I couldn't do that with a

text that is on the image because that's just like burned into the image, right? So often you get

these style text with decorative effects that you can see. And this is the old version of like, oh,

you have an image and you put the text over it and just put the image somewhere. And yeah, as you can

see, I can actually copy and paste it. Let's see if that works well. Just paste it here into the top.

And it says "your need to the" and city just an access it also does not know.

So in this case, this functionality wouldn't even have worked for me.

So, you know, that's just the reality of all these OCR tools.

They are good, especially with normal text.

But if you have something that is styled, just doesn't work well.

So, in this case, you could use your alt, your access to the city, that would work.

Or you could use something like CSS3, which, yeah, we wrote that in, I want to say 2016, 2017, where like web fonts and stuff was a big thing.

But yeah, this is like real text, so I can just copy it and then paste it to the top.

And of course it works because this is like real text that I can manipulate.

So that's fun.

And this font is a little bit more readable.

We didn't have the font ready to use in this case for it.

Now, exempt for text on images are logos.

So you can use logos that have text in it.

Here's the old Web Accessibility Initiative logo.

And basically, it also uses the old attribute.

When you're using this, you have to make sure that all information that is inside the image is also in the alternative text.

This is especially important if you're using images of text on social media, like on your Twitters, your Mastodons, your Instagrams.

If you have text on images there, you have to make sure that in the alternative text, all of the text is in the alternative text functionality.

And then there's an example on mathematical expression, which we will just skip because I won't go in there.

This is niche knowledge and if you want to read up on it, it's there and now you know about it.