Featured Feature WCAG Series Episode 2: Making Images Accessible

Featured Feature: WCAG Series

A Featured Feature that isn’t really a feature, but is so important it gets its own miniseries: Web Content Accessibility Guidelines (WCAG).

In this episode, David talks about making images (and other media) accessible with alternative text. Alt text helps not only people with visual or cognitive impairments, but also anyone stuck with slow internet where images won’t load. He shows how to add alt text in the platform for images, audio, video, questions, banners and logos and explains why the same picture might need different descriptions depending on context. The takeaway: always add meaningful alt text, so everyone gets the same information.

👇 Watch the second episode.

Full transcript

 Hey everyone, it's David, Product Designer at aNewSpring.

And in this episode I want to talk a bit about making your images accessible. It's all related to this content related guideline. So the non-text content, also called alternative text, because that's pretty much what it's all about. And what it means is, that, if you have content parts, and I'm sure you do, and you have an image in those, which you probably have.

You need to provide these images with an alternative text. Now you can set that up in the platform and I'll show it in a second. But first things first. Who is this for? Well, obviously, visually impaired users, but you have to think a little bit broader than that. It could also be for users with cognitive disabilities who have a more challenging time understanding what the image is all about.

The alternative text can provide that extra bit of information, for example, and then also users with situational limitations. For example, slow internet. So if you have slow internet and the image doesn't wanna load, it can still load that alternative text and provide that extra information, which is awesome.

So yeah. Why does this matter? Everyone should be able to perceive the same information. Simple as that. So let me show you how you can set up an alternative text for your images inside our platform. Alright, so as you can see, I am inside a content bar right here. And let me quickly show you the different locations where you can add an alternative text to your content.

So I have an image right here. Which I uploaded via the image option, but you can do the same thing for the text editor. But if I select the image here, there's an added button, and then that's where I can add the alternative text to the image describing what the image is showing, but in text. So this can read this out loud, basically.

Now the same thing I can do for videos that you upload in the video player, but if you have done this via YouTube or Vimeo, you can do it on YouTube or Vimeo basically. And, last but not least, we have audio files right here. And then if I click that, it's the same story, there's an added button and that's where I can add the alternative text for the audio clip.

That's it for content parts. Now for questions that pretty much works the same way as content parts. The only difference here is that you have these fields that look a little bit different, but it's the same popup. You just click it, you click on add it, and you can add an alternative text. Now, if you're wondering if you have to add an alternative text per question or per content part, even though you're using the same image, that's correct.

And the reason for that is that the image can convey a different type of information depending on the context that it's rounded with. So the same image can have different alternative texts that you set up per content part or question. And the last location I wanna show you is inside a product.

Products can have these really cool, better images at the top, and these images can also be provided with an alternative text. As simple as that. And last but not least, on most pages, you can see a cool logo at the top. If you have this, you can go to the Look and Feel settings, and then there you can add the alternative text to the logo image.

So to quickly recap, make sure your images, your audio files, your videos, all have alternative texts. If those videos come from YouTube or from Vimeo, then you can set up the alternative text over there. And then last but not least, if you have a logo banner, make sure it has an alternative text. That's it.

Thanks for watching this episode on making your images more accessible. I hope everything was clear. If you have any questions, please let us know. And otherwise, see you in the next one, which is gonna be about contrast. So, yeah, should be interesting.

See you there.