feat: add a new skill for accessibility debugging and auditing with Chrome DevTools MCP. by natorion · Pull Request #1002 · ChromeDevTools/chrome-devtools-mcp

natorion · 2026-02-20T08:35:58Z

No description provided.

…hrome DevTools MCP.

skills/a11y-debugging/SKILL.md

…napshot` instead of `evaluate_script`.

…tive checks and clarifying script limitations.

natorion · 2026-02-20T11:27:53Z

The code examples are hit or miss. Let;s see if I can make them better.

…t snippets to be IIFEs with console logging for manual usage.

…n and add debugging logs to a11y tests.

natorion · 2026-02-20T12:26:56Z

I now tuned the js snippets a bit, so that gemini 2.5 pro is able to utilize them for effect. I think this looks good for now.

matthiasrohmer · 2026-02-20T13:21:18Z

skills/a11y-debugging/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 `take_snapshot` 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 using the `read_url_content` tool!


Is read_url_content agent/model agnostic? Or will they be able to map that to whatever their own implemention is called?

matthiasrohmer · 2026-02-20T13:22:30Z

skills/a11y-debugging/SKILL.md

+Chrome automatically checks for common accessibility problems. Use `list_console_messages` to check for these native audits first:
+
+- `types`: `["issue"]`
+- `includePreservedMessages`: `true` (to catch issues that occurred during page load)


If we instruct to use tools with such high specificity, how do we ensure they stay aligned to potential future API updates?

As the skills are in the same directory as the tools, I would assume they will change in lockstep.

matthiasrohmer · 2026-02-20T13:24:14Z

skills/a11y-debugging/SKILL.md

+
+1.  Locate buttons, inputs, and images in the `take_snapshot` output.
+2.  Ensure interactive elements have an accessible name (e.g., a button should not just say `""` if it only contains an icon).
+3.  **Orphaned Inputs**: Verify that all form inputs have associated labels. Use `evaluate_script` to check for inputs missing `id` (for `label[for]`) or `aria-label`:


I think there's a chance to shorten here. The model will be able to infer to check for inputs missing id(forlabel[for]) or aria-label`` from the following code snippet anyway.

matthiasrohmer · 2026-02-20T13:24:28Z

skills/a11y-debugging/SKILL.md

+    };
+    ```
+
+````


matthiasrohmer · 2026-02-20T13:24:45Z

skills/a11y-debugging/SKILL.md

+4.  Check images for `alt` text.
+
+### 4. Focus & Keyboard Navigation


Orphaned too?

matthiasrohmer · 2026-02-20T13:26:48Z

skills/a11y-debugging/SKILL.md

+According to web.dev, tap targets should be at least 48x48 pixels with sufficient spacing. Since the accessibility tree doesn't show sizes, use `evaluate_script`:
+
+```javascript
+// Usage in console: copy, paste, and call with element: fn(element)


Comment can be removed.

matthiasrohmer · 2026-02-20T13:27:08Z

skills/a11y-debugging/SKILL.md

+};
+````
+
+_Pass the element's `uid` from the snapshot as an argument to the tool._


To which tool?

matthiasrohmer · 2026-02-20T13:28:17Z

skills/a11y-debugging/SKILL.md

+
+**Note**: This script uses a simplified algorithm and may not account for transparency, gradients, or background images. For production-grade auditing, consider injecting `axe-core`.
+
+```javascript


Nit: we could shorten this to js for every snippet, for token optimization.

matthiasrohmer · 2026-02-20T13:29:16Z

skills/a11y-debugging/SKILL.md

+**Note**: This script uses a simplified algorithm and may not account for transparency, gradients, or background images. For production-grade auditing, consider injecting `axe-core`.
+
+```javascript
+el => {


Not actionable for this PR, but is there an opportunity to expose this internal DevTools functionality through CDP? @OrKoN?

matthiasrohmer · 2026-02-20T13:30:13Z

skills/a11y-debugging/SKILL.md

+Verify document-level accessibility settings often missed in component testing:
+
+```javascript
+(() => {


Shouldn't this use evaluate_script instead of printing to the console? Because the later would require the list console messages tool.

🤖 I have created a release *beep* *boop* --- ## [0.18.0](chrome-devtools-mcp-v0.17.3...chrome-devtools-mcp-v0.18.0) (2026-02-24) ### 🎉 Features * `--slim` mode for maximum token savings ([#958](#958)) ([c402b43](c402b43)) * add a new skill for accessibility debugging and auditing with Chrome DevTools MCP. ([#1002](#1002)) ([b0c6d04](b0c6d04)) * add experimental screencast recording tools ([#941](#941)) ([33446d4](33446d4)) * add skill to debug and optimize LCP ([#993](#993)) ([2cd9b95](2cd9b95)) * add storage-isolated browser contexts ([#991](#991)) ([59f6477](59f6477)) * add take_memory_snapshot tool ([#1023](#1023)) ([7ffdc5e](7ffdc5e)) * support any-match text arrays in wait_for ([#1011](#1011)) ([496ab1b](496ab1b)) * support type_text ([#1026](#1026)) ([b5d01b5](b5d01b5)) ### 🛠️ Fixes * detect X server display on Linux ([#1027](#1027)) ([1746ed9](1746ed9)) ### ♻️ Chores * cleanup string and structured console formatters ([#1005](#1005)) ([0d78685](0d78685)) * extract version in a seprate file ([#1032](#1032)) ([0106865](0106865)) * move emulation settings to context ([#1000](#1000)) ([bc3c40e](bc3c40e)) * optimize slim tool descriptions and params ([#1028](#1028)) ([ca6635d](ca6635d)) * simplify JavaScript code examples, update code block language, and refine descriptions in a11y debugging skill documentation. ([#1009](#1009)) ([5cedcaa](5cedcaa)) * types for JSON output of IssueFormatter ([#1007](#1007)) ([9ef4479](9ef4479)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).

…hrome DevTools MCP. (ChromeDevTools#1002)

natorion added 2 commits February 20, 2026 09:34

feat: add a new skill for accessibility debugging and auditing with C…

569dbe6

…hrome DevTools MCP.

Reformat

9a73b60

natorion requested review from OrKoN and matthiasrohmer February 20, 2026 08:37

Merge branch 'main' into skills

4d70d07

natorion marked this pull request as ready for review February 20, 2026 08:38

natorion enabled auto-merge February 20, 2026 08:38

OrKoN reviewed Feb 20, 2026

View reviewed changes

skills/a11y-debugging/SKILL.md Outdated Show resolved Hide resolved

OrKoN reviewed Feb 20, 2026

View reviewed changes

skills/a11y-debugging/SKILL.md Show resolved Hide resolved

natorion added 2 commits February 20, 2026 11:01

docs: Update a11y-debugging skill guide to verify focus using `take_s…

97a4047

…napshot` instead of `evaluate_script`.

docs: Improve color contrast verification guidance by prioritizing na…

739ffa8

…tive checks and clarifying script limitations.

OrKoN approved these changes Feb 20, 2026

View reviewed changes

natorion disabled auto-merge February 20, 2026 11:24

natorion added 4 commits February 20, 2026 12:31

feat: add tests for the a11y-debugging skill and update its JavaScrip…

fee7e90

…t snippets to be IIFEs with console logging for manual usage.

refactor: Simplify JavaScript snippets in a11y-debugging documentatio…

687aa1b

…n and add debugging logs to a11y tests.

feat: delete a11y_debugging.test.ts

354be91

Reformat

c8addd2

natorion enabled auto-merge February 20, 2026 12:27

natorion added this pull request to the merge queue Feb 20, 2026

OrKoN approved these changes Feb 20, 2026

View reviewed changes

Merged via the queue into main with commit b0c6d04 Feb 20, 2026
20 checks passed

natorion deleted the skills branch February 20, 2026 12:39

browser-automation-bot mentioned this pull request Feb 20, 2026

chore(main): release chrome-devtools-mcp 0.18.0 #1006

Merged

matthiasrohmer reviewed Feb 20, 2026

View reviewed changes

wolfib pushed a commit to wolfib/chrome-devtools-mcp that referenced this pull request Mar 10, 2026

feat: add a new skill for accessibility debugging and auditing with C…

a9cf7a6

…hrome DevTools MCP. (ChromeDevTools#1002)


		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 `take_snapshot` 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 using the `read_url_content` tool!

+                  };
+                  ```
+              ````

		4. Check images for `alt` text.

		### 4. Focus & Keyboard Navigation


		Note: This script uses a simplified algorithm and may not account for transparency, gradients, or background images. For production-grade auditing, consider injecting `axe-core`.

		```javascript

Conversation

natorion commented Feb 20, 2026

Uh oh!

Uh oh!

Uh oh!

natorion commented Feb 20, 2026

Uh oh!

natorion commented Feb 20, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants