a11y-debugging

Name: a11y-debugging
Author: chromedevtools

✓

chromedevtools/chrome-devtools-mcpGitHub: chromedevtools/chrome-devtools-mcp 來源: chromedevtools/chrome-devtools-mcp

根據 web.dev 指南，使用 Chrome DevTools MCP 進行輔助功能 (a11y) 偵錯和審核。在測試語意 HTML、ARIA 標籤、焦點狀態、鍵盤導覽、點擊目標和顏色對比時使用。

chromedevtools·a11y·debugging

79安裝·6熱度·@chromedevtools

安裝

GitHub: chromedevtools/chrome-devtools-mcp

$npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging

如何安裝 a11y-debugging

透過命令列快速安裝 a11y-debugging AI 技能到你的開發環境

開啟終端機: 開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等）
執行安裝指令: 複製並執行以下指令：npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging
驗證安裝: 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用

來源：chromedevtools/chrome-devtools-mcp。

SKILL.md

查看原文

Accessibility Tree vs DOM: Visually hiding an element (e.g., CSS opacity: 0) behaves differently for screen readers than display: none or aria-hidden="true". The takesnapshot tool returns the accessibility tree of the page, which represents what assistive technologies "see", making it the most reliable source of truth for semantic structure.

Reading web.dev documentation: If you need to research specific accessibility guidelines (like https://web.dev/articles/accessible-tap-targets), you can append .md.txt to the URL (e.g., https://web.dev/articles/accessible-tap-targets.md.txt) to fetch the clean, raw markdown version. This is much easier to read!

Chrome automatically checks for common accessibility problems. Use listconsolemessages to check for these native audits first:

根據 web.dev 指南，使用 Chrome DevTools MCP 進行輔助功能 (a11y) 偵錯和審核。在測試語意 HTML、ARIA 標籤、焦點狀態、鍵盤導覽、點擊目標和顏色對比時使用。來源：chromedevtools/chrome-devtools-mcp。

可引用資訊

為搜尋與 AI 引用準備的穩定欄位與指令。

安裝指令: npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging
來源: chromedevtools/chrome-devtools-mcp
分類: </>開發工具
認證: ✓
收錄時間: 2026-02-23
更新時間: 2026-03-10
連結: https://www.learn-skills.dev/tw/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging

Browse more skills from chromedevtools/chrome-devtools-mcp

快速解答

什麼是 a11y-debugging？

如何安裝 a11y-debugging？

開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等）複製並執行以下指令：npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill a11y-debugging 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用

這個 Skill 的原始碼在哪？

https://github.com/chromedevtools/chrome-devtools-mcp

詳情

分類: </>開發工具
來源: skills.sh
收錄時間: 2026-02-23