Accessibilitymcp

A11y MCP是一個為LLM提供網頁無障礙測試能力的MCP服務器，通過集成Deque Axe-core API和Puppeteer實現WCAG合規性檢測

開發者工具法律與合規 #無障礙測試 #WCAG檢測 #網頁可訪問性本地 .JavaScript

評分 : 2分

下載量 : 5.4K

更新時間 : 2025-04-29

打開站點

什麼是A11y MCP？

A11y MCP是一個用於通過自動化方式檢查網頁和HTML內容是否符合Web可訪問性標準的工具。它利用了Deque Labs的axe-core引擎來執行詳細的可訪問性測試，並提供詳細的違規報告。

如何使用A11y MCP？

用戶可以通過發送包含特定參數的請求到此服務器，指定要測試的內容（例如URL或HTML字符串）以及所需的可訪問性標準。服務器將返回詳細的測試結果和改進建議。

使用場景

適用於需要自動化檢查網頁或組件是否符合Web可訪問性標準的開發者、測試人員和團隊。特別適合CI/CD管道集成，以確保代碼更改不會引入新的可訪問性問題。

支持的可訪問性標準

支持WCAG 2.0、2.1和2.2標準，並允許指定具體版本進行測試。

網頁URL測試

可以通過提供公開可訪問的URL來檢查整個網頁的可訪問性問題。

HTML片段測試

可以直接提供HTML代碼片段進行可訪問性檢查，適用於局部內容驗證。

顏色對比檢查

專門用於驗證文本和背景的顏色對比是否符合WCAG標準。

支持哪些可訪問性標準？

能否測試受密碼保護的頁面？

測試結果的準確性如何？

這是Deque的官方產品嗎？

Smithery徽章

服務器狀態徽章

GLAM.AI服務器頁面

查看有關此MCP服務器的更多信息和文檔。

🚀 網絡可訪問性測試 MCP 服務器（A11y MCP）

Web 可訪問性測試 MCP 服務器（A11y MCP） 是一款用於 Web 應用程序可訪問性測試的工具。它支持通過 Model Context Protocol (MCP) 進行交互，基於 @modelcontextprotocol/sdk 搭建，結合 puppeteer 和 axe-core 等庫，提供全面的可訪問性測試功能。

🚀 快速開始

Web 可訪問性測試 MCP 服務器（A11y MCP）能幫助你對 Web 應用進行可訪問性測試。以下將為你介紹安裝、配置及使用的相關內容。

✨ 主要特性

核心功能

可訪問性測試：藉助 axe-core 分析網頁內容，檢測不符合 WCAG 2.1 級別 AAA 的問題。
DOM 操作：利用 Puppeteer 提供的 API 進行元素定位、點擊、輸入等操作。
報告生成：返回詳細的可訪問性測試結果，涵蓋違規項、通過項和不適用項。

支持的功能

顏色對比檢測：確保文本與背景之間的對比度符合 WCAG 標準。
表單驗證：檢查表單元素是否符合可訪問性規範，如標籤關聯、輸入提示等。
屏幕閱讀器支持：驗證網頁內容是否能夠被屏幕閱讀器正確解析和朗讀。
鍵盤導航測試：確保用戶可以通過鍵盤完成所有交互操作。

📦 安裝指南

依賴項

@modelcontextprotocol/sdk
puppeteer
@axe-core/puppeteer
axe-core

安裝步驟

使用 Node.js 包管理器 (npm) 或 yarn 下載所有依賴：

npm install @modelcontextprotocol/sdk puppeteer @axe-core/puppeteer axe-core

配置環境變量或在代碼中指定 Puppeteer 的瀏覽器執行模式（如 headless 或 non-headless）。

💻 使用示例

基礎用法

const { createMcpServer } = require('@modelcontextprotocol/sdk');
const puppeteer = require('puppeteer');
const axe = require('axe-core');

// 初始化 Puppeteer 瀏覽器實例
let browser;
async function initBrowser() {
  browser = await puppeteer.launch({
    headless: true,
    width: 1200,
    height: 800,
  });
}

// 創建 MCP 服務器
const server = createMcpServer({
  async getBrowser() {
    if (!browser) await initBrowser();
    return browser;
  },
});

// 示例測試用例：檢測顏色對比
async function testContrast(url) {
  const page = await browser.newPage();
  await page.goto(url);
  const result = await axe.run(page);
  return result;
}

// 啟動服務器並開始測試
server.start(3000);

📚 詳細文檔

響應格式

MCP 服務器返回的可訪問性測試結果採用 JSON 格式：

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "確保文本與背景之間的對比度符合 WCAG 2 AA 最低要求。",
      "help": "元素必須滿足最低顏色對比度閾值。",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
      "affectedNodes": [
        {
          "html": "<div style=\"color: #aaa; background-color: #eee;\">低對比度文本</div>",
          "target": ["div"],
          "failureSummary": "修復以下任一問題：元素的對比度為 1.98（前景色：#aaa，背景色：#eee，字體大小：12.0pt，字體重量：正常）未達到最低要求。"
        }
      ]
    }
  ],
  "passes": 1,
  "incomplete": 0,
  "inapplicable": 2,
  "timestamp": "2025-04-25T16:45:33.655Z",
  "url": "about:blank",
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.3"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
    "width": 1200,
    "height": 800
  }
}