编写有效 Alt 文本以提升无障碍性和 SEO 的终极指南

将 alt 文本写成一个简洁、描述性的句子，解释图像显示的内容以及它为什么对人们重要。 对于每个图像，清晰的描述有助于辅助技术向依赖屏幕阅读器的用户传达上下文。

Alt 文本还支持搜索可见性。它使搜索引擎能够理解您网站上的内容并索引与周围描述相关的图像。一个精心制作的描述可以启用数千次搜索，并将用户与正确的产品或功能连接起来。良好的 alt 文本有助于无障碍性，加强用户体验，并帮助搜索信号与页面上下文对齐。保持语言简单，避免杂乱，让图像在页面的上下文中自我描述。

指南：对于每个图像，编写一个具体的描述，注明主体、动作和上下文。对于产品，命名产品、颜色和主要功能。使用精确术语而不是通用标签，并检查文档以保持与网站内容策略的一致性。最有效的 alt 文本会丰富页面，而不是重复周围文本中已经陈述的内容。

野生动物图像示例：山雀栖息在靠近喂食器的树枝上。Alt 文本可以是：“两只山雀栖息在花园中鸟类喂食器附近的树枝上。” 这清晰地传达了场景，并帮助用户在不看到图像的情况下理解它。有些图像可能只显示一个小功能；在上下文中描述其功能，例如，“站点头部中栖息在树枝上的山雀图标。”

最后，进行快速检查：在起草后，让团队成员批准 alt 文本，以确保准确性和与文档的一致性，然后在网站上发布。

编写 Alt 文本的终极指南：用于无障碍性和 SEO；何时使用 alt 文本

从一个简洁、信息丰富的 alt 文本开始，描述图像传达的内容及其在页面上的正确角色，以供屏幕阅读器使用。这种方法适用于从小型图标到复杂图表的各种内容，并帮助用户在无法查看图像时理解周围内容。

关于要描述的内容，专注于内容和功能。如果图像是装饰性的且不添加任何含义，则省略 alt 文本或设置空 alt 属性，以免中断屏幕上的流程。

使用 alt 文本来传达信息的图像：图表、图解、照片、徽标或任何有助于信息的视觉元素。如果图表显示 Excel 图表中的趋势，则描述轴和趋势线；如果沙漠场景或鸟类图片是焦点，则注明主体和设置。当颜色承载含义时，提及它们（例如白色背景配粗线）。如果图像中出现野生动物如山雀，则描述动物及其动作。保持描述简单，避免描述每个像素。对于大型图表，提供简短描述并在下方链接到更长的说明或指南。

两个实用示例有助于说明技巧：“鸟类栖息在带有白色边框的窗格上，俯瞰沙漠景观”和“Excel 图表显示第二季度销售额上升 14%。” 如果图像包含文本，则在引号中包含确切的词语（引号围绕口头文本澄清意图）。对于装饰性图标或按钮，使用简短标签如“搜索图标”或“Word 文档图标”以保持导航顺畅。

创作者注意事项：使用多样化的视觉集练习，并保持一致的风格。本指南支持信息性描述，帮助依赖屏幕阅读器的观众，并为项目提供清晰的基准——无论您是在网站、博客还是产品页面上工作。使用真实世界示例，与同行审查，并构建一个简单的 Excel 表格来跟踪更改并反映资产中的稳定功能。

在 HTML 中，alt 文本出现在 img 元素的 alt 属性中。自动 alt 文本可能有帮助，但应审查其准确性，因为上下文很重要。如果图像是装饰性的，则省略 alt 文本，让辅助技术专注于有意义的内容。当需要覆盖复杂视觉、图表或图表时，将 alt 文本与链接页面的更长描述配对。

何时添加 Alt 文本：范围、触发器和实用指南

在发布时或内容刷新期间，为每个有含义的图像添加简洁的 alt 文本；这有助于依赖辅助技术的用户，并改善网站的 SEO，并解释图像在文章中的角色。

范围：传达信息的图像包括对象、图表、图标和图解；头部或边框中的栖息元素，如橙色徽章，应有解释其角色和对文章添加内容的 alt 文本。有些图像只有与文本配对时才显示含义，因此了解哪些需要 alt 文本，哪些可以较少描述。

触发器：在编写新图像、替换媒体或跨站点重用资产时添加或更新 alt 文本；检查 alt 文本是否与显示的内容匹配，特别是对于图表和图解，并确保它与周围内容流程对齐。

实用指南：保持 alt 文本简洁；对于基本对象，使用 1-2 个简短短语描述功能或目的；对于图表，解释功能和主要流程；对于图表，总结趋势或关键值；对于包含可见文本的图像，在 alt 描述中显示该文本；有些情况下通用描述不足——在那里，提供一个捕捉含义的具体 alt；对于装饰性图像或不清晰的视觉，使用空 alt 或简短说明反映其信息角色。

审查和协作：创作者应与编辑和设计师检查，使用实际用户测试 alt 文本，并验证含义在设备间保持。使用基本检查列表确认文章覆盖，并确保无障碍性保持强劲。

定义 Alt 文本：要描述什么和要排除什么

用一个简洁的句子描述图像的目的，然后添加一个覆盖主要主体和上下文的信息性描述。包括谁或什么出现、任何动作和设置，以帮助用户理解显示的一切。

• 要描述的内容
  • 主体和动作：识别人、动物（例如栖息在树枝上的山雀）或对象，如品牌、产品或工具。
  • 图像中的文本：精确转录引号或短语，如出现的数字或日期。
  • 上下文和目的：解释图像在此条目中存在的原因以及它传达的关于周围内容的含义。
  • 品牌和风格：命名品牌并注明视觉风格或图标，如果它澄清含义。
  • 图形内容：对于图表或图表，总结趋势、标签、轴和关键数据点。
  • 产品和优惠：描述产品、型号、颜色和任何可见优惠或折扣。
  • 颜色、布局和构图：如果影响理解，提及主导颜色以及任何可见布局提示。
  • 位置和时间：如果相关，包括场景发生的位置和时间。
  • 长度和语气：保持信息性和中性，选择匹配用户期望的语言。
  • 流程和可读性：结构化描述，以便屏幕阅读器能自然跟随，避免不连贯的短语。
• 要排除的内容
  • 仅装饰性图像：如果图像不提供信息内容，使用空 alt 属性（空）或标记为装饰性。
  • 冗余细节：跳过华丽或多余的语言，如果它不帮助理解。
  • 非信息性视觉：避免描述背景噪音或无关氛围，除非它改变解释。
  • 无关上下文：排除图像中不可见的切线主题。
  • 重复描述：不要重述周围文本已经传达的信息。
• 实用指南
  • 指南：遵循 WCAG 友好实践，并针对无障碍性和 SEO 目标审查。
  • 长度：针对标准图像大约 125–160 个字符；复杂图表或流程密集场景可能需要长描述。
  • 术语选择：选择与品牌声音和消费者期望对齐的语言，包括可见的产品名称和优惠。
  • 一致性：在条目中保持稳定风格，在适当位置标记相关细节如品牌、产品和颜色。
  • 审查：使用快速审查测试 alt 文本，确保它解释所有基本内容而无多余。
• 示例和方法
  • 条目示例：“山雀在黄昏时栖息在松树枝上；周围是柔和的蓝天和松针；喂食器上有可见的品牌贴纸。”
  • 图表示例：“线图显示截至第三季度的月销售额，轴标记为收入（美元）和月份，按产品类别颜色编码。”
  • 引号示例：“图像显示引号‘限时优惠’带有红色徽章；如果它指导用户动作，则包括确切措辞。
  • 描述方法：解释有视力的用户会注意的一切，然后与周围指南或审查说明验证。
• 保持可操作性
  • 条目和描述对齐：每个图像条目应有匹配可见内容和目的的描述性 alt 文本。
  • 流程和简洁：制作阅读顺畅的句子，避免杂乱并保持描述信息性。
  • 长形式情况：对于复杂视觉，提供解释关系和结果的更长描述，然后用简洁的 alt 句子总结。
• 快速检查列表
  • 它解释了图像的目的吗？是/否
  • 所有基本元素是否被描述（包括引号或优惠）？是/否
  • 装饰性内容是否标记为空？是/否
  • 语气是否中性和信息性？是/否

为屏幕阅读器描述视觉内容：具体短语模式

从对象及其动作开始，然后在简洁的行中添加上下文。这有助于读者一眼理解场景，并保持阅读节奏稳定，即使内容复杂如图表或图表。

根据内容类型选择模式：图表和图形、图像、控件、数据表和装饰元素。对于图表，命名指标、时间框架和趋势；对于图像，识别主体及其背景或细节；对于 UI 控件，说明标签和动作。使用读者可以扫描的短语，而不是掩盖含义的长段落。

在 SharePoint 和品牌资产中，通过重用一小组具体模式保持一致性。Andrée 是一位著名的无障碍内容倡导者，她展示了这些短语如何与简短、精确的标题配对，以支持快速阅读和轻松搜索。保持标题读者友好，不冗长，并在审查过程中编辑以提高清晰度。

模式	示例	说明
图表/图：对象 + 指标 + 时期 + 趋势	该图表显示第二季度销售额从 1,000 单位上升到 1,500 单位，期间为第二季度	命名图表、指标、范围如果需要以千为单位；避免填充词。
图像/插图：主体 + 背景 + 细节	产品照片显示品牌在白色背景上，带有包装细节	专注于主体和上下文；背景澄清位置；仅提及关键细节。
UI 控件：标签 + 动作	点击“编辑”以打开项目字段	使用实际标签；突出目标字段；保持可操作性。
数据表：字段 + 值 + 时期	表格列出字段：销售额、地区、时期；值显示千单位总数	将表格数据转化为线性句子；包括相关时期。
装饰性/间隔：装饰元素 + alt 状态	装饰性间隔线：alt 文本为空	当元素添加布局而非内容时使用空；避免描述不传达含义的视觉。
叙述标题：情况 + 阅读 + 搜索	在这种情况下，读者可以在阅读期间扫描摘要，使用搜索定位关键术语	为要点提供快速锚点，并允许基于术语的检索。
人物：姓名 + 角色 + 动作	Andrée 审查图表以确认数据准确性	使用适当姓名和角色来定位读者；适当大写姓名。

SEO 考虑：平衡关键词而不填充

推荐：首先专注于清晰度；包括一个准确反映图像的主要关键词，并在用户意义上改进含义时仅添加支持术语。本指南为作家提供平衡 alt 文本中 SEO 和无障碍性的实用指南。

在实践中，每个 alt 文本应在读者期望出现的位置发挥作用，并有助于理解，而不是填充空间。一个精心制作的 alt 文本通过提供图像在文章中角色的有意义摘要来帮助残疾用户和搜索引擎。

对于复杂图表，alt 文本可能更长，但保持核心含义完整并避免填充。

• 主要关键词指南：确定一个单一的相关关键词，并在图像内容允许时将其置于 alt 文本开头。
• 自然语言：将 alt 文本写成用户可能说的句子或简洁短语；这种写作风格提高了残疾用户的可读性，并帮助搜索引擎解释上下文。
• 字数限制：目标为 125 个字符或更少；这防止关键词填充并保持文本可读，同时仍支持搜索意图。
• 上下文感知选择：考虑部分和情况；对于图表，描述数据或流程；对于照片，识别主体和动作；对于图标，解释动作或含义。
• 链接和点击含义：如果图像是链接，描述目的地和点击发生的情况，以帮助用户决定继续。
• 装饰性图像：对于不贡献信息的视觉，使用空 alt 属性 (alt="")；这最小化屏幕阅读器的无意义噪音。
• 检查列表方法：在您的工作流程中将每个 alt 文本视为复选框驱动的过程；这有助于团队批准和跟踪更改。
• 测试和反馈：使用屏幕阅读器测试，从开发者和用户收集输入，并批准改善理解的更改。
• 意图是什么：始终询问图像在周围内容中的意图，并确保 alt 文本反映该目标而无冗余。
• 词语选择和空白：优先精确术语而非填充；保持平静节奏，并在文本周围使用充足空白以辅助扫描。

这里为您提供帮助，作家简洁参考：将 alt 文本与内容上下文对齐，并使用本指南改善文章的无障碍性和 SEO 平衡。

点击这里查看检查列表。

摘要：这种方法改善文章可读性，支持残疾用户，并保留 alt 文本与页面相关性的链接，而不牺牲性能。

不同图像类型的 Alt 文本：照片、图表、徽标、信息图

使用简洁、以主体为重点的 alt 文本标记照片，描述框架中谁或什么以及它为什么在页面上重要。为辅助技术用户编写，并将描述与附近副本对齐，以便读者知道图像的目的。

照片：从主要主体开始，然后添加如设置和动作的上下文。保持长度紧凑，目标为 90–120 个字符。如果出现噪音制造器或其他音频提示，在括号中注明。如果图像包含演讲，包括简短引号片段 – 并用引号包围它。示例：“老师在白板上写作，学生们倾听。” 这种方法帮助用户了解整个时刻，并支持搜索和导航。清晰描述场景也有助于跨页面的标签一致性。

图表：描述图表的目的和信息流程，而不是每个标签。说明目标、关键步骤及其连接方式。如果出现轴或类别，简要提及它们（例如，“x 轴：时间；y 轴：收入”）。避免复制图像中的长文本。示例：“从输入到输出的流程，四个步骤：输入、分析、决策、行动。” 对于图表，保持焦点在关系和结果上。

徽标：识别品牌，如果有意义，徽标的象征意义。优先“BrandName 徽标”或“BrandName 字标。” 如果徽标是装饰性的，留空 alt 属性，让窗格向用户宣布装饰。跨页面使用一致模式，以便用户知道期望什么，并可以依赖搜索结果来浮现品牌。

信息图：提供主要发现的简洁摘要，用通俗语言说明关键数字。不要复制图形中的长文本；将您需要的数字拉入 alt 文本。如果引号传达影响，则在引号中包含它。例如：“采用率增加 42%。” 在 UI 窗格中，复选框可以切换简短 alt 文本与更长版本，因此不同需求的用户都能得到所需。在各种情况下，这种方法保持读者兴趣高，并确保所有用户的无障碍性；快速 alt 文本将包括基本数字和简要要点。