登录查看更多内容

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.

此文章中的业界达人

由社区从 7 条内容中精选。了解更多

Sharmilee Sarkar

UX Specialist | Conversation Designer | WTM Ambassador
Poonam Deokar

Not at all neurotypical!
齐哈尔阿尔法

数字体验设计师

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.

添加您的观点

Sharmilee Sarkar

UX Specialist | Conversation Designer | WTM Ambassador
(已编辑)
举报内容
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.

已翻译

赞
齐哈尔阿尔法

数字体验设计师
(已编辑)
举报内容
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.??

已翻译

赞

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.

添加您的观点

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.

添加您的观点

Poonam Deokar

Not at all neurotypical!
举报内容
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.

已翻译

赞

加载更多内容

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.

添加您的观点

Magnus Eng?

Interaction Designer at Norkart AS
举报内容
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?

已翻译

赞

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.

添加您的观点

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.

添加您的观点

Poonam Deokar

Not at all neurotypical!
举报内容
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.

已翻译

赞

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?

添加您的观点

Babatunde S.

Senior Product Designer (Lead) at Zarttech
举报内容
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 ??

已翻译

赞

User Experience

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

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

给文章评分

感谢您的反馈

更多User Experience相关文章

更多相关阅读内容

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

给文章评分

感谢您的反馈

查看其他技能