8

如何为图像编写好的替代文本以帮助屏幕阅读器和盲人用户理解图片是什么？如果我们使用的是 Alt 文本，那么如果我们在菜单图像等特殊情况下同时使用两者，那么 Title="text" 应该是什么

4

3 回答 3

19

我是一名屏幕阅读器用户，我将使用 Stack Overflow 作为好与坏的示例。

Alt 标签应该是简短的和描述性的。例如，Stack Overflowalt用于支持和反对选项的标签非常好，因为它们不需要很长时间即可阅读并快速到达重点。错误的 alt 标签的例子是让这个问题成为最爱并接受这个答案。这两个标签都不是描述性的，最喜欢的标签只是“ *”并且接受答案标签是“ check”我知道它们是什么的唯一方法是阅读源代码或让有人看到让我知道它们的用途。

至于title属性，我真的没有太多建议。我的屏幕阅读器默认不阅读它们，所以我通常不使用它们。可能有用的一个例子是附加信息。例如，我接受的答案率如此低的原因是因为我无法判断我是否接受了某个问题的答案。如果接受此答案图形上的标题属性会显示类似“单击以接受此答案”（如果答案未被接受）和“单击以删除此答案作为接受的答案”（如果它是已接受的答案）的话，那就太好了.

于 2009-11-16T12:43:55.083 回答
12

您不应该让视障用户了解图像的全部内容。对于盲人来说，图像实际上并不存在，只有文字。

文本应该作为一个可以替换图像的alt单个句子/段落，传达相同的内容并且在相邻内容的上下文中仍然有意义。

如果图像是 GUI 的一部分，那么alt文本应该传达一个动作（动词）、排队投票、回答这个或注销。

您应该访问您的网站links并尝试了解您的网站。例如，如果有一个饼图，它的alt文本应该是百分比的小摘要。如果你的博客文章旁边只有一朵漂亮的花，不要给它一个像博客文章#324 的花图片伴侣或更糟的花.jpgalt这样的无聊文本。

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

title，据我所知，应该只在悬停时显示，所以他们应该给图像额外的信息，所以应该避免无用的重复信息。对于屏幕阅读器，这有点棘手，因为用户之间的支持和配置可能非常不同。

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

  • 大多数屏幕阅读软件用户不会更改其默认设置来访问链接上的 TITLE 属性信息。
  • 大多数屏幕阅读软件默认可以访问表单控件上的 TITLE 属性内容。
  • 某些屏幕阅读软件无法访问 TITLE 属性信息。
  • 屏幕放大镜的用户可以在较低的放大倍数下阅读 TITLE 属性文本。
  • 屏幕放大镜的用户无法在更高的放大倍数下阅读包含超过 1 或 2 个单词的 TITLE 属性文本。

这是一个很好的建议，比我做得更好

使用它来提供不必要的附加信息。大多数视觉浏览器在元素悬停时将标题文本显示为工具提示，但是由浏览器制造商决定如何呈现标题文本。有些会在状态栏中显示文本。例如，早期版本的 Safari 就是这样做的。

title 属性的一个很好的用途是向链接添加描述性文本，特别是如果链接文本本身没有清楚地描述链接的目标。通过这种方式，您可以帮助访问者知道链接会将他们带到哪里，从而可能使他们免于加载页面而只是发现它不是他们感兴趣的任何内容。另一个潜在用途是为图像提供附加信息，例如日期或其他可能不重要的信息。

请记住，该longdesc属性应该是指向更多信息的链接，而不是文本，因为有些人会滥用它。

于 2009-11-16T11:59:44.763 回答
0

我认为最好的做法是将相同的内容放在 alt 和 title 属性中。

关于“写什么”——简单来说就是图片上的内容。

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

于 2009-11-16T11:50:42.450 回答