Writing accessible image descriptions (Alt Text) for people experiencing difficulties with their vision

Aisha, is a young thoughtful blonde girl. A cute little orange-colored owl is sitting on her shoulder and speaking secretly in her ears. Becky, a young girl, who lost her vision recently is trying to log into Asana mobile app.

Aisha, is a UX writer, who is trying to learn how to write image descriptions for people experiencing difficulties with their vision.

The little owl is a symbol of a wise UX expert, who teaches Aisha how to write accessible image descriptions.

Alisha (UX Writer):

How do I make my image descriptions (Alt Text) accessible for people experiencing difficulties with their vision?

Owl (wise UX writing expert):

It’s quite easy and interesting. First, tell me, how do you add image descriptions (Alt Text) to images?

Alisha:

I open the image in the edit mode on the web page. In the Image Alt Text field, I enter and save my description for this image.

Owl:

Alright! That’s quite simple. Do you know you can also add image descriptions to Alt, Alt Text, and Longdesc HTML5 attributes?

Alisha:

I never heard about the longdesc attribute earlier.

Owl:

Learning is always exploratory and fun. These attributes can help you make images accessible to everyone.

Alisha:

That would be great! Please tell me how to make images accessible to everyone.

Owl:

Just add image descriptions to one of these three HTML5 attributes and then create accessible audio content from these descriptions.

Alisha:

I never had an opportunity to write image descriptions earlier.

Owl:

Let us learn how to write image descriptions with an interesting example of the Asana Login screen.

Here is the Asana Login screen

This Asana Login screen helps you log into Asana without a password.

Owl:

Would you like to take a shot at writing an image description for the Asana Login screen?

Alisha:

Yep! How does my image description sound? I will read out my image descriptions to you.

“This is the Asana Login screen image. It helps you email the Asana magic link. This link helps you log into Asana without entering your Asana password.”

Becky:

Alisha, it sounds too techie. Can you make it user-friendly and concise?

Owl:

Alisha, it just associates the goals of the Asana Login page and image. Let us refine the description as per the image description checklist.

Alisha:

Sure, I am curious to learn more.

Owl:

Alisha, here is a simple checklist for writing image descriptions:

1.    Explain the image in max 23 to 25 words concisely and clearly.

2.    Describe the function of an image and its relation with the web page topic.

3.    Describe the function of the buttons, links, and UI controls present on it.

4.    Write and associate image descriptions with the web page and image goals.

5.    Focus on what you see in the image.

6.    Stay away from providing your own interpretations of the image.

7.    Provide the name of the web page that opens a hyperlinked image is clicked.

8.    Do not repeat words in the image description.

9.    Do not include and repeat the text seen on an image in the image description.

10.          Do not write long fragments.

11.          Do not exceed 125 characters limit.

12.          Do not include words such as image, photo, picture, or drawing.

13.          Do not include descriptions for decorative images.

14.          Convey the intended meaning of an image, do not literally describe it. (Literal description of an image is unable to convey the real meaning in case of a humorous image.)

15.          Tune the image description as per the context of the web page and topic.

Alisha:

Is that all? It is quite straightforward. Let me refine it. How does version 2 of my image description sound?

(Alisha reading out)

“This is the Asana Login page. To login without your password, click on the Email magic link button.”

Owl:

I notice that your refined description follows checklist items [1, 4, 6, 8, 9, 10, 11,12] and omits these words: image, photo, picture, and drawing from it.

Becky:

Alisha, this description does not tell me what happens after I click on the Email magic link button.

Alisha:

Becky, is this updated description more helpful to you?

“This Asana Login screen helps you log in without your password by clicking the Email magic link button and the link received in your email.” 

Becky:

Now, the login process is completely clear to me. Alisha, your description is concise and clear.

Alisha:

(Alisha is confused). Now, what image description do I enter in Alt, Alt Text, and Longdesc?

Owl:

Alisha, don’t worry, I am here to guide you:

Enter the following shorter image description in the Alt attribute:

<img Alt="This Asana Login screen helps you log into Asana without a password.”> 

Enter the following long image description in the Alt Text attribute:

<img Alt Text="This Asana Login screen helps you login without your password by clicking the Email magic link button and link received in your email.”>

Enter the following longer image description in the longdesc attribute within single quotes:

<img Longdesc=’This is the Asana Login screen. The screen shows an envelope icon, a button, and a hyperlink. The Email magic link button sends the magic link to your email. To login without your password, click on the Email magic link button. Click on the magic link received in your email. The Asana Home page is displayed to you. Ignore the Or type password link.’>

It is recommended that you save the longer image description in an HTML file. Then, provide the file name and file URL to Longdesc instead of directly entering the image description in Longdesc.

For example:

<img src="Asana-Login-Page.jpg" alt="Asana Login page helps you log in without a password" longdesc='https://websitename.com/long-description.html?image= Asana-Login-Page.jpg'>

You can save your description in all types of file types such as .txt, PDF, .ppt, and so on.

Aisha:

Sure, that’s a good suggestion. I feel the longer image description for Longdesc is too descriptive.

Owl:

You are right Alisha. However, sometimes to describe a complex image or a graph, you might need to include a longer image description. Next, we are going to see how the description for the same image needs to change when the same image is used for different goals, purposes, and businesses.

Aisha:

Are there any writing tools that can help me with writing UX copy easily for images?

Owl:

Alisha, Dittowords and Prowriting are excellent UX writing tools that can assist you in writing UX copy and accessible image descriptions. If you need any help in learning more about accessible and inclusive UX content, you can write to me at vinaydbhagat@protonmail.com.