{"id":"0fe48283-6baf-47e6-9681-d96b7954363f","shortId":"mQPxLc","kind":"skill","title":"a11y-audit","tagline":"Run a WCAG accessibility audit on a web page — checks heading hierarchy, landmark regions, color contrast, ARIA attributes, keyboard navigation, and screen reader compatibility. Use when the user wants to check, test, or audit accessibility (a11y) on a URL or the current page.","description":"Use the browser (via the Chrome/Playwright MCP) to audit the page for accessibility issues. Follow the steps below in order.\n\n## 1. Navigate and baseline\n\n1. Navigate to the page with `navigate_page`\n2. Run `list_console_messages` with `types: [\"issue\"]` and `includePreservedMessages: true` to catch native Chrome accessibility issues (missing labels, invalid ARIA, low contrast)\n\n## 2. Structure and semantics\n\n1. Run `take_snapshot` to capture the accessibility tree\n2. Check heading hierarchy (h1 > h2 > h3, no skipped levels)\n3. Verify landmark regions are present (main, nav, header, footer)\n4. Check page `<title>` is present and free of typos\n5. Compare snapshot order against a `take_screenshot` to confirm DOM order matches visual reading order\n\n## 3. Labels, images, and forms\n\nUsing the snapshot:\n\n- Buttons and links must have an accessible name (not empty)\n- Images must have meaningful `alt` text, decorative images use `alt=\"\"`\n- Form inputs must have associated labels — verify with `evaluate_script`:\n  ```js\n  [...document.querySelectorAll('input, select, textarea')]\n    .filter(el => !el.labels?.length && !el.getAttribute('aria-label') && !el.getAttribute('aria-labelledby'))\n    .map(el => el.outerHTML)\n  ```\n\n## 4. Keyboard navigation\n\n1. Press `Tab` and take a snapshot — locate the focused element in the tree\n2. Continue tabbing through key interactive elements to verify logical focus order\n3. If a modal or dialog is present, verify focus is trapped inside it\n4. Take a `take_screenshot` to confirm focus indicator is visible\n\n## 5. Color contrast\n\nCheck `list_console_messages` output for \"Low Contrast\" issues first. If the environment does not report them, use `evaluate_script` to check a specific element manually:\n\n```js\nconst el = document.querySelector('SELECTOR');\nconst style = getComputedStyle(el);\n[style.color, style.backgroundColor]\n```\n\n## 6. ARIA\n\nUsing the snapshot, verify:\n\n- No ARIA roles that duplicate native semantics (e.g., `<button role=\"button\">`)\n- No `aria-label` on elements that already have visible text\n- No invalid role values or misuse of `aria-hidden` on focusable elements\n\n## Report\n\nGroup findings by severity:\n\n- **Critical** — blocks access entirely\n- **Serious** — significantly impairs access\n- **Moderate** — causes confusion or extra effort\n- **Minor** — small improvements, including typos in visible or `<title>` text\n\nFor each issue: element or selector, what is wrong, and the fix.\n\nWhen the audit is complete, close the page with `close_page`.","tags":["a11y","audit","dotfiles","grimlink","agent-skills","ai-tools","bash","git","homebrew","laravel-valet","macos","magento2"],"capabilities":["skill","source-grimlink","skill-a11y-audit","topic-agent-skills","topic-ai-tools","topic-bash","topic-dotfiles","topic-git","topic-homebrew","topic-laravel-valet","topic-macos","topic-magento2","topic-nodejs","topic-php","topic-terminal"],"categories":["dotfiles"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/GrimLink/dotfiles/a11y-audit","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add GrimLink/dotfiles","source_repo":"https://github.com/GrimLink/dotfiles","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (2,522 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:54.663Z","embedding":null,"createdAt":"2026-05-18T13:14:34.643Z","updatedAt":"2026-05-18T19:08:54.663Z","lastSeenAt":"2026-05-18T19:08:54.663Z","tsv":"'1':67,71,106,221 '2':79,102,115,235 '3':125,160,247 '4':135,218,261 '5':144,272 '6':312 'a11y':2,39 'a11y-audit':1 'access':7,38,59,94,113,174,357,362 'alreadi':333 'alt':182,187 'aria':20,99,209,213,313,319,328,345 'aria-hidden':344 'aria-label':208,327 'aria-labelledbi':212 'associ':192 'attribut':21 'audit':3,8,37,55,392 'baselin':70 'block':356 'browser':49 'button':168 'captur':111 'catch':91 'caus':364 'check':13,34,116,136,275,296 'chrome':93 'chrome/playwright':52 'close':395,399 'color':18,273 'compar':145 'compat':27 'complet':394 'confirm':153,267 'confus':365 'consol':82,277 'const':302,306 'continu':236 'contrast':19,101,274,282 'critic':355 'current':45 'decor':184 'dialog':252 'document.queryselector':304 'document.queryselectorall':199 'dom':154 'duplic':322 'e.g':325 'effort':368 'el':204,216,303,309 'el.getattribute':207,211 'el.labels':205 'el.outerhtml':217 'element':231,241,299,331,349,381 'empti':177 'entir':358 'environ':287 'evalu':196,293 'extra':367 'filter':203 'find':352 'first':284 'fix':389 'focus':230,245,256,268,348 'follow':61 'footer':134 'form':164,188 'free':141 'getcomputedstyl':308 'group':351 'h1':119 'h2':120 'h3':121 'head':14,117 'header':133 'hidden':346 'hierarchi':15,118 'imag':162,178,185 'impair':361 'improv':371 'includ':372 'includepreservedmessag':88 'indic':269 'input':189,200 'insid':259 'interact':240 'invalid':98,338 'issu':60,86,95,283,380 'js':198,301 'key':239 'keyboard':22,219 'label':97,161,193,210,329 'labelledbi':214 'landmark':16,127 'length':206 'level':124 'link':170 'list':81,276 'locat':228 'logic':244 'low':100,281 'main':131 'manual':300 'map':215 'match':156 'mcp':53 'meaning':181 'messag':83,278 'minor':369 'miss':96 'misus':342 'modal':250 'moder':363 'must':171,179,190 'name':175 'nativ':92,323 'nav':132 'navig':23,68,72,77,220 'order':66,147,155,159,246 'output':279 'page':12,46,57,75,78,137,397,400 'present':130,139,254 'press':222 'read':158 'reader':26 'region':17,128 'report':290,350 'role':320,339 'run':4,80,107 'screen':25 'screenshot':151,265 'script':197,294 'select':201 'selector':305,383 'semant':105,324 'serious':359 'sever':354 'signific':360 'skill' 'skill-a11y-audit' 'skip':123 'small':370 'snapshot':109,146,167,227,316 'source-grimlink' 'specif':298 'step':63 'structur':103 'style':307 'style.backgroundcolor':311 'style.color':310 'tab':223,237 'take':108,150,225,262,264 'test':35 'text':183,336,377 'textarea':202 'topic-agent-skills' 'topic-ai-tools' 'topic-bash' 'topic-dotfiles' 'topic-git' 'topic-homebrew' 'topic-laravel-valet' 'topic-macos' 'topic-magento2' 'topic-nodejs' 'topic-php' 'topic-terminal' 'trap':258 'tree':114,234 'true':89 'type':85 'typo':143,373 'url':42 'use':28,47,165,186,292,314 'user':31 'valu':340 'verifi':126,194,243,255,317 'via':50 'visibl':271,335,375 'visual':157 'want':32 'wcag':6 'web':11 'wrong':386","prices":[{"id":"fa140417-971c-4f16-95a7-fafc137681ae","listingId":"0fe48283-6baf-47e6-9681-d96b7954363f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"GrimLink","category":"dotfiles","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:34.643Z"}],"sources":[{"listingId":"0fe48283-6baf-47e6-9681-d96b7954363f","source":"github","sourceId":"GrimLink/dotfiles/a11y-audit","sourceUrl":"https://github.com/GrimLink/dotfiles/tree/main/skills/a11y-audit","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:34.643Z","lastSeenAt":"2026-05-18T19:08:54.663Z"}],"details":{"listingId":"0fe48283-6baf-47e6-9681-d96b7954363f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"GrimLink","slug":"a11y-audit","github":{"repo":"GrimLink/dotfiles","stars":8,"topics":["agent-skills","ai-tools","bash","dotfiles","git","homebrew","laravel-valet","macos","magento2","nodejs","php","terminal","zsh"],"license":null,"html_url":"https://github.com/GrimLink/dotfiles","pushed_at":"2026-05-12T18:40:37Z","description":"🔧 My DEV env setup","skill_md_sha":"a469f2ab1ba6840d49679c6947072e77cedee46b","skill_md_path":"skills/a11y-audit/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/GrimLink/dotfiles/tree/main/skills/a11y-audit"},"layout":"multi","source":"github","category":"dotfiles","frontmatter":{"name":"a11y-audit","description":"Run a WCAG accessibility audit on a web page — checks heading hierarchy, landmark regions, color contrast, ARIA attributes, keyboard navigation, and screen reader compatibility. Use when the user wants to check, test, or audit accessibility (a11y) on a URL or the current page."},"skills_sh_url":"https://skills.sh/GrimLink/dotfiles/a11y-audit"},"updatedAt":"2026-05-18T19:08:54.663Z"}}