如何为图片编写良好的alt文本以帮助屏幕阅读器和盲人用户了解图片内容？

Question

如何为图片编写良好的alt文本以帮助屏幕阅读器和盲人用户了解图片内容？

usabilityaccessibilityw3cwcag

9

如何编写良好的图像替代文本以帮助屏幕阅读器和盲人用户了解图片内容？如果我们使用Alt文本，那么在特殊情况下（如菜单图像等），Title =“text”中应该包含什么？

- Jitendra Vyas

这可能是一篇很有用的文章：https://www.sitelint.com/blog/best-practices-for-writing-good-alt-text/ - Cezary Tomczyk

这可能是一篇很有用的文章：https://www.sitelint.com/blog/best-practices-for-writing-good-alt-text/ - undefined

3个回答

12

你不应该让视力障碍用户理解图片的全部内容。对于盲人来说，图片实际上不存在，只有文本。 alt文本应该作为一句话/段落工作，可以替换图片，传达相同的内容，并在相邻内容的上下文中仍然有意义。

如果图片是GUI的一部分，则alt文本应传达一个动作（动词），例如upvote、answer this或log out。

您应该使用links访问您的网站并尝试了解您的网站。例如，如果有一个饼图，则其alt文本应该是百分比的小总结。如果您只在博客文章旁边放了一朵漂亮的花，不要给它一个无聊的alt文本，如flower image companion of blogpost #324或更糟糕的是flower.jpg。

如果图片对导航或获取信息很重要，请尝试为其提供一个使网站在没有图片的情况下正常工作的alt文本。如果图片只是表现性的，请给它一个空的alt文本。

title，据我所知，应该只在悬停时显示，因此它们应该为图像提供额外的信息，因此应避免无用的信息重复。对于屏幕阅读器来说，这有点棘手，因为支持和配置可能因用户而异。

一些经验数据显示title是无用的：

大多数屏幕阅读软件用户不会更改默认设置以访问链接上的TITLE属性信息。

大多数屏幕阅读软件可以默认访问表单控件上的TITLE属性内容。

一些屏幕阅读软件无法访问TITLE属性信息。

屏幕放大器用户可以在较低的放大级别下阅读TITLE属性文本。

屏幕放大器用户无法在更高的放大级别下阅读包含1或2个以上单词的TITLE属性文本。

这是一个很好的建议, 比我能说得更好

使用这个属性提供额外信息，但它不是必须的。大多数可视化浏览器将title文本显示为工具提示，然而浏览器制造商决定如何呈现title文本。有些浏览器会在状态栏中显示文本。Safari的早期版本就是这样做的。

使用title属性的一个好方法是为链接添加描述性文本，特别是如果链接文本本身没有清楚地描述链接的目标。这样，您可以帮助访问者知道链接将把他们带到哪里，可能避免加载一个页面，只发现它不是他们感兴趣的东西。另一个潜在的用途是为图像提供额外的信息，例如日期或其他可能不是必需的信息。

请记住，longdesc属性应该是进一步信息的链接，而不是一些人误用的文本。

- Esteban Küber

如果存在替代文本，那么该图像是存在的。例如，即使它不是链接，我仍然可以在StackOverflow上投票（对图像）。 - Jared

@Jared：我的意思是让你感觉这个页面只用了文字，而不是你错过了一些东西，比如<img src="my-image.gif" alt="my-image.gif">或<img src="smiley.gif" alt="an image of a smiley">这样的东西，它们除了更多的文本外并没有给你任何其他的东西。 - Esteban Küber

0

我认为最佳实践是在alt和title属性中放置相同的内容。

关于“写什么”-只需简单地用几个词描述图片上的内容。

请查看这篇文章，其中很好地描述了alt属性：http://www.cs.tut.fi/~jkorpela/html/alt.html

- Piotr Rochala

3

首先，alt和title是属性而不是标签。其次，如果我们将相同的内容放在alt和title中，屏幕阅读器将重复这个内容两次，这是没有意义的。 - Jitendra Vyas

公正的观点，应该使用属性而不是标签。根据您使用的屏幕阅读器，您可以设置要读取哪个属性。 - Piotr Rochala

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jared · Accepted Answer

我是一个屏幕阅读器用户，以 Stack Overflow 为例分别说明好的和不好的。

Alt 标签应该简短且描述准确。例如，Stack Overflow 的投票上和投票下的 alt 标签很好，因为它们不需要花费太长时间去阅读，而且能够快速地表达意思。坏的 alt 标签的例子有将问题标记为喜爱和接受答案。这两个标签都不具有描述性，喜爱标签只是一个“*”号，而接受答案的标签则是“check”。我唯一能够知道它们的方式是通过阅读源代码或者让视力正常的人告诉我它们的用途。

至于 title 属性，我没有太多建议。我的屏幕阅读器默认不会读取它们，所以我平时不使用它们。一个可能有用的示例是附加信息。例如，我的被接受答案率之所以很低，是因为我无法判断自己是否已经接受了问题的回答。如果接受答案的图标上的 title 属性能够显示类似“点击接受此答案”的信息，那就太好了；如果是已经接受的答案，则显示“点击取消此答案的接受状态”。