You're using alt text wrong - you just can't see it

Transcript

Hello everyone. Today – my first talk – I’m going to talk to you about how you’ve been doing alt text completely wrong.

As you may remember from last month, Alex did a very good talk on accessibility. She tended to do an overview of accessibility and what it means, how UX is affected, and kind of how, generally, websites aren’t that usable for a lot of people who have impairments. I decided to drill down on those who are visually impaired.

Why your website needs to cater to those with visual impairments

One of the things you probably don’t know is that, worldwide, around 246 million people have severe visual impairments. That’s from blindness, to partial sight.

The way that these people navigate the web is very different to the way that you and I do. Whereas we might use a mouse, they will tend to use things called screen readers, and primarily through shortcuts and through the arrow keys on a keyboard. But I bet none of us could name a single screen reader.

How screen readers work

One of the most popular ones is called Jaws. Yeah, okay, not that Jaws. It’s a much friendlier shark called Jaws. It stands for “Job Access with Speech”. The other most popular is Apple’s Voiceover, which is a proprietary software, which is baked into all Mac products. If you ever want to try it out, you just press command F5 and Voiceover will pop up.

Now, screen readers generally, tended to work a lot better when the web looked like this. It’s a lot more text-based, and although obviously it looks terrible, considering the fact that that’s literally what it looks like – that white space there – it just helps it navigate it a lot easier.

The problem with modern websites

Websites now look like this. There’s a lot more visual imagery, a lot more of a story told by those visual elements. That’s great, that we’re able to be more creative and express ourselves as digital marketers. But at what cost?

The importance of alt text

I’m now going to give you an example of what happens if you remove alt text from an image.

[Video: Heading, level two. Using the Voiceover help menu. When Voiceover is running you can look at the Voiceover help menu to learn more about using Voiceover and to access commands for the item of the Voiceover cursor. Voiceover underline … help underline … menu … JPG image.]

It’s just not helpful. So even if you make that filename incredibly descriptive, which I really doubt you will, you just don’t know anything about that image. All that information that’s held in there is completely lost.

So how about you do what most of us all tend to do and add the bare minimum alt text to an image.

[Video: Heading, level two. Using the Voiceover help menu. When Voiceover is running you can look at the Voiceover help menu to learn more about using Voiceover and to access commands for the item of the Voiceover cursor. Voiceover help commands and shortcuts … image.]

Okay, so I now know what that image is. Great. But all that info is still inaccessible to me. All I know is that there’s information in there I need, and I cannot see it – I have no idea what it is. It’s the prime example of being guilty of using the bare minimum amount of alt text. We’ve all been there; I’ve done it, and before I did this research, it’s exactly what I would have done too.

Fortunately, this being Apple’s Voiceover guide, they’ve actually marked it out quite well. So here it is.

[Video: Heading, level two. Using the Voiceover help menu. When Voiceover is running you can look at the Voiceover help menu to learn more about using Voiceover and to access commands for the item of the Voiceover cursor. A screenshot of the Voiceover help menu. A panel with a black background and white text, titled Voiceover Help. The help menu includes these items, from top to bottom: Online help, commands help, keyboard help, sounds help, quick start tutorial, getting started guide. To the right of each item is a command you use to display the item or an item to access an item’s sub menu. Image.]

Yes! So much more helpful. So much more helpful. It’s pretty much indistinguishable from text. If you had your eyes closed, you’d probably just assume there was text there and not an image. The only slight criticism I have of it is that it still doesn’t tell you any of those shortcuts. You still have no idea how to do any of those commands, just that those commands exist. But to be fair to Apple, I think we can forgive them not letting us go through a robotic voice yelling symbols at us.

Adding alt text is simple

And I know what you’re thinking, oh God, I’ve got to go away, tell all my clients: “Look at my website and find out ways that I can add classes so that screen readers can read it properly.” Obviously, that’s what we want at the end of the day, we want to make our websites completely accessible. But I’m not expecting you to do that. It’s not an overnight thing. It’s tough.

Instead, all you need is this. It’s just rich, descriptive alt text. You describe exactly what the image does, and it’s perfect. It does what you need it to.

Case study: BBC

Now some of you might be sceptical and thinking, alright fine, is alt text really that neglected though? I’m sure I use it okay. So, let’s go back to that BBC example.

Now the BBC tend to be held up as a really accessible website. They’re great at what they do and generally get held up for it. But this is what a screen reader sees for this page. No alt text. No alt text. No, no, no, nothing. That’s what’s left, that’s what a screen reader sees, and it’s just not enough.

Yes, you could argue that there is enough information there to tell you what those stories are about, but could you honestly tell me that you know Ashcroft is a person without the context of a picture of a man? I don’t think so.

Facebook and Google care about alt text

If you still don’t think that alt text is a big deal, I’ve got news for you. These guys do. They think it matters.

Earlier this year, Facebook launched automatic alt text. Essentially, what it does is it looks at the news feed and tells screen readers what images are. So, it will tell you that this image contains two people smiling, sunglasses, sky, outdoor and water. Can you imagine having that information as opposed to just finding out that you’ve finally made it? Great, what did you finally make? A castle? I don’t know what you’ve made. And the idea is that Facebook wants it to be even more than just having keywords applied to images. It wants to construct narratives, which is exactly what alt text should already do, and we’re failing to do that.

Google are also using categories to define what images are. As you’ll probably have seen in image search, you have these categories applied to the top. So why don’t you just make it easier for Google, add alt text and you’re telling them what it is, you’re not asking them to decide what your images are instead.

And of course, as you’ll know, as I’m sure we’ll come onto later on, it always comes up, we’re constantly researching voice search. It’s on the rise. Smart speakers are always in the background listening to what we’re saying now. You can’t just rely on visuals to get across a message anymore. It’s not enough. And to be honest, I think that’s fine. I think it levels the playing field. Smart speakers and screen readers, as you’ve probably seen, don’t work that differently. They can’t see visuals, but they can see text.

How to optimise your content for screen readers

Fortunately, I’ve got a few tips for you, to help you.

Think about users before search engines

So, my first tip for you is, much like Adam and Mark here, don’t just optimise, empathise. Working in this industry, it’s really, really easy to think: “okay, I’ve got a checklist, I know what I need to do to optimise content for the web”. But it’s not about that anymore, it’s so much more. Instead, you need to think about people, not search engines.

Consider how alt text will be read aloud

You also need to think about the fact that if you create alt text, it’s probably going to be read out loud by a screen reader, even if you don’t think your target audience uses screen readers. So, if you think it’s maybe going to drone on, it’s okay, use something like Hemingway App to help you trim it down and make it snappier.

Describe rich media

As I’ve already mentioned, and you’ve probably got it drilled home by now, you also need to make sure that you describe rich media, like images and video, or providing transcripts. That’s only going to provide more value for the web and more things that Google can index for you.

Have a logical hierarchy to your content

It’s also really important to have logical hierarchy to your content. As you might have kind of understood from what I’ve shown you so far, the way that screen readers work is you tab through content; use the right arrow to go forward and the left arrow to go back. If your hierarchy and structure is not obvious, it’s going to get confused.

Putting things into perspective

So okay, I’ve mentioned that 246 million figure for you earlier. Figures like that get bandied around a lot, and you think: “oh, it’s a big number”. But what does that actually mean? So, I’m going to try and put it into perspective for you.

That figure represents the entire the population of the UK, Ireland, France, Belgium, Netherlands and Germany. Most of Western Europe. And you’re effectively excluding them by not allowing screen readers to traverse your website properly. It’s a big number. Why are you ignoring them?

The thing is, there are anti-discrimination laws in the physical world, so why aren’t we applying this to websites? You have wheelchair ramps, you make sure … like, you get punished for not making sure that your office can be assessed by people like this, but you don’t do that for your websites. Why not? We live half of our lives in the digital space; cater for them. So, what we really need to do is just be better and make the web a better place.

Thank you.