Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

可感知的等价替代

Perceivable Alternatives

加入比较 +

通过某一感知通道(视觉图像、声音、色彩)传达的信息,必须同时以至少一种其他通道可获取的形式提供:图像配有服务于同等目的的文字说明,音视频配有字幕或文字记录,仅靠颜色区分的状态额外配有可见的文字、图案或形状标记。

示意图 · 编辑插画,尚无可操作示例
一个名为 FIELDNOTES 的虚构界面元素以三种并行方式呈现:一张图像旁配有文字说明块,一段波形图下方配有字幕条,一行按颜色编码的内容同时带有独立的形状标记。
一个名为 FIELDNOTES 的虚构界面元素以三种并行方式呈现:一张图像旁配有文字说明块,一段波形图下方配有字幕条,一行按颜色编码的内容同时带有独立的形状标记。

识别特征

  • 图像、图标等非文字元素都配有服务于同等目的的文字说明,而非仅描述'这里有一张图'
  • 音视频内容配有字幕或文字记录,覆盖对话、说话人和关键音效
  • 仅靠颜色区分的状态、链接或分类,同时配有文字、图案或形状等非颜色标记

概念边界

本条目比包容性设计(inclusive-design)更具体:包容性设计是识别排除、为不同群体提供适配方案的整体立场,而本条目只处理'单一感知通道信息如何在另一通道中获得等价表达'这一操作层面的具体做法,不重述包容性设计的方法论。它也不是另造一种视觉风格,而是按感知通道补充替代呈现,因此不改变原有的视觉设计语言。通用设计(universal-design)'可感知信息'原则是更上位的哲学立场,说明为什么关键信息要多通道冗余;本条目是该立场在图像、音视频、色彩这几类常见元素上的可执行规则。

什么时候考虑它

  • 界面中出现传达信息的图像、图标、图表或其他非文字元素
  • 发布预先录制的音频或视频内容
  • 用颜色区分状态、类别或可点击元素时

什么时候慎用

  • 把替代文本写成'图片'或文件名一类不携带信息的占位描述
  • 只在颜色上做区分,不额外提供文字或图案标记
  • 把装饰性、不传达信息的图像也写上冗长描述,增加屏幕阅读器的干扰

取舍

为每个信息性元素撰写等价替代、制作字幕或补充非颜色标记,会增加内容制作和维护成本;但省略后,依赖屏幕阅读器、无法听音频或有色觉差异的用户会直接失去访问该信息的途径,而非仅仅体验变差。

条件规则 · 编辑建议

当界面中出现传达信息的非文字元素(图像、图标、图表等)必须为其提供服务于同等目的的文字替代;纯装饰性元素使用空的替代文本,避免无意义的干扰。
当使用颜色区分状态、类别或可点击元素必须颜色不能是传达该信息的唯一视觉手段,须同时提供文字、图案或形状等非颜色标记。
当撰写文字替代、字幕或文字记录建议让替代内容传达与原内容同等的信息,而不是仅描述'此处存在一段图像/音频'。

相关词条

包容性设计 ↗相关但不同 · 决定采用整体排除识别方法,还是执行具体的多通道替代规则

包容性设计是识别排除、按群体提供适配方案的整体立场;本条目是其中'信息要在多个感知通道中都可获取'这一具体做法的操作规则,二者互补但层级不同。

通用设计 ↗具体体现 · 落实通用设计'可感知信息'原则中的具体呈现方式

通用设计要求关键信息以至少两种冗余的可感知方式呈现,本条目对图像、音视频、色彩这几类常见元素给出了该原则的可执行做法。

相似律 ↗提供解释 · 用形状、图案等视觉相似性作为颜色之外的补充标记

相似律说明具备共同视觉特征的元素会被感知为一类,可以为仅靠颜色区分的状态提供额外的图案或形状线索。

状态消息 ↗可以配合 · 状态提示同时使用颜色和声音时

状态消息若仅靠颜色变化或提示音传达结果,需要按本条目的规则补充文字或图标,才能被更多用户感知到。

来源与支持范围

W3C WAI · Understanding SC 1.1.1 Non-text Content ↗

规定所有呈现给用户的非文字内容都必须有服务于同等目的的文字替代(Level A),使信息能够以任何感知形式呈现,例如被朗读或转换为盲文,而不丢失原有功能。

检索日期:2026-09-15 · 存档于 2026-09-16
W3C WAI · Understanding SC 1.4.1 Use of Color ↗

规定颜色不能作为传达信息、指示动作、提示响应或区分视觉元素的唯一视觉手段(Level A),需搭配文字、图案或形状等额外视觉标记,以覆盖色觉差异或有限色彩显示的用户。

检索日期:2026-09-15 · 快照待确认
W3C WAI · Understanding SC 1.2.2 Captions (Prerecorded) ↗

规定同步媒体中预先录制的音频内容都必须提供字幕(Level A,媒体本身即为文字的替代版本且已明确标注的情形除外),字幕需覆盖对话、说话人身份和有意义的音效。

检索日期:2026-09-15 · 存档于 2026-09-16
MDN Web Docs · <img>: alt attribute ↗

建议替代文本描述图像的内容与意图而非仅说明'这是一张图片',并给出上下文测试法:把替代文本和图片前后的正文连起来读,应当读起来通顺;纯装饰性图像应使用空的 alt 属性。

检索日期:2026-09-15 · 快照待确认

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

尚无可操作样例;插图为编辑示意。应用到产品时仍须核实:每条替代文本是否真的传达与原内容同等的信息而非空泛占位、字幕是否覆盖说话人与关键音效、仅靠颜色区分的状态是否都补充了非颜色标记。

{
  "evidenceType": "无障碍标准条款的操作化改写",
  "limit": "本样例未逐一验证具体产品的替代文本质量或字幕准确度,实际应用仍需人工审核内容是否真正等价。"
}
完整 Agent 条目 JSON
{
  "id": "perceivable-alternatives",
  "type": "principle",
  "name": {
    "zh": "可感知的等价替代",
    "en": "Perceivable Alternatives"
  },
  "aliases": [
    "Text Alternatives",
    "文字替代",
    "多感官冗余呈现"
  ],
  "granularity": "component",
  "intents": [
    "include-users",
    "provide-alternative"
  ],
  "tags": [
    "替代文本",
    "字幕",
    "色彩独立",
    "无障碍",
    "多通道"
  ],
  "definition": "通过某一感知通道(视觉图像、声音、色彩)传达的信息,必须同时以至少一种其他通道可获取的形式提供:图像配有服务于同等目的的文字说明,音视频配有字幕或文字记录,仅靠颜色区分的状态额外配有可见的文字、图案或形状标记。",
  "boundary": "本条目比包容性设计(inclusive-design)更具体:包容性设计是识别排除、为不同群体提供适配方案的整体立场,而本条目只处理'单一感知通道信息如何在另一通道中获得等价表达'这一操作层面的具体做法,不重述包容性设计的方法论。它也不是另造一种视觉风格,而是按感知通道补充替代呈现,因此不改变原有的视觉设计语言。通用设计(universal-design)'可感知信息'原则是更上位的哲学立场,说明为什么关键信息要多通道冗余;本条目是该立场在图像、音视频、色彩这几类常见元素上的可执行规则。",
  "signature": [
    "图像、图标等非文字元素都配有服务于同等目的的文字说明,而非仅描述'这里有一张图'",
    "音视频内容配有字幕或文字记录,覆盖对话、说话人和关键音效",
    "仅靠颜色区分的状态、链接或分类,同时配有文字、图案或形状等非颜色标记"
  ],
  "when": [
    "界面中出现传达信息的图像、图标、图表或其他非文字元素",
    "发布预先录制的音频或视频内容",
    "用颜色区分状态、类别或可点击元素时"
  ],
  "when_not": [
    "把替代文本写成'图片'或文件名一类不携带信息的占位描述",
    "只在颜色上做区分,不额外提供文字或图案标记",
    "把装饰性、不传达信息的图像也写上冗长描述,增加屏幕阅读器的干扰"
  ],
  "tradeoff": "为每个信息性元素撰写等价替代、制作字幕或补充非颜色标记,会增加内容制作和维护成本;但省略后,依赖屏幕阅读器、无法听音频或有色觉差异的用户会直接失去访问该信息的途径,而非仅仅体验变差。",
  "comparison": {
    "focus": "同一份信息能否脱离最初的感知通道,在另一通道中仍被完整获取",
    "mechanism": "为非文字内容提供服务于同等目的的文字替代,为音视频提供字幕/文字记录,为仅靠颜色的区分补充非颜色标记",
    "cost": "替代内容的撰写、翻译与随源内容更新而维护的持续投入"
  },
  "sources": [
    {
      "id": "wcag-non-text-content",
      "title": "W3C WAI · Understanding SC 1.1.1 Non-text Content",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html",
      "claim": "规定所有呈现给用户的非文字内容都必须有服务于同等目的的文字替代(Level A),使信息能够以任何感知形式呈现,例如被朗读或转换为盲文,而不丢失原有功能。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:50:48.751Z",
        "jobId": "spn2-edba1db0a2ae3508f8ae581839e1d9f5de212159",
        "url": "https://web.archive.org/web/20260916055115/https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html",
        "timestamp": "20260916055115"
      }
    },
    {
      "id": "wcag-use-of-color",
      "title": "W3C WAI · Understanding SC 1.4.1 Use of Color",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html",
      "claim": "规定颜色不能作为传达信息、指示动作、提示响应或区分视觉元素的唯一视觉手段(Level A),需搭配文字、图案或形状等额外视觉标记,以覆盖色觉差异或有限色彩显示的用户。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html",
        "status": "pending",
        "checkedAt": "2026-09-16T05:51:02.098Z",
        "error": "status-request-failed",
        "jobId": "spn2-35636813b2bd8d7fa175171301aa6ad630a2130d"
      }
    },
    {
      "id": "wcag-captions-prerecorded",
      "title": "W3C WAI · Understanding SC 1.2.2 Captions (Prerecorded)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html",
      "claim": "规定同步媒体中预先录制的音频内容都必须提供字幕(Level A,媒体本身即为文字的替代版本且已明确标注的情形除外),字幕需覆盖对话、说话人身份和有意义的音效。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:51:28.130Z",
        "jobId": "spn2-03e9bfa21396c83f48d328329d7b4978e03cb5f8",
        "url": "https://web.archive.org/web/20260916055151/https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html",
        "timestamp": "20260916055151"
      }
    },
    {
      "id": "mdn-img-alt",
      "title": "MDN Web Docs · <img>: alt attribute",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#alt",
      "claim": "建议替代文本描述图像的内容与意图而非仅说明'这是一张图片',并给出上下文测试法:把替代文本和图片前后的正文连起来读,应当读起来通顺;纯装饰性图像应使用空的 alt 属性。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#alt",
        "status": "pending",
        "checkedAt": "2026-09-16T05:51:46.349Z",
        "error": "status-request-failed",
        "jobId": "spn2-d124fb782965aca7280f9254712fac6ad6b8d767"
      }
    }
  ],
  "relations": [
    {
      "target": "inclusive-design",
      "kind": "related",
      "condition": "决定采用整体排除识别方法,还是执行具体的多通道替代规则",
      "reason": "包容性设计是识别排除、按群体提供适配方案的整体立场;本条目是其中'信息要在多个感知通道中都可获取'这一具体做法的操作规则,二者互补但层级不同。",
      "basis": "editorial"
    },
    {
      "target": "universal-design",
      "kind": "realized_by",
      "condition": "落实通用设计'可感知信息'原则中的具体呈现方式",
      "reason": "通用设计要求关键信息以至少两种冗余的可感知方式呈现,本条目对图像、音视频、色彩这几类常见元素给出了该原则的可执行做法。",
      "basis": "editorial"
    },
    {
      "target": "similarity",
      "kind": "informs",
      "condition": "用形状、图案等视觉相似性作为颜色之外的补充标记",
      "reason": "相似律说明具备共同视觉特征的元素会被感知为一类,可以为仅靠颜色区分的状态提供额外的图案或形状线索。",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "状态提示同时使用颜色和声音时",
      "reason": "状态消息若仅靠颜色变化或提示音传达结果,需要按本条目的规则补充文字或图标,才能被更多用户感知到。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "界面中出现传达信息的非文字元素(图像、图标、图表等)",
      "instruction": "为其提供服务于同等目的的文字替代;纯装饰性元素使用空的替代文本,避免无意义的干扰。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "使用颜色区分状态、类别或可点击元素",
      "instruction": "颜色不能是传达该信息的唯一视觉手段,须同时提供文字、图案或形状等非颜色标记。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "撰写文字替代、字幕或文字记录",
      "instruction": "让替代内容传达与原内容同等的信息,而不是仅描述'此处存在一段图像/音频'。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "无障碍标准条款的操作化改写",
    "limit": "本样例未逐一验证具体产品的替代文本质量或字幕准确度,实际应用仍需人工审核内容是否真正等价。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作样例;插图为编辑示意。应用到产品时仍须核实:每条替代文本是否真的传达与原内容同等的信息而非空泛占位、字幕是否覆盖说话人与关键音效、仅靠颜色区分的状态是否都补充了非颜色标记。",
  "image": {
    "src": "/images/perceivable-alternatives.webp",
    "alt": "一个名为 FIELDNOTES 的虚构界面元素以三种并行方式呈现:一张图像旁配有文字说明块,一段波形图下方配有字幕条,一行按颜色编码的内容同时带有独立的形状标记。"
  },
  "searchTerms": [
    "text alternatives",
    "captions",
    "color independence",
    "accessibility",
    "multi-channel"
  ]
}