{"id":"90f66164-d9c6-490d-90b9-0c5840a75a96","shortId":"saV6zp","kind":"skill","title":"a11y-audit","tagline":"Audit accessibility compliance in frontend code. Use when user asks to \"check accessibility\", \"/a11y-audit\", \"audit a11y\", \"check WCAG\", or wants to find accessibility issues. Don't use for backend code, non-UI files, or projects without HTML/JSX output.","description":"# Accessibility Audit\n\n## Workflow\n\n1. Detect framework from `package.json` (React, Vue, Svelte)\n2. Run static analysis -- grep JSX/TSX/HTML files for violations using the checklist below\n3. If dev server is running, optionally run axe-core CLI:\n   ```bash\n   npx @axe-core/cli@4 http://localhost:3000\n   ```\n4. Report findings grouped by severity\n\n## WCAG Checklist\n\n### Level A -- Critical (blocks assistive technology users)\n\n**Images:**\n- Every `<img>` has `alt`; decorative images use `alt=\"\"`\n- Complex images (charts, diagrams) have detailed `alt` or linked description\n\n**Forms:**\n- Every input has `<label>` (via `htmlFor`/`for` or `aria-label`)\n- Required fields indicated (not by color alone)\n- Error messages are descriptive and linked to the field\n\n**Interactive elements:**\n- All interactive elements are focusable (no `tabindex=\"-1\"` on clickable elements)\n- No `<div onClick>` or `<span onClick>` -- use `<button>` or `<a>`\n- Links have descriptive text (not \"click here\")\n- Buttons have accessible names (text content or `aria-label`)\n\n**Structure:**\n- Single `<h1>` per page; heading levels not skipped\n- Lists use `<ul>`/`<ol>`, not manual bullet characters\n\n### Level AA -- Serious (significantly impacts usability)\n\n**Color & contrast:**\n- Text contrast >= 4.5:1 (normal), >= 3:1 (large 18pt+)\n- Information not conveyed by color alone\n- Focus indicator visible (not removed without replacement)\n\n**Navigation:**\n- Skip-to-content link present\n- Landmarks: `<main>`, `<nav>`, `<header>`, `<footer>`\n- Navigation order matches visual order\n\n**Dynamic content:**\n- Modals trap focus and return focus on close\n- Loading states announced (`aria-live` or `aria-busy`)\n- Error messages announced (not just shown visually)\n\n### Common React anti-patterns\n\n```tsx\n// Bad: non-semantic interactive element\n<div onClick={handleClose}>x</div>\n// Good\n<button onClick={handleClose} aria-label=\"Close dialog\">x</button>\n\n// Bad: unlabeled input\n<input type=\"text\" placeholder=\"Email\" />\n// Good\n<label htmlFor=\"email\">Email</label>\n<input id=\"email\" type=\"email\" />\n\n// Bad: color-only error\n<input style={{ border: '1px solid red' }} />\n// Good\n<input aria-invalid=\"true\" aria-describedby=\"email-error\" />\n<span id=\"email-error\" role=\"alert\">Email is required</span>\n```\n\n## Output format\n\nGroup by WCAG criterion:\n- **Critical** (A) -- blocks assistive technology\n- **Serious** (AA) -- significantly impacts usability\n- **Suggestions** -- best practice improvements\n\nUse `file:line` references. Include the fix for each finding.\n\n## Rules\n\n- Report `file:line` + violation + WCAG criterion + fix\n- Never auto-fix -- show what to change and why\n- Prioritize keyboard navigation and screen reader issues\n\n## Error Handling\n\n- `@axe-core/cli` fails (no dev server) -- fall back to static analysis; note axe was skipped\n- No JSX/HTML files found -- report incompatible project and stop\n- Framework undetected -- scan all `.html`, `.jsx`, `.tsx`, `.vue` files","tags":["a11y","audit","agent","skills","helderberto","agent-skills","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli"],"capabilities":["skill","source-helderberto","skill-a11y-audit","topic-agent-skills","topic-ai-tools","topic-antigravity","topic-claude-code","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-markdown","topic-plugin","topic-sdlc","topic-skills","topic-tracer-bullet"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/helderberto/agent-skills/a11y-audit","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add helderberto/agent-skills","source_repo":"https://github.com/helderberto/agent-skills","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,964 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:09:11.331Z","embedding":null,"createdAt":"2026-05-18T13:14:51.261Z","updatedAt":"2026-05-18T19:09:11.331Z","lastSeenAt":"2026-05-18T19:09:11.331Z","tsv":"'-1':157 '/a11y-audit':17 '/cli':84,372 '1':46,207,210 '18pt':212 '1px':305 '2':54 '3':67,209 '3000':87 '4':85,88 '4.5':206 'a11y':2,19 'a11y-audit':1 'aa':197,324 'access':5,16,26,43,174 'alon':138,218 'alt':106,110,117 'analysi':57,381 'announc':251,261 'anti':269 'anti-pattern':268 'aria':130,180,253,257,287 'aria-busi':256 'aria-l':252 'aria-label':129,179,286 'ask':13 'assist':100,321 'audit':3,4,18,44 'auto':352 'auto-fix':351 'axe':76,82,370,383 'axe-cor':75,81,369 'back':378 'backend':32 'bad':272,292,297 'bash':79 'best':329 'block':99,320 'border':304 'bullet':194 'busi':258 'button':172,283 'chang':357 'charact':195 'chart':113 'check':15,20 'checklist':65,95 'cli':78 'click':170 'clickabl':159 'close':248,289 'code':9,33 'color':137,202,217,299 'color-on':298 'common':266 'complex':111 'complianc':6 'content':177,230,240 'contrast':203,205 'convey':215 'core':77,83,371 'criterion':317,348 'critic':98,318 'decor':107 'descript':120,142,167 'detail':116 'detect':47 'dev':69,375 'diagram':114 'dialog':290 'div':278 'dynam':239 'element':149,152,160,277 'email':296,309 'error':139,259,301,367 'everi':104,122 'fail':373 'fall':377 'field':133,147 'file':37,60,333,344,388,403 'find':25,90,341 'fix':338,349,353 'focus':154,219,243,246 'form':121 'format':313 'found':389 'framework':48,395 'frontend':8 'good':282,295,308 'grep':58 'group':91,314 'handl':368 'handleclos':280,285 'head':186 'html':399 'html/jsx':41 'htmlfor':126 'imag':103,108,112 'impact':200,326 'improv':331 'includ':336 'incompat':391 'indic':134,220 'inform':213 'input':123,294,302 'interact':148,151,276 'issu':27,366 'jsx':400 'jsx/html':387 'jsx/tsx/html':59 'keyboard':361 'label':131,181,288 'landmark':233 'larg':211 'level':96,187,196 'line':334,345 'link':119,144,165,231 'list':190 'live':254 'load':249 'localhost':86 'manual':193 'match':236 'messag':140,260 'modal':241 'name':175 'navig':226,234,362 'never':350 'non':35,274 'non-semant':273 'non-ui':34 'normal':208 'note':382 'npx':80 'onclick':279,284 'option':73 'order':235,238 'output':42,312 'package.json':50 'page':185 'pattern':270 'per':184 'practic':330 'present':232 'priorit':360 'project':39,392 'react':51,267 'reader':365 'red':307 'refer':335 'remov':223 'replac':225 'report':89,343,390 'requir':132,311 'return':245 'rule':342 'run':55,72,74 'scan':397 'screen':364 'semant':275 'serious':198,323 'server':70,376 'sever':93 'show':354 'shown':264 'signific':199,325 'singl':183 'skill' 'skill-a11y-audit' 'skip':189,228,385 'skip-to-cont':227 'solid':306 'source-helderberto' 'state':250 'static':56,380 'stop':394 'structur':182 'style':303 'suggest':328 'svelt':53 'tabindex':156 'technolog':101,322 'text':168,176,204 'topic-agent-skills' 'topic-ai-tools' 'topic-antigravity' 'topic-claude-code' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-markdown' 'topic-plugin' 'topic-sdlc' 'topic-skills' 'topic-tracer-bullet' 'trap':242 'tsx':271,401 'ui':36 'undetect':396 'unlabel':293 'usabl':201,327 'use':10,30,63,109,163,191,332 'user':12,102 'via':125 'violat':62,346 'visibl':221 'visual':237,265 'vue':52,402 'want':23 'wcag':21,94,316,347 'without':40,224 'workflow':45 'x':281,291","prices":[{"id":"9e6f586a-3b64-4080-be6a-6d875df2d034","listingId":"90f66164-d9c6-490d-90b9-0c5840a75a96","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"helderberto","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:51.261Z"}],"sources":[{"listingId":"90f66164-d9c6-490d-90b9-0c5840a75a96","source":"github","sourceId":"helderberto/agent-skills/a11y-audit","sourceUrl":"https://github.com/helderberto/agent-skills/tree/main/skills/a11y-audit","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:51.261Z","lastSeenAt":"2026-05-18T19:09:11.331Z"}],"details":{"listingId":"90f66164-d9c6-490d-90b9-0c5840a75a96","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"helderberto","slug":"a11y-audit","github":{"repo":"helderberto/agent-skills","stars":8,"topics":["agent-skills","ai","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli","markdown","plugin","sdlc","skills","tracer-bullet"],"license":"mit","html_url":"https://github.com/helderberto/agent-skills","pushed_at":"2026-05-14T11:37:47Z","description":"My personal SDLC toolbelt for AI coding agents — PRD to ship.","skill_md_sha":"1c114906d4aa4966c46fd84fe42e5b9a2f476980","skill_md_path":"skills/a11y-audit/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/helderberto/agent-skills/tree/main/skills/a11y-audit"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"a11y-audit","description":"Audit accessibility compliance in frontend code. Use when user asks to \"check accessibility\", \"/a11y-audit\", \"audit a11y\", \"check WCAG\", or wants to find accessibility issues. Don't use for backend code, non-UI files, or projects without HTML/JSX output."},"skills_sh_url":"https://skills.sh/helderberto/agent-skills/a11y-audit"},"updatedAt":"2026-05-18T19:09:11.331Z"}}