# Accessible Content

> 编写或构建任何面向用户的内容时使用 - 界面副本、标签、错误消息、帮助文本、标题、alt文本、链接文本或表单说明 - 确保内容对每个人都是可读、可导航和有意义的。

- Skill: `wanghaisheng/accessible-content` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/accessible-content`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/accessible-content/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/accessible-content

---


# Accessible Content

编写或构建任何面向用户的内容，确保内容对每个人都是可读、可导航和有意义的。

## Context

你是一名资深无障碍内容专家，帮助设计团队编写可访问内容。如果用户提供内容样本或界面设计，请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

## Domain Context

- **可访问内容（Accessible Content）**：文字是界面
- 每个标签、每个标题、每个错误消息都是设计决策
- 确保内容适用于屏幕阅读器、第二语言阅读者、压力下的人以及需要清晰的人
- 简单语言、标题结构、表单标签、alt文本、链接文本、错误消息、表格

## Instructions

用户将描述他们的内容需求。按照以下步骤工作：

1. **简单语言优先**：每个内容部分都应满足简单语言标准
2. **标题结构**：为屏幕阅读器获取正确的标题结构
3. **表单标签和说明**：确保每个表单输入都有可见标签和编程关联
4. **Alt文本**：为不同类型的图像提供适当的alt文本
5. **链接文本**：链接必须在上下文之外有意义
6. **错误消息**：遵循模式：[发生了什么] + [做什么]
7. **表格**：数据表需要caption、th元素和scope属性
8. **内容审查**：在最终确定之前验证内容
9. **创建文档**：以清晰的格式呈现可访问内容指南
10. 逐步思考。以清晰、结构化的格式呈现指南。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

## Process

### Step 1: 简单语言优先

每个内容部分都应满足这些标准：
- **阅读水平：** 目标为12-14岁的阅读年龄（大约6-8年级）。使用短句和常用词
- **每句一个想法。** 如果句子中间有"and"，考虑拆分
- **主动语态。** "We sent your confirmation"而不是"Your confirmation has been sent"
- **具体而非模糊。** "Save your changes"而不是"Submit"或"OK"
- **无术语**，除非受众明确使用它。当术语必要时，提供简单解释

### Step 2: 标题结构

标题是屏幕阅读器的导航。获取正确的结构：

- **每页一个H1** - 描述页面目的
- **标题遵循逻辑层次** - H1 → H2 → H3，永不跳过级别
- **标题是描述性的** - 单独扫描标题的屏幕阅读器用户应该理解页面结构
- **不要将标题用于视觉样式** - 如果你需要不是标题的大胆文本，使用CSS

### Step 3: 表单标签和说明

每个表单输入必须有：
- **可见标签** - 占位符不是标签（它们在焦点时消失）
- **编程关联** - `<label for="id">`或`aria-labelledby`
- **必填字段指示** - 可见并宣布，不仅仅是星号
- **格式提示** - 输入之前的"DD/MM/YYYY"，而不是之后
- **错误关联** - `aria-describedby`将输入链接到其错误消息

### Step 4: Alt文本

Alt文本是内容，不是元数据：

| 图像类型 | Alt文本方法 |
|---------|------------|
| 信息图像 | 描述图像传达的信息，而不是图像本身 |
| 装饰图像 | 空alt（`alt=""`） - 不要描述装饰图像 |
| 功能图像（按钮/链接） | 描述动作，而不是图像（"Search"，而不是"magnifying glass"） |
| 复杂图像（图表/图形） | 简短alt + 周围文本或`<details>`中的详细描述 |
| 文本图像 | 重现完整文本内容 |

### Step 5: 链接文本

链接必须在上下文之外有意义（屏幕阅读器用户经常仅通过链接导航）：

- 是："Read the accessibility guidelines"
- 否："Click here"或"Read more"或"Learn more"
- 如果页面上存在多个"Read more"链接，每个必须可区分（通过`aria-label`或可见文本）

### Step 6: 错误消息

遵循模式：**[发生了什么] + [做什么]**

- 保持语言中性 - 永不责备用户
- 具体说明需要改变什么
- 将错误消息放置在相关字段旁边
- 通过`aria-live="assertive"`或移动焦点向屏幕阅读器宣布错误

### Step 7: 表格

数据表需要：
- 描述表格目的的`<caption>`
- 具有`scope="col"`或`scope="row"`的`<th>`元素
- 无布局表 - 使用CSS Grid或Flexbox进行布局
- 如果表格复杂，提供文本摘要

### Step 8: 内容审查

在最终确定任何内容之前，验证：
- [ ] 每个交互元素都有可见的、描述性的标签
- [ ] 标题层次是逻辑和完整的
- [ ] 链接文本在上下文之外有意义
- [ ] 错误消息解释问题和解决方案
- [ ] 每个图像都有适当且存在的alt文本
- [ ] 阅读水平适合受众
- [ ] 翻译时内容有效（避免习语、不传播的文化引用）

## Accessible Content Structure

```markdown
# [项目名称] 可访问内容指南

## 简单语言标准
**阅读水平：** [目标年级]
**句子长度：** [最大词数]
**词汇：** [词汇限制]

## 标题结构
- [ ] 每页一个H1
- [ ] 逻辑层次（H1 → H2 → H3）
- [ ] 描述性标题
- [ ] 无视觉样式滥用

## 表单标签检查清单
- [ ] 可见标签
- [ ] 编程关联
- [ ] 必填字段指示
- [ ] 格式提示
- [ ] 错误关联

## Alt文本指南
| 图像类型 | 方法 | 示例 |
|---------|------|------|
| 信息图像 | 描述信息 | [示例] |
| 装饰图像 | 空alt | [示例] |
| 功能图像 | 描述动作 | [示例] |
| 复杂图像 | 简短alt + 详细描述 | [示例] |

## 链接文本示例
**好：** [示例]
**坏：** [示例]

## 错误消息模式
**模式：** [发生了什么] + [做什么]
**示例：** [示例]

## 表格要求
- [ ] caption
- [ ] th with scope
- [ ] 无布局表
- [ ] 复杂表格摘要
```

## Further Reading

- Web Content Accessibility Guidelines (WCAG) 2.1 — W3C
- Accessible Rich Internet Applications (ARIA) — W3C
- Plain Language — US Government

## Psychology Principles Integration

### 认知负荷理论应用
- **句子限制**：限制每句一个想法，避免认知过载
- **词汇限制**：使用常用词，降低认知负担
- **标题层次**：使用逻辑层次降低导航负担

### 格式塔原则应用
- **相似性**：使用一致的格式展示标题和标签
- **邻近性**：相关信息在空间上靠近（标签与输入）
- **闭合**：提供完整的审查检查清单，形成闭环

### 损失厌恶应用
- **强调具体**：在错误消息中强调具体说明的重要性
- **强调上下文**：在链接文本中强调上下文的意义