mcpField
C
content-design

content-design

github.com/mgifford设计与 UI57146 次安装7 周前更新
代码仓库

关于 content-design

这是面向网页作者、编辑和审查人员的内容设计无障碍指南，帮助让信息更清晰、易于浏览和理解。指南涵盖替代文本、链接、标题层级、易读语言及内容结构。

主要功能

  1. 01为信息图像编写合适的替代文本
  2. 02使用脱离上下文也清晰的链接文本
  3. 03建立逻辑清晰的标题层级
  4. 04采用简明语言和易读结构
  5. 05检查表单、表格与认知可访问性

适用场景

  1. 01发布前审查网页内容的无障碍性
  2. 02改写含糊的链接和复杂说明
  3. 03规划页面标题、段落和信息顺序

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mgifford/accessibility-skills --skill content-design

安装后在 Claude Code 中输入/content-design确认已加载。

附带文件SYNC.md

详细介绍

内容设计可访问性技能

权威来源：mgifford/ACCESSIBILITY.md 中的 examples/CONTENT_DESIGN_ACCESSIBILITY_BEST_PRACTICES.md 此技能由该文件整理而来。如有疑问，以示例为准。

编写、编辑或审核任何网页内容时，请遵循以下规则。

核心原则

内容设计与可访问性密不可分。即使页面在技术上可访问，如果内容令人困惑或结构欠佳，仍然会造成障碍。内容设计应面向尽可能广泛的受众：清晰写作、合理组织，并按照用户需要的顺序呈现信息。

严重程度等级（本技能）

等级含义
严重残障群体完全无法访问或理解内容
较严重造成显著障碍；不能合理地要求用户自行寻找解决方法
中等造成不便；有解决方法，且负担不大
轻微未达到最佳实践；影响较小

严重：图片必须配有恰当的文本替代内容

有意义的图片缺少 alt 属性，或使用 alt=""，属于严重问题——盲人用户无法获取任何信息。装饰性图片带有描述性 alt 属于中等问题——这会增加干扰，但不会阻断信息获取。

  • 每张信息性图片都需要有意义的替代文本，传达图片的用途，而不只是描述外观
  • 装饰性图片：alt=""（空字符串——仍必须保留该属性）
  • 不要只依赖图片来传达信息；应使用配套文本辅助呈现视觉内容
  • 图表必须配有文本摘要或无障碍数据表格（参见 skills/charts-graphs/SKILL.md）
  • 有关图表专用指南，请参见 skills/svg/SKILL.md

较严重：所有链接文本脱离上下文后都必须有明确含义

“点击此处”“阅读更多”和“了解更多”属于较严重问题——屏幕阅读器用户会通过链接导航，并在没有周围上下文的情况下听到链接文本。


<a href="/report">Read more</a>


<a href="/report">2024 Accessibility Annual Report</a>

文档链接应注明文件类型和大小：

<a href="/report.pdf">2024 Annual Report (PDF, 2.3 MB)</a>

链接在新标签页中打开时，应提醒用户：

<a href="/report" target="_blank">
  Annual Report
  <span class="visually-hidden">(opens in new tab)</span>
</a>

术语应保持一致：如果某处将某个概念称为“无障碍声明”，就不要在其他地方称其为“a11y 披露”。

较严重：标题层级必须合乎逻辑

跳过标题级别属于中等问题；没有 <h1> 或仅将标题用于视觉样式则属于较严重问题——屏幕阅读器用户依赖标题来浏览页面。

  • 每页使用一个 <h1>，说明页面的主要用途
  • 层级应合乎逻辑：h1 → h2 → h3（不要跳过级别）
  • 标题必须具有描述性且彼此不同——不要只用“引言”或“概述”
  • 将标题写成陈述句或清晰的主题标签，而不是问题（适合采用常见问题解答格式的情况除外）
  • 导航标签、按钮文本和表单标签脱离上下文后也必须明确且具有描述性

中等：使用通俗易懂的语言

语言过于复杂属于中等问题——这会给有认知障碍和读写能力较低的用户造成实际障碍，但内容在技术上仍然存在。

  • 使用常见词语、简短句子和主动语态
  • 面向普通受众时，目标阅读难度不高于美国 8 年级水平
  • 除非受众需要，否则避免使用行话、首次出现时未解释的缩略语以及圈内术语
  • 在正文中解释技术术语；缩写首次出现时应写出全称
  • 将关键信息前置——先呈现最重要的内容
  • 使用第二人称“你”，直接与读者交流
  • 避免双重否定和层层嵌套的条件句——写“填写所有必填字段后即可继续”，不要写“只有在未能填写所有必填字段时，你才无法继续”
  • 优先使用简短、具体的词语，而不是冗长、抽象的词语（使用“用”，而不是“加以利用”）
  • 发布前使用可读性检查工具；面向普通受众时，目标 Flesch-Kincaid 阅读等级不高于 8 年级

中等：表格

  • 仅用于真正的表格数据，绝不用于布局（如果布局表格没有 role="presentation"，则为严重问题）
  • 添加 <caption> 或标题，说明表格内容
  • 使用 <th scope="col"> 或 <th scope="row"> 标记表头单元格
  • 保持表格简单；除非必要，否则避免合并单元格
  • 为复杂表格提供文字摘要

简单表格缺少 scope 属于中等问题；具有多行表头的复杂表格缺少 scope 则属于严重问题。（有关代码级别的表格要求，请同时加载 skills/tables/SKILL.md。）

中等：页面和内容结构

  • 三个或更多并列项目应使用列表（不要将其嵌入密集的段落中）
  • 段落简短：最多 3–5 句；每段只表达一个观点
  • 采用倒金字塔结构：最关键的内容放在开头
  • 充分留白

中等：表单——写作要求

  • 在表单之前编写表单说明，而不是放在表单内
  • 字段标签应说明用户需要输入什么，而不是系统如何存储数据
  • 为不常见的输入格式提供示例：Date: DD/MM/YYYY
  • 错误消息必须说明问题和解决方法，避免使用系统错误代码

（有关代码级别的表单要求，请同时加载 skills/forms/SKILL.md。）

中等：认知无障碍

  • 通过摘要、要点或“需要了解的内容”部分补充复杂内容
  • 将较长的流程拆分为编号步骤
  • 使用示例和类比解释抽象概念
  • 尽可能避免带有时间压力的内容呈现方式
  • 提供充足的背景信息，让用户无需依赖对前文的记忆也能理解内容

轻微：写作风格细节

  • 优先使用主动语态：“表单会保存你的数据”，而不是“你的数据会被保存”
  • 尽可能使用现在时
  • 始终使用性别中立且包容的语言
  • 术语保持一致：全站中每个概念使用一个术语；维护内容风格指南，并始终采用统一的语气和风格
  • 为每个页面使用独特且描述性明确的 <title> 元素
  • 定期检查内容，删除过时、误导或相互矛盾的信息

轻微：面向不同受众的内容

  • 面向广泛受众，包括存在认知、学习和语言差异的人群
  • 在可行的情况下，以多种形式提供内容（例如，同时提供视频摘要和书面指南）
  • 考虑是否适合提供译文或简明易读版本
  • 避免使用可能无法准确翻译的习语、隐喻或特定文化典故

测试和审核

  • 大声朗读内容，检查表达是否清晰、流畅自然
  • 发布前请不熟悉该主题的人审核内容
  • 仅使用键盘测试页面导航，并确认标题能清晰呈现内容结构
  • 使用屏幕阅读器确认内容按线性顺序阅读时通顺易懂
  • 检查所有链接是否具有描述性且有效
  • 对关键页面进行可读性评分，并持续跟踪评分变化

完成标准清单

  • 已检查阅读难度（面向普通受众时，阅读等级为 8 年级或以下）
  • 仅有一个 <h1>，标题层级合乎逻辑，没有跳级
  • 所有链接文本脱离上下文后仍具有描述性
  • 文档链接注明文件类型和大小
  • 新标签页链接会提醒用户
  • 所有图片都有适当的 alt（有意义的描述，或装饰性图片使用空值）
  • 表格使用 <caption> 和 <th scope="…">
  • 页面／网站中的术语保持一致
  • 页面标题独特且具有描述性
  • 已由团队外部人员审核

WCAG 核心标准

  • 1.1.1 非文本内容（A）——有意义的图片缺少 alt 时属于严重问题
  • 1.3.1 信息和关系（A）
  • 2.4.4 链接目的（结合上下文）（AA）——链接含义模糊时属于严重问题
  • 2.4.6 标题和标签（AA）
  • 2.4.2 页面标题（A）
  • 3.1.5 阅读难度（AAA——面向普通受众时的目标）

参考资料

**标准展望：**WCAG 3.0 正在制定中。内容设计要求预计不会有重大变化。 请关注：https://www.w3.org/TR/wcag-3.0/

评论

支持 Markdown