MCP A11y Learning Guide

mcp-a11y学习指南

\[！注意\] 实验色彩强烈MCP 服务器。想做的事情如下，但是可能很难按照目标回答。

帮助想学习网络辅助功能的人WCAG 等，引导到正式文档MCP 服务器。AI 不是“解说者”，而是作为“导游角色”，学习中必要的W3C 提供资源。

对象是WCAG （JIS X 8341-3） 想学习的人。简单地AI 如果你问AI 不仅仅是官方的方针，各种各样的信息Web 从中搜索来回答，连没听的事情都长时间解说，不怎么学习。

因此AI 尽量不要独自解说，只回答“看官方文档的这里就好了”这样的建议，进行了各种各样的尝试MCP 服务器。

特徴

• 🎯 专为导游：引导到官方文档“请阅读此处”
• 📚 仅官方来源：W3C/WAIC仅引用的允许域
• 🔍 高效搜索：基于映射以优先级显示所需位置
• ✅ 学习路径提示：指明应按什么顺序阅读

设计原则

1. 不是解说员而是导游--不长时间说明，而是引导官方文档
2. 严格限制信息源－不在许可域外提示
3. 高效的学习支持-组织必读、推荐和补充，显示学习路径

mappings 在里面制作用于导游的映射文件AI 的回答在某种意义上是通过限制来实现上述的，但是仅仅用映射文件来对应所有的提问模式是很难的，所以不能按照目标来回答的事情很多都在烦恼中。

你有什么好主意就告诉我。

使用方法

安装

git clone https://github.com/burnworks/mcp-a11y-learning-guide.git
cd mcp-a11y-learning-guide
npm install
npm run build

Claude Desktop 设置示例

Claude Desktop 的配置文件（claude_desktop_config.json），模板名称将采用不同的格式。

配置文件位置

• 窗户： %APPDATA%\Claude\claude_desktop_config.json
• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json

※ Claude Desktop 的“设置”→“管理员”也可以打开设置文件。

配置文件示例

Claude Desktop 的配置文件（claude_desktop_config.json）也要追记如下。args 在工作空间的边缘dist/index.js 查看项目中可用的所有族。

Windows 在环境中 \ 时mcp-a11y-learning-guide\\dist\\index.js 像…一样 \ 求值时使用曲面法线的原始方向。

{
  "mcpServers": {
    "a11y-learning-guide": {
      "command": "node",
      "args": [
        "/full_path_to/mcp-a11y-learning-guide/dist/index.js"
      ]
    }
  }
}

可用工具

搜索_可访问性_主题

查找主题并提供官方文档。

• query （必需）：示例链接文本
• priority_filter (任意): all | must-read | high-priority

list_可用_主题

获取可用主题列表。

get_wca_criterion

获取特定的完成标准。

• criterion_id （必须）：例「2.4.4」

使用例

MCP 即使设定了服务器，突然提问的话，很多情况下AI 啊WCAG 文档等Web 中找到最佳实践。\ 首先，如下所示MCP 如果你告诉他们你希望他们用服务器来回答这一点，那就很可靠了。

• 「a11y-learning-guide 来帮助您学习。“
• 「a11y-learning-guide 中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。“
• 「get_wcag_criterion 请告诉我2.4.4“

列表框中，此格式对应于条目“无”。

然后，把想学习的内容AI 传达的话a11y-learning-guide 的功能来回答。

AI 对话示例

ユーザー:
  a11y-learning-guide の機能だけを使用して学習の手伝いをして

応答:
  a11y-learning-guideが利用可能です！このツールでは、WCAGに関する様々なトピックについて、公式ドキュメント（WCAG、Understanding、Techniques）へのリンクとともに情報を提供できます。

ユーザー:
  リンクテキストで気をつけることについて学習したい

応答:
  リンクテキストで気をつけるべきこと

  📋 達成基準の概要
  レベルA（必須）：WCAG 2.4.4

  リンクテキストの意味が文脈から判断できること
  周囲の文章や段落、リストなどと合わせて読めば目的が分かればOK

  レベルAAA（推奨）：WCAG 2.4.9

  リンクテキストだけで目的が判断できること
  前後の文脈がなくても、リンク単体で分かる必要がある

  ✅ 良い実装パターン

  1. H30: リンクの目的を示すリンクテキストを提供
    例：「製品ページへ」「お問い合わせフォーム」

  2. G91: 理解できるリンクテキストを使う
    具体的で明確な表現を使用

  3. ARIA8: aria-labelで補足説明
    視覚的には短く、支援技術には詳しく

  ❌ よくある失敗例

  1. F63: 異なるリンク先に同じテキスト
    悪い例：複数の「詳細」「こちら」リンク

  2. F84: リンクの目的を説明していない
    悪い例：「クリック」「もっと見る」だけ

  3. F89: アクセシブルな名前がない
    悪い例：画像だけのリンクで代替テキストなし

  📖 推奨する学習順序

  1. 達成基準 2.4.4（日本語）で基本要件を理解
  2. Understanding 2.4.4（日本語）で具体例を確認
  3. H30の達成方法（日本語）で実装を学ぶ
  4. F63の失敗例（日本語）で避けるべきパターンを把握

允许域（除此之外不引用）

• https://www.w3.org/TR/WCAG21/
• https://www.w3.org/TR/WCAG22/
• https://www.w3.org/WAI/WCAG21/Understanding/
• https://www.w3.org/WAI/WCAG22/Understanding/
• https://www.w3.org/WAI/WCAG21/Techniques/
• https://www.w3.org/WAI/WCAG22/Techniques/
• https://waic.jp/translations/

开发人员

添加映射文件

mappings/ 的YAML中所述修改相应参数的值。例如 mappings/links.yaml 来修改标记元素的显示属性。

开発

# 開発モード
npm run dev

# ビルド
npm run build

# テスト（Vitest）
npm test

操作注意事项

• 启动时缓存映射。如果已添加或编辑文件，请重新启动服务器。
• URL的白名单嵌入代码中（WCAG2.1/2.2的TR, Understanding, Techniques 以及WAIC日译）。将禁用未授权域路径。

许可证

麻省理工学院