零混乱。管理所有账户,提前安排时间表,随时随地发布,无需多开标签页。
受到超过10,000位创作者的喜爱。
什么是替代文本?
Alt-text(替代文本)是图像的书面描述,当图像无法显示或访问时,可用作文本替换。替代文本最初是为依赖屏幕阅读器的视觉障碍用户设计的,现在它已成为 Web 可访问性、SEO 优化以及确保内容在所有设备和连接速度上保持功能的关键。 Alt-文本作为“alt”属性出现在 HTML img 标记中,应简洁地描述图像的内容和用途。
有效的替代文本具有双重目的:它使所有用户都可以访问内容,同时为搜索引擎提供有关视觉内容的上下文,从而提高用户体验和可发现性。
为什么替代文本对于数字内容的成功至关重要
- 网络辅助功能:确保视力障碍人士和辅助技术人员可以使用内容
- SEO 优势:帮助搜索引擎理解视觉内容并将其编入索引,以提高排名
- 法律合规性:满足 ADA 合规性并避免与无障碍相关的法律问题所必需
- 用户体验:当图像由于连接速度慢或技术问题而无法加载时提供上下文
- 内容理解:增强对文本处理优于视觉信息处理的用户的理解
战略性替代文本实施的主要好处
增强网站可访问性
正确的替代文本可以让全球 2.85 亿视觉障碍人士能够访问视觉内容,确保辅助技术用户平等获取信息并改善用户体验,同时也使具有认知差异或处理偏好的用户受益。
改进的搜索引擎优化
搜索引擎依靠替代文本来理解图像内容,提高图像搜索排名和整体页面搜索引擎优化。精心编写的替代文本可以通过图像搜索结果带来大量流量,并帮助搜索引擎更好地理解页面上下文和相关性。
更好的内容弹性
即使图像由于连接速度慢、技术问题或不同的浏览环境而无法正确加载,替代文本也能确保您的内容仍然有意义且有效,从而在所有场景下保持沟通有效性。
基本替代文本类型和内容应用程序
- 描述性替代文本:照片、插图和图形的图像内容的客观描述
- 功能替代文本:重点关注按钮、链接和交互元素的图像用途和功能的说明
- 装饰性 Alt 文本:空 alt 属性 (alt=""),用于不增加内容价值的纯粹装饰性图像
- 复杂替代文本:简短说明,其中包含指向图表、图表和详细视觉效果的详细说明的链接
- 上下文相关替代文本:根据周围内容和图像用途而变化的描述
有效替代文本背后的辅助功能科学
替代文本的工作原理是为屏幕阅读器和其他辅助技术提供可转换为语音、盲文或其他可访问格式的文本信息。目标是传达视觉用户从图像中接收到的相同基本信息,确保不同能力和技术的相同用户体验。
了解辅助技术如何处理替代文本有助于创建不仅准确,而且对于依赖这些工具进行网络导航和内容消费的用户有用且高效的描述。
如何编写有效的替代文本:完整的写作框架
第 1 步:分析图像用途和上下文
- 确定图像是装饰性的、信息性的、功能性的还是复杂性的
- 考虑图片在周围内容和整体页面用途中的作用
- 识别图像向视觉用户传达的关键信息或消息
- 评估图像是否需要简短描述或更详细的解释
- 考虑受众的需求以及他们遇到图像的背景
第 2 步:撰写清晰、简洁的描述
- 尽可能将描述控制在 150 个字符以内,以获得最佳屏幕阅读器性能
- 从最重要的信息开始,努力提供支持细节
- 使用具体、具体的语言,而不是模糊或主观的描述
- 除非为了清晰起见,否则应避免使用“image of”或“picture shown”等冗余短语
- 包含图片中显示的人物、物体、设置和操作的相关详细信息
第 3 步:针对辅助功能和 SEO 进行优化
- 在准确描述图片内容时自然包含相关关键字
- 平衡 SEO 优化与无障碍需求,优先考虑用户体验
- 使用受众能够理解的行业标准术语和语言
- 确保屏幕阅读器朗读时替代文本有意义
- 避免使用关键字堆砌或不能准确反映图片内容的描述
第 4 步:测试并优化替代文本的有效性
- 使用屏幕阅读器软件测试大声朗读时替代文本的声音
- 让有视力障碍的用户检查您的替代文本是否清晰且有用
- 监控图片搜索性能和流量以评估 SEO 效果
- 进行无障碍审核,以识别和提高替代文本质量
- 当图像更新或上下文发生显着变化时更新替代文本
辅助文本辅助功能和 SEO 成功的最佳实践
- 具体而准确:准确描述图像中的内容,而不是解释或添加假设
- 考虑上下文:编写对周围内容和页面用途有意义的描述
- 保持简洁:高效提供重要信息,避免不必要的细节
- 使用自然语言:使用朗读时自然流畅的清晰对话语言进行书写
- 包含相关关键字:仅在准确描述图像内容时才包含 SEO 关键字
替代文本常见问题解答:辅助功能和 SEO 实施问题
什么时候应该使用空替代文本 (alt="") 与描述性替代文本?
对不会添加信息价值的纯粹装饰性图像(例如背景图案或设计元素)使用空替代文本。对传达信息、展示产品、说明概念或服务于功能目的的图像使用描述性替代文本。如有疑问,请考虑删除图像是否会影响内容理解。
如何为图表或信息图表等复杂图像编写替代文本?
对于复杂图像,请使用简短的替代文本来标识图像类型和主要主题,然后在页面其他位置或通过链接提供较长的描述。例如:alt="销售增长图表显示 3 年内增长 40%",并在随附文本或数据表中提供详细数据。
对于在不同上下文中使用的同一图像,替代文本是否应该不同?
是的,替代文本应反映图像在每个特定上下文中的用途。同一张产品照片可能在类别页面上被描述为“蓝色跑鞋”,但在产品详细信息页面上可能被描述为“蓝色跑鞋,尺寸 9,120 美元”,重点关注与每个页面的用途最相关的信息。
如何平衡 SEO 关键字与替代文本中的可访问性?
可访问性应始终是首要任务。仅当关键字自然且准确地描述图像内容时才包含关键字。关键字填充会降低替代文本对屏幕阅读器用户的用处,并可能损害 SEO。重点关注恰好包含相关搜索词的清晰、准确的描述。
有哪些常见的替代文本错误会损害可访问性和搜索引擎优化?
常见错误包括使用“图像”或“照片”等通用描述、编写过长的描述(让屏幕阅读器用户不知所措)、关键字填充导致语言不自然、描述明显的元素而遗漏重要细节,以及对不同的图像使用相同的替代文本。