{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "focus-indicator",
  "name": {
    "zh": "焦点指示",
    "en": "Focus Indicator"
  },
  "page": "https://designvocabulary.com/zh/entries/focus-indicator/",
  "self": "https://designvocabulary.com/zh/entries/focus-indicator.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/focus-indicator.json",
    "en": "https://designvocabulary.com/en/entries/focus-indicator.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "wcag22-focus-visible",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html",
        "title": "W3C WAI · Understanding SC 2.4.7 Focus Visible (Level AA)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915181618/https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html",
          "capturedAt": "2026-09-15T18:16:18Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html"
        }
      },
      {
        "id": "wcag22-focus-not-obscured",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html",
        "title": "W3C WAI · Understanding SC 2.4.11 Focus Not Obscured (Minimum) (Level AA)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915181537/https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html",
          "capturedAt": "2026-09-15T18:15:37Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html"
        }
      },
      {
        "id": "wcag22-focus-appearance",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html",
        "title": "W3C WAI · Understanding SC 2.4.13 Focus Appearance (Level AAA)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915181656/https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html",
          "capturedAt": "2026-09-15T18:16:56Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html"
        }
      },
      {
        "id": "mdn-focus-visible",
        "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible",
        "title": "MDN · :focus-visible",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20251030023636/https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible",
          "capturedAt": "2025-10-30T02:36:36Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"
        }
      }
    ],
    "lists": [
      {
        "id": "M-C",
        "edition": "classic",
        "seat": 5,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/M-C/",
        "json": "https://designvocabulary.com/zh/lists/M-C.json"
      },
      {
        "id": "M-Y",
        "edition": "2026-focus",
        "seat": 6,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/M-Y/",
        "json": "https://designvocabulary.com/zh/lists/M-Y.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "focus-indicator",
    "type": "micro",
    "name": {
      "zh": "焦点指示",
      "en": "Focus Indicator"
    },
    "aliases": [
      "Focus Ring",
      "焦点环",
      "Visible Focus"
    ],
    "granularity": "state",
    "intents": [
      "include-users",
      "show-focus"
    ],
    "tags": [
      "键盘",
      "焦点",
      "无障碍",
      "可见状态",
      "focus"
    ],
    "definition": "当界面元素获得键盘焦点时，用可见的视觉标记（如轮廓环或高亮）指出当前焦点所在，使键盘用户始终知道操作会落在哪里。",
    "boundary": "焦点指示只回答“焦点现在在哪”，不等同于悬停、选中或激活状态；它是元素的一种状态样式，而不是一个独立组件，也不负责决定焦点应移到哪里。",
    "signature": [
      "获得键盘焦点的元素与相邻元素有明显的视觉差异",
      "指示在焦点停留期间持续可见，不会自动消失",
      "指示区域不被固定头部、浮层或其他作者内容整体遮挡"
    ],
    "when": [
      "界面可以用键盘或其他非指针方式操作",
      "自定义了按钮、链接或表单控件的外观并覆盖了浏览器默认样式",
      "页面存在固定头部、底栏或非模态浮层，焦点可能被遮挡"
    ],
    "when_not": [
      "不要为了美观直接移除默认轮廓而不提供等效替代",
      "不要用只在悬停时出现或很快淡出的效果代替持续的焦点指示",
      "不要把焦点指示与“已选中”样式做成一样，让用户无法区分位置和选择"
    ],
    "tradeoff": "显眼的焦点环可能与品牌视觉冲突，但用 :focus-visible 只在键盘操作时显示，可以在鼠标用户看不到多余轮廓的同时保住键盘可达性。",
    "comparison": {
      "focus": "告诉键盘用户当前操作会落在哪个元素上",
      "mechanism": "焦点状态下的持续可见轮廓或高亮，并保证不被遮挡",
      "cost": "需要为每类可聚焦元素维护对比度足够的焦点样式"
    },
    "sources": [
      {
        "id": "wcag22-focus-visible",
        "title": "W3C WAI · Understanding SC 2.4.7 Focus Visible (Level AA)",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html",
        "claim": "WCAG 2.2 的 2.4.7（AA 级）要求任何可用键盘操作的界面都有一种模式使键盘焦点指示可见；沿用平台默认焦点指示是一种充分技术。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html",
          "status": "available",
          "checkedAt": "2026-09-15T18:15:08.051Z",
          "jobId": "spn2-9fcf85e43df14f575a270e45053db1df538e579c",
          "url": "https://web.archive.org/web/20260915181618/https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html",
          "timestamp": "20260915181618"
        }
      },
      {
        "id": "wcag22-focus-not-obscured",
        "title": "W3C WAI · Understanding SC 2.4.11 Focus Not Obscured (Minimum) (Level AA)",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html",
        "claim": "WCAG 2.2 的 2.4.11（AA 级）要求组件获得键盘焦点时不被作者创建的内容（如固定头部、底栏、非模态对话框）完全遮挡。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html",
          "status": "available",
          "checkedAt": "2026-09-15T18:15:08.942Z",
          "jobId": "spn2-801ec8d206de4b85b09e56485c3a229ddb0e834b",
          "url": "https://web.archive.org/web/20260915181537/https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html",
          "timestamp": "20260915181537"
        }
      },
      {
        "id": "wcag22-focus-appearance",
        "title": "W3C WAI · Understanding SC 2.4.13 Focus Appearance (Level AAA)",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html",
        "claim": "WCAG 2.2 的 2.4.13（AAA 级）要求焦点指示区域至少相当于组件 2 CSS 像素粗的周边，且聚焦前后同一像素的对比度至少 3:1。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html",
          "status": "available",
          "checkedAt": "2026-09-15T18:15:52.982Z",
          "jobId": "spn2-a9fd9a9b13e84404118824f029bc61f053195d6d",
          "url": "https://web.archive.org/web/20260915181656/https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html",
          "timestamp": "20260915181656"
        }
      },
      {
        "id": "mdn-focus-visible",
        "title": "MDN · :focus-visible",
        "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible",
        "claim": ":focus-visible 在元素获得焦点且浏览器依据输入方式判断需要显示焦点时匹配；用它提供自定义指示，而不是用 outline: none 移除焦点样式。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible",
          "status": "available",
          "checkedAt": "2026-09-22T14:39:06.062Z",
          "jobId": "spn2-056d7e4736cb9f64b02f029a127a4fa01f20be72",
          "url": "https://web.archive.org/web/20251030023636/https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible",
          "timestamp": "20251030023636"
        }
      }
    ],
    "relations": [
      {
        "target": "modal-dialog",
        "kind": "composes_with",
        "condition": "对话框打开并把焦点移入其中",
        "reason": "焦点被程序移动后，用户只能靠可见指示知道自己已进入对话框。",
        "basis": "editorial"
      },
      {
        "target": "inclusive-design",
        "kind": "informs",
        "condition": "服务键盘、开关设备或低视力用户",
        "reason": "可见焦点是这些用户完成操作的前提，而非附加装饰。",
        "basis": "editorial"
      },
      {
        "target": "glassmorphism",
        "kind": "conflicts_when",
        "condition": "半透明模糊背景使轮廓与背景对比不足",
        "reason": "焦点环需要在实际背景上保持足够对比，模糊透明表面可能削弱它。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "元素获得键盘焦点",
        "instruction": "显示持续可见的焦点指示，并确保它不被固定头部、底栏或浮层完全遮挡。",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "想去掉浏览器默认轮廓",
        "instruction": "不要只写 outline: none；必须同时提供对比度足够的等效指示，优先用 :focus-visible。",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "设计自定义焦点样式",
        "instruction": "参考 2.4.13 的 2 CSS 像素周边与 3:1 对比变化作为目标，即使只以 AA 为合规底线。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "behavior": {
      "states": [
        "unfocused",
        "focus-visible",
        "focus-hidden"
      ],
      "a11y": [
        "键盘操作时焦点指示始终可见且不被遮挡",
        "自定义指示与背景及未聚焦状态的对比度足够",
        "焦点指示与选中、悬停状态可区分"
      ],
      "motion": "指示应即时出现；可选的淡入动画在减弱动态偏好下省略"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须用键盘实际遍历页面，验证每类可聚焦元素的指示可见、对比足够且不被固定内容遮挡。",
    "image": {
      "src": "/images/focus-indicator.webp",
      "alt": "虚构的 FIELDNOTES 表单工具栏上，一排按钮中只有一个被粗而对比鲜明的焦点环包围，其余按钮保持平淡的默认样式。"
    },
    "searchTerms": [
      "keyboard",
      "focus",
      "accessibility",
      "visible state",
      "focus"
    ]
  }
}