Last updated on Jun 28, 2024

How can you use alternative text and captions to support users with visual impairments?

Users with visual impairments rely on screen readers, magnifiers, or other assistive technologies to access web content. As a UX designer, you can make your user interface more accessible and inclusive by using alternative text and captions for images, videos, and audio. In this article, you will learn what alternative text and captions are, why they are important, and how to create them effectively.

1 What is alternative text?

Alternative text, or alt text, is a brief description of the content and function of an image that is displayed when the image cannot be loaded or is read by a screen reader. Alt text helps users with visual impairments understand the context and purpose of the image, as well as its appearance and details. Alt text should be concise, informative, and relevant to the surrounding content.

Add your perspective

Sharmilee Sarkar

UX Writer | Content Designer | Friends of Figma Speaker
(edited)
Report contribution
Most of us feel lazy to add the alt text and forget that a little context of the images being uploaded can be of huge help for visually impaired users. A little context goes a long way and creates an inclusive environment.

Like

Unhelpful
Alfa Z.

Building Digital Experience Solutions
(edited)
Report contribution
In my UX experience, To make it clear alternative texts is a brief and descriptive text attribute added to an image tag. Its primary purpose is to provide information about the content of the image for users who may have visual impairments or use screen readers. Alternative text is crucial for making web content more accessible. First key Is to describe the content and function of the image concisely. Consider what information someone would miss if the image were not visible.🎯

Like

Unhelpful

2 What are captions?

Captions are synchronized text transcripts of the speech and sounds in a video or audio file. Captions help users with visual impairments follow the dialogue, narration, and sound effects of the media, as well as identify the speakers and their emotions. Captions also benefit users who are deaf or hard of hearing, or who speak a different language than the media. Captions should be accurate, clear, and readable.

Add your perspective

3 Why are alternative text and captions important?

Alternative text and captions are important for several reasons. First, they improve the accessibility and usability of your user interface by making it compatible with assistive technologies and devices. Second, they enhance the user experience and satisfaction by providing equal access and information to all users, regardless of their visual abilities. Third, they boost your SEO and web performance by increasing your content relevance and visibility to search engines and users.

Add your perspective

Poonam Deokar

Not at all neurotypical!
Report contribution
Alternative text and captions are essential for making content accessible to everyone. They enable assistive technologies to describe images and videos, ensuring people with disabilities such as visual impairment, hearing impairment, and cognitive impairment can understand them. Captions also provide extra context, enhancing the overall user experience and making your content more searchable and relevant for SEO.

Like

Unhelpful

4 How to create effective alternative text?

To create effective alternative text, you should use descriptive and meaningful language that conveys the essential information and function of the image. Keep it short and simple, preferably under 125 characters, and include keywords and phrases that match the content and context of the image and the web page. Avoid using phrases like "image of" or "picture of" that are redundant and waste space. Additionally, do not use alt text for decorative or purely aesthetic images that do not add any value or information to the content; instead, use an empty alt attribute (alt="") to indicate that the image can be skipped by screen readers.

Add your perspective

Magnus Engø

Interaction Designer at Norkart AS
Report contribution
It’s really important to remember that the recipient is probably either partially or fully blind and might not have the same context about what things or people look like. Experiment with how you would explain what you actually see in the picture to a blind person. For example: “Bill Gates, founder of Microsoft” would serve well for those how can see the image, but wouldn’t be very meaningful to a blind person. What does Bill Gates look like? What is he wearing? Is he at a special location or event?

Like

Unhelpful

5 How to create effective captions?

Creating effective captions requires following some best practices. Be sure to use proper punctuation, grammar, and spelling for clarity. Additionally, use brackets or italics to indicate non-speech sounds like [music], [applause], or [door slams]. Differentiate between multiple speakers with speaker labels or colors, especially when they are off-screen or not visible. Use upper case letters for emphasis or shouting, such as HEY! or STOP! Syncing the captions with the audio and video is essential, making sure that they are displayed long enough for users to read them comfortably. Lastly, use a contrasting background color and a legible font size and style for the captions, avoiding covering important visual elements with the captions.

Add your perspective

6 How to test your alternative text and captions?

To test your alternative text and captions, you should use different tools and methods to evaluate their quality and effectiveness. For example, you can use a screen reader or browser extension to simulate how users with visual impairments will interact with images and media. Additionally, you can use a validator or checker to make sure the alt text and captions comply with web accessibility standards. Moreover, readability and grammar tools can help verify that your alt text and captions are clear and error-free. Finally, user testing or feedback tools can help collect the opinions of real users with visual impairments and identify any issues or improvements.

Add your perspective

Poonam Deokar

Not at all neurotypical!
Report contribution
It’s a good idea to also add alternative text as the image caption or in comments it helps those with visual perception difficulties access information.

Like

Unhelpful

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

Babatunde S.

Product Design Lead at Zarttech
Report contribution
Guilty as charged 🥲There is no denying that there are number of platforms out there that allows for the use of alt text but for some reason, just like a number of designers out there, I most times find myself not taking advantage of the opportunity to make stories/ideas been shared more accessible to users with forms of impairment. Alt text is an invaluable tool that makes life much easier for everyone, even machines as it aid discoverability. I really should get better in my use of them 💡

Like

Unhelpful

How can you use alternative text and captions to support users with visual impairments?

1

2

3

4

5

6

7

1 What is alternative text?

2 What are captions?

3 Why are alternative text and captions important?

4 How to create effective alternative text?

5 How to create effective captions?

6 How to test your alternative text and captions?

7 Here’s what else to consider

User Experience

Rate this article

Thanks for your feedback

More articles on User Experience

More relevant reading

How can you use alternative text and captions to support users with visual impairments?

1

2

3

4

5

6

7

1 What is alternative text?

2 What are captions?

3 Why are alternative text and captions important?

4 How to create effective alternative text?

5 How to create effective captions?

6 How to test your alternative text and captions?

7 Here’s what else to consider

User Experience

Rate this article

Thanks for your feedback

Explore Other Skills