如何为可访问性和 SEO 的图像创建替代文本
已发表: 2018-06-12如果您创建或发布任何类型的数字内容,那么您现在可能至少已经听说过创建可供残障人士访问的内容的重要性。 替代文本(也称为“替代文本”)有助于确保盲人或视力障碍者,或可能有其他身体或认知障碍的人能够访问和理解图像、图表和图形等视觉内容。
在美国,美国残疾人法案 (ADA) 要求残疾人可以访问所有数字内容。 其他国家有自己的要求。 对于使用屏幕阅读器或其他辅助技术访问数字内容的人来说,可访问的内容对于确保他们能够以与不需要帮助的人相同的方式访问和理解内容至关重要。
什么是替代文字?
替代文本最简单的形式是添加到数字图像中的背景代码,允许屏幕阅读器或其他辅助技术向那些看不到图像或可能由于以下原因无法处理图像的人描述图像的内容和含义认知障碍。
它以多种方式使用:
- 屏幕阅读器和其他辅助技术使用它向用户描述图像,以便他们可以访问和理解内容。
- 在图像被阻止的浏览器中,替代文本显示在图像的位置。
- 搜索引擎使用它来确定图像的内容和上下文。
屏幕阅读器可以判断图像何时出现,但无法分析其内容。 替代图像被读取以代替图像,以使用户了解图像的含义和上下文。
如何在图像中添加替代文字
不幸的是,没有一种方法可以添加替代文本。 不同的软件平台以不同的方式做到这一点。 查看您的软件文档或帮助文件,了解如何在该平台内为您的图像添加替代文本。
例如,在 Microsoft Word 中,右键单击图像并选择添加替代文本。 然后,将您的文本添加到打开的侧栏中的替代文本窗口中。 完成后,只需关闭侧边栏,您的替代文本将与图像一起保存。
替代文字与字幕
替代文本和标题在许多方面都相似。 两者都提供了图像的描述以及图像如何与其余内容相匹配的上下文。 然而,替代文本通常在“幕后”,而标题对访问页面的任何人都是可见的。 此外,标题可能并不总是包含对图像及其内容的完整描述,因为它们通常用于增强可见图像或为可见图像提供上下文。
但是,字幕对于可访问性目的可能更有用。 字幕对于可能需要大量替代文本才能准确描述的图像特别有用。 与其创建冗长且不太有用的替代文本,不如使用标题进行更长的描述。 然后,替代文本可以给出图像的简要描述,并建议用户查看标题以获得更完整的描述和/或上下文。
替代文本最佳做法
创建好的替代文本不是一门科学——它更像是一门艺术。 太短,可能无法提供足够的细节。 太长了,可能会很乏味。 但是,当您创建替代文本时,请记住以下几点。
1.准确描述图像的内容和功能
使用辅助技术的人依赖 alt 文本的内容,不仅可以为他们提供图像包含的内容,还可以提供图像的任何上下文(如果它不容易获得)。 根据图像的复杂性,最好在内容的文本中提供上下文以避免替代文本过长。
2.越短越好,但不能太短
替代文本的主要问题之一是长度。 许多屏幕阅读器* 将阅读所有或不阅读所写的替代文本。 换句话说,使用辅助技术的人通常无法跳过以查找更多相关内容或暂停并返回他们不理解的内容。 如果最相关的内容位于替代文本的末尾,则用户必须先听完所有不相关的信息,然后才能发现包含图像的原因。
提供足够的细节来准确地描述图像,但要避免微小的细节,这些细节不一定能增强包含图像的意义。
例如,在上图中,您可以通过多种方式来描述它,具体取决于它在周围内容的上下文中试图传达的内容。
将其描述为计算机屏幕会很诱人。 而且,在某些情况下,这可能就足够了。 但是,在一篇关于使用屏幕模糊来隐藏敏感信息的文章中,您可能需要将图像描述为计算机屏幕,并且为了隐私而模糊了文件树。
如果文章是关于特定类型的编码并且图像试图显示该代码的示例,您可能需要更详细地了解显示的代码。
或者,也许这篇文章是关于计算机屏幕上斜角的宽度,所以需要对此进行详细说明。
从这个意义上说,创造好的替代文本更像是一种艺术形式,而不是一门科学。 您的 alt 文本应该足够长以准确描述图像,但又不能太麻烦。
3. 使用正确的标点和拼写
大多数屏幕阅读器* 会完全按照其显示的方式阅读替代文本,包括拼写和标点错误。 在 Microsoft Word 等程序中,无法检查替代文本的拼写或语法,因此您需要格外小心。
同样,您必须使用正确的标点符号,否则您的替代文本可能听起来像一个非常烦人的连续句子,或者更糟糕的是,根本没有任何意义。
事实上,创建一个新文档并不是一个坏主意,您可以在其中使用 Word 的内置拼写和语法检查器编写替代文本,然后,当您满意并且没有错误时,将其复制并粘贴到替代文本中您正在使用的任何软件的文本窗口。
大多数现代浏览器会自动检查拼写,因此如果您在内容管理系统 (CMS) 或 Google Docs 中编写内容,您的拼写和语法可能会被检查,但无论如何校对都是很好的做法。
专业提示:确保您的内容审阅者也检查以确保您的替代文本是对图像的正确描述,使用正确的拼写和语法,并且在审阅您的其余内容时清晰简洁。
4. 可访问性不需要标题,但出于其他原因它可能会有所帮助
从可访问性的角度来看,没有必要给你的图像一个标题。 大多数屏幕阅读器甚至都不会打扰它。 但是,当浏览您网站的人将鼠标悬停在图像上时,标题将显示为工具提示。 标题还可以帮助搜索爬虫更好地掌握图片的内容和目的。

也就是说,您永远不应该牺牲准确描述图像的清晰简洁的替代文本,以在 SEO 量表上获得一两个额外的分数。
5. 不要包含“image of”、“photo of”等。
当屏幕阅读器遇到图像时,它会告诉用户它遇到了图像。 因此,如果您的 alt 文本包含短语“image of”,屏幕阅读器会显示类似“Image. 电脑屏幕的图像……”
6.如果您的图片包含文字,则必须包含在替代文字中
由于图像中的任何文本都不会被屏幕阅读器读取,因此如果它与图像的含义和与周围内容的上下文相关,则必须将其包含在替代文本中。
查看上面的图片,根据上下文和意图,可能有必要在标志上写的替代文本中描述“问更多问题”。 如果值得注意的是更好地理解意图,您可能还需要描述文本是全大写的。
但是,在一篇关于如何在墙上放置标志的文章中,标志的实际文本并不重要,您可能只需要描述图像显示的标志位于两个挂钟之间。
如上面的替代文本与标题部分所述,如果图像包含大量文本,通常最好将此信息包含在标题中。 您也可以将其包含在周围的文本内容中。 在这些情况下,您需要在替代文本中注明有关图像的更多信息包含在文本的标题或正文中。
由于保持替代文本相对简短的准则,对于带有标记和文本的图像,就像您可能在 Snagit 中创建的那样,我建议使用标题或周围的文本来描述相关的标记和文本。 这对用户来说将更加容易和有用。
7.不要依赖你的可访问性检查器
许多内容创建工具,例如 Microsoft Word 和 Adobe Acrobat,都带有有用的可访问性检查器。 他们扫描内容并寻找内容创建者所犯的可能导致内容无法访问的典型错误。 它们很棒,您绝对应该使用它们来检查您的内容。
但是有一个问题:您的可访问性检查器可以检查替代文本是否存在,但它不能确定替代文本的质量。 出于这个原因,最好让您的内容审阅者仔细检查您的替代文本内容,以确保其有用且正确。
8. 带有链接的图片必须在替代文本中包含链接目的地
可访问内容的另一个方面是所有超链接都应该向用户描述它将把它们带到哪里。 因此,“单击此处”或“访问我们”之类的链接通常是禁忌。
同样,作为链接的图像也应该向用户描述链接将把他们带到哪里。 例如,如果您的页面上有一个按钮,上面写着“下载免费试用版”,那么您的替代文本应该是“链接:下载免费试用版”。
图表、图形和表格的替代文本
当涉及替代文本时,图表、图形和表格提出了一个特别棘手的问题。 因为它们倾向于提供相对大量的信息,所以任何替代文本最终都可能会变得很长并且难以理解。 因此,我强烈建议使用准确描述图表或图形内容及其与其他内容相关性的标题。 然后,您的替代文本可以只描述图表的标题,并注意标题或文本内容中提供了内容的完整描述。
您如何向看不到它的人描述上面的图表(来自我们最近关于我们对工作场所沟通的原始研究的文章)? 请记住,您的替代文本(或者更有可能是内容的标题或正文)需要提供所有相关信息,以便他们可以像可以看到它的人一样理解它。
在这篇博客文章中,由于图表中的信息不一定与我试图提出的观点相关,我可以简单地将其描述为千禧一代对工作中的视觉工具偏好的复杂信息图表。 如果这篇文章是关于研究的,我需要在替代文本中描述实际内容,或者更恰当地在周围内容的正文中描述。
与图像不同,屏幕阅读器可以访问大多数表格。 如果他们选择,用户可以在表格中移动以获取相关信息。 但是,替代文本可以提供表格的简要说明和其中包含的内容的概述,以便用户可以决定是否要访问表格。
替代文字和搜索引擎优化
替代文本对于创建可访问的内容至关重要。 但是,它有一个好处:它还可以帮助 SEO!
也就是说,创建替代文本的最高和最佳目的是提高数字内容的可访问性。 试图通过用不适当的关键字或其他不相关信息填充替代文本来欺骗系统实际上可能是有害的。
在 Google 关于图片发布的这篇文章中,他们指出他们使用图片替代文本来了解图片的主题以及它与其他内容的关系。 他们还建议创建替代文本,重点是“创建有用的、信息丰富的内容,这些内容适当地使用关键字并在页面内容的上下文中。” Google 指出,填充不适当关键字的替代文本或与图像或页面内容的其余部分无关的替代文本有可能使您的网站被视为垃圾邮件。
同样,最流行的 WordPress SEO 插件之一的制造商 Yoast 建议确保您在可能和适当的时候使用您的文章关键字,但他们明确表示不要将您的关键字塞入所有替代文本中。
虽然这是为图像和 SEO 创建替代文本的基础知识的一个很好的概述,但它肯定不是硬道理,也不是主题。 许多组织都有自己的创建替代文本的指南,而其他组织甚至可能根本没有意识到他们需要它!
您是否正在为数字内容中包含的图像创建替代文本? 我很想听听您的建议、想法和努力!
*注意:由于各种辅助技术处理图像和替代文本的方式存在差异,本文并非旨在全面概述所有辅助技术的行为方式。 相反,请考虑此处的建议,这是一组指导方针,以确保大多数人可以访问图像的替代文本。