如何为图像编写良好的替代文字，以帮助屏幕阅读器和盲人理解图片的含义？ [英] How to write good alt text for images to help screen reader and blind user to understand what is picture about?

问题描述

如何为图像写出良好的替代文字，以帮助屏幕阅读器和盲人理解图片的含义？如果我们使用的是Alt文本，那么在特殊情况下（例如菜单图像等）同时使用这两种文本，那么Title = text应该是什么

How to write good alt text for images to help screen reader and blind user to understand what is picture about ? and if we are using Alt text then what should be in a Title="text" if we are using both in special cases like menu images etc

推荐答案

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

You should not make the visually impaired user understand what the image is all about. For the blind, the image effectively doesn't exist, all that there is is the text.

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

The alt text should work as a single sentence/paragraph that can be replaced for the image, convey the same content and still make sense in the context of the adjacent content.

如果图像是是GUI的一部分，则 alt 文本应传达一个动作（动词），行 upvote ，回答此或注销。

If the image is something that is part of the GUI, then the alt text should convey an action (a verb), line upvote, answer this or log out.

您应该使用 链接 ，并尝试了解您的网站。例如，如果有一个饼图，则其 alt 文本应为百分比的小摘要。如果您在博客文章旁边只有一朵漂亮的花，请不要给它发疯的 alt 文字，例如博客文章＃324 的花朵图片伴侣甚至更差的 flower.jpg 。

You should visit your site with links and try to understand your site. If there is for example a pie chart, its alt text should be a small summary of the percentages. If you just have a pretty flower next to a blog post, don't give it an innane alt text like flower image companion of blogpost #324 or even worse flower.jpg.

如果图像对于导航或获取信息很重要，请尝试为其赋予 alt 文本，使站点无需图像即可工作。如果图像仅是呈现图像，请为其提供空白的 alt 文本。

If the image is important to the navigation or to get information, try to give it an alt text that makes the site work without the image. If the image is only presentational, give it an empty alt text.

title 据我所知，仅当悬停时才显示，因此它们应该为图像提供额外的信息，因此信息的不必要重复应避免。对于屏幕阅读器来说，这有点棘手，因为用户之间的支持和配置可能非常不同。

title, as far as I know, should only displayed when hovered, so they should give extra information to the image, so useless duplication of information should be avoided. For screen readers, this is a bit trickier, as support and configuration can be very different between users.

有些经验数据显示标题是无用的：

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


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


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


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


• 屏幕放大镜的用户在较高的放大级别下不能阅读包含超过1个或2个单词的TITLE属性文本。 / li>
  

• Most users of screen reading software do not change their default settings to access the TITLE attribute information on links.
• Most screen reading software can access TITLE attribute content on form controls by default.
• Some screen reading software cannot access TITLE attribute information.
• Users of screen magnifiers can read TITLE attribute text at lower magnification levels.
• Users of screen magnifiers cannot read TITLE attribute text, that contains more than 1 or 2 words, at higher magnification levels.

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

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

Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.

title属性的一个好用法是在链接中添加描述性文本，尤其是当链接文本本身不清楚时描述链接的目的地。这样，您可以帮助访问者知道链接将它们带到何处，有可能使他们免于加载页面而只是发现页面不是他们感兴趣的内容。另一种潜在用途是为图像提供其他信息，例如日期或其他可能不是必需的信息。

One good use of the title attribute is to add descriptive text to links, especially if the link text itself doesn’t clearly describe the link’s destination. This way you can help visitors know where the link will take them, possible saving them from loading a page only to find out it wasn’t anything they’re interested in. Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.

请记住 longdesc 属性应该是链接以获得更多信息，而不是 text ，因为有些人滥用它。

Remember that the longdesc attribute is supposed to be a link to further information, not text as some people missuse it.

这篇关于如何为图像编写良好的替代文字，以帮助屏幕阅读器和盲人理解图片的含义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！