a11y-debugging

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:

يستخدم Chrome DevTools MCP لتصحيح أخطاء إمكانية الوصول (a11y) والتدقيق بناءً على إرشادات web.dev. يُستخدم عند اختبار HTML الدلالي، وتسميات ARIA، وحالات التركيز، والتنقل عبر لوحة المفاتيح، وأهداف النقر، وتباين الألوان. المصدر: chromedevtools/chrome-devtools-mcp.