intopia-web-accessibility

概述

每当生成或修改 UI 代码时，都要应用这些无障碍原则。目标是打造人人都能使用、无需变通方式的界面。

说明

1. 识别每个 UI 组件，以及用户的请求涉及哪些跨领域主题（表单、键盘/焦点、图像/图表、拖放、实时区域、响应式布局、结构/语义、颜色）。
2. 阅读 INDEX.md。对于识别出的每个组件，加载其关联的验收标准文件（如果存在代码示例文件，也要加载）。如果 INDEX.md 的 Component Index 中某个组件所在行的 Load first 列列出了基础组件，先加载这些基础组件（每个只加载一次，并按列出的顺序；即使多个请求的组件共用同一基础组件也不例外），然后再加载该组件自身的文件以了解其差异。对于每个适用主题，通过 Topic Index 加载其在 references/topic/ 下的文件。这些文件是权威依据——未查阅它们之前，不得生成代码。
3. 如果涉及颜色值，请查阅 references/colour-contrast/Colour Contrast Reference.md。
4. 应用下方的通用规则，补充组件或主题参考资料未涵盖的内容。
5. 生成代码。
6. 呈现代码后，逐行列出所做的具体无障碍决策，每个组件或模式一行（例如：“模态框：打开时焦点移至标题，打开期间焦点限制在模态框内，关闭时焦点返回触发器。”）。

---

通用规则（始终适用）

无论加载了哪些主题，每次生成内容都必须遵循这些规则。详情请加载 INDEX.md 中 Topic Index 所列的相关主题文件。

• 优先使用语义化 HTML；元素应符合其预期用途。参见 references/topic/Topic - Structure and Semantics.md。
• 谨慎使用 ARIA；原生元素已有相应语义时，切勿重复添加角色。参见 references/topic/Topic - Structure and Semantics.md。
• 每个交互元素都必须具有可访问名称、正确的角色和当前状态。
• Tab 顺序应与视觉阅读顺序一致；切勿将 tabindex 设为大于 0 的值；焦点不得丢失或移出屏幕。参见 references/topic/Topic - Keyboard and Focus.md。
• 所有交互元素都必须显示可见的焦点指示器，且对比度至少为 3:1。
• 管理动态内容的焦点（模态框、菜单、单页应用导航）。参见 references/topic/Topic - Keyboard and Focus.md。
• 文本和 UI 的对比度应达到 4.5:1（普通文本）或 3:1（大号文本和 UI 组件）。参见 references/colour-contrast/Colour Contrast Reference.md。
• 切勿仅通过颜色传达含义。