Alt Rock: Accessible Images for Everyone

Accessible Images
for Everyone

By Ashley Bischoff

tweet along at #AltRock

(You can move between slides with the arrow keys.)

“Do people with disabilities browse the web?”

Yup—they do.

“So how is that possible?”

People who are blind browse the web with a screen reader, which is an app that reads the text on webpages aloud.

“So how do images work, then?”

HTML lets us provide a description that screen readers can announce.

And the HTML for that sort of description looks something like this—

<img src="pictures/andy-samberg-high-fives-a-bobcat.jpg" alt="Andy Samberg leaps toward a bobcat's outstretched paw to exchange a high five">

These types of image descriptions are commonly known as alternative text—or alt text for short—

Because they stand in as an alternative for people who can’t see the image.

So what separates good alt text from rubbish alt text?

Here’s how that tweet looked to sighted people.

Not really how I imagined the second coming. Image: Screenshot of iPhone home screen with a notification from Uber that says, 'Jesus is arriving.'

And if you don’t know what the text in the image says, you miss out on the joke.

Let’s not
do that.

Twitter includes a feature that lets you add alt text behind the scenes when you’re composing a tweet with an attached image.

But Twitter’s “I want to be accessible” setting is turned off by default. 🤔

So let’s turn on that setting before we forget.

(Besides, these steps are a one-time thing.)

Open the Twitter app and go to the Settings—

Twitter app for iOS showing the 'Home' tab.

From the main screen, tap on your avatar to open the sidebar.

Then choose “Settings and privacy.”

(avatar icon → “Settings and privacy”)

Then choose “Accessibility”

The 'Settings and Privacy' screen within the the Twitter app for iOS. An annotation highlights the 'Accessibility' option.

And enable
“Compose image descriptions”

The 'Accessibility' screen within the Settings of the Twitter app for iOS. An annotation highlights the 'Compose image descriptions' toggle control.

So now what?

When you’ve written a tweet that you’d like to add an image to—

The new-tweet screen within the Twitter app for iOS. The user has started typing their tweet: 'Ashley after two happy hours. #ACES2017'

Add a photo to your tweet just like you would normally.

The new-tweet screen within the Twitter app for iOS with an annotation highlighting the 'add picture' button.

The new-tweet screen within the Twitter app for iOS with a draft tweet written and an attached image of a cat wearing a turquoise cardigan.

But now you’ll notice that there’s an extra button—“Add description” ✨

The new-tweet screen within the Twitter app for iOS with a draft tweet written and a static image of a cat wearing a turquoise cardigan has been added to the tweet. An annotation highlights the 'Add Description' button that now appears overtop the image.

Tap on that and describe the image
as best as you can.

The new-tweet screen within the Twitter app for iOS with a draft tweet written and an attached image of a cat wearing a turquoise cardigan. An annotation highlights the textbox where users can type in a description of the image after having pressed the 'Add Description' button that was overtop the image.

The new-tweet screen within the Twitter app for iOS with a draft tweet written and an attached image of a cat wearing a turquoise cardigan. The user has also typed in a description for the image that they added to the tweet: 'A brown and white cat wearing a turquoise cardigan sits slumped in a chair.'

And then tweet it!

“So what do you mean, ‘Describe the image as best as you can’?”

As a rule of thumb—

Think of writing alt text for an image as if you’re describing the image to someone over the phone.

See if you can picture the tweet that’s being described here.

Is this what you pictured?

Here’s the text that went into that description—

alt="Behind World Wildlife Foundation logo panda, a similarly Frank Miller-esque panda stands poised to strike down upon it with one of those metal chairs you'd find at a local AA meeting, his mouth agape with the fury of any WWF wrestler condemning his opponent. Believe it's an illustration by GLENNZ, the most important illustrator of our time."

So all that is to say—

Yeah, it might sometimes take a couple of sentences to fully describe an image.

So who wants to try some?

If you get stuck, this article from Phase2 shares a bunch of tips on writing great alt text: http://bit.ly/altadvice

How might you describe this image?

Tweet from LoudPVCK: 'Stand up for what you believe in'. Image: Amid a protest march in which many participants are wearing pink hats, a boy enthusiastically holds up a sign that reads 'I [heart] Trains.'

Suggested potential alt text: Amid a protest march in which many participants are wearing pink hats, a boy enthusiastically holds up a sign that reads 'I [heart] Trains'

Or how might you describe this image?

Tweet from Carlos Shook: 'My sister proposed to her GF today and look at that older woman's reaction'. Image: Two women stand inside what appears to be a museum, surrounded by sculptures. As one woman proposes to the other, placing a ring on the other woman's finger, an older woman who is sitting nearby looks on with sheer joy.

Potential alt text: Two women stand in a museum, surrounded by sculptures. As one woman proposes to the other, placing a ring on the other woman's finger, an older woman who is sitting nearby looks on with an expression of sheer joy.

Or how about the image on this tweet?

Tweet from Pointless Letters: 'I'm not expressing any sort of opinion at all. I'm just observing. That's all. Absolutely no bias here. Nope.' Image: A letter sent to the news paper with the headline 'Whichever way you spell it, First Minister is bad news. The body of the letter reads, 'I was wondering how many Daily Express readers have noticed that the letters comprising the name Nicola Sturgeon can be arranged to become 'a cool insurgentg,' 'one cursing a lot,' 'gone ultrasonic,' 'neurotic slogan,' and 'counting a loser.' I express no opinion on this subject, it is merely an observation. [Signed] Des Turner, Sutton-in-Ashfield, Notts

Suggested approach: Transcribe the text within the screenshot verbatim—yup, all of it—and use that as the image’s alt text.

(Twitter lets you use up to 420 characters to describe each image.)

This one may be hard, but how might you approach this?

Tweet from @VesselCat: My women's history professor handed this out, just some easy tips to prevent sexual assault. Image: Sexual Assault Prevention Tips: 1. Don't put drugs in people's drinks in order to control their behavior. 2. When you see someone walking by themselves, leave them alone! 3. If you pull over to help someone with car problems, remember not to assault them! 4. Never open an unlocked door or window uninvited. 5. If you are in an elevator and someone else gets in, don't assault them! 6. Use the buddy system! If you are not able to stop yourself from assaulting people, ask a friend to stay with you while you are in public.

Suggested approach: Transcribe the text in the image and use as much as will fit within Twitter’s 420-character limit for alt text; then write up a blog post with the full text of the image and include a link to that blog post in the tweet.

So all this stuff is just as easy when you use GIFs, right?

Jerry Seinfeld and George Constanza look at each other and exclaim 'Nope'

It turns out that Twitter doesn’t support alt text for animated GIFs.

So for tweets with GIFs, your best option is to add a description within the body of the tweet.

Let’s suppose that you had wanted to write a tweet with this GIF—

A polar bear trods sullenly along the snow without lifting its head or torso from the ground

First up: Write the text of your tweet.

The new-tweet screen within the Twitter app for iOS.

Then add the GIF normally.

Then, after your text, write “alt = ” and a description of the GIF.

“So how can I remember to do this stuff?”

Follow @PleaseCaption for friendly alt-text reminders

Screenshot of Please Caption's Twitter page. An annotation highlights Please Caption's Twitter bio, which says, 'I'm a bot that reminds you to caption your tweets! If you would like to be reminded, follow me and I'll follow you back. @stillinbeta made me

Recap—

Write alt text for your tweets as if you’re describing the image to a friend over the phone.
If you use an animated GIF, add your description as part of the tweet’s text.
Follow @PleaseCaption to help with reminders.
Pay it forward—let your friends know how they can do this too.

Accessible Images for Everyone

“Do people with disabilities browse the web?”

Yup—they do.

“So how is that possible?”

“So how do images work, then?”

HTML lets us provide a description that screen readers can announce.

Because they stand in as an alternative for people who can’t see the image.

So what separates good alt text from rubbish alt text?

Here’s how that tweet looked to sighted people.

Let’s not do that.

But Twitter’s “I want to be accessible” setting is turned off by default. 🤔

So let’s turn on that setting before we forget.

Open the Twitter app and go to the Settings—

And enable“Compose image descriptions”

So now what?

Tap on that and describe the imageas best as you can.

“So what do you mean, ‘Describe the image as best as you can’?”

Think of writing alt text for an image as if you’re describing the image to someone over the phone.

See if you can picture the tweet that’s being described here.

Is this what you pictured?

Here’s the text that went into that description—

Yeah, it might sometimes take a couple of sentences to fully describe an image.

So who wants to try some?

How might you describe this image?

Or how might you describe this image?

Or how about the image on this tweet?

This one may be hard, but how might you approach this?

So all this stuff is just as easy when you use GIFs, right?

So for tweets with GIFs, your best option is to add a description within the body of the tweet.

Let’s suppose that you had wanted to write a tweet with this GIF—

Then, after your text, write “alt = ” and a description of the GIF.

“So how can I remember to do this stuff?”

Recap—

Thanks!

Accessible Images
for Everyone

Let’s not
do that.

And enable
“Compose image descriptions”

Tap on that and describe the image
as best as you can.