[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AE5KV95ZDZM8THG7CHWG6Z":3,"skill-same:01M6AE5KV95ZDZM8THG7CHWG6Z":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":56,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M6AE5KV95ZDZM8THG7CHWG6Z","accessibility-auditor",null,"Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA\u002FAAA standards, testing with screen readers, or ensuring ADA compliance. Expert in semantic HTML, keyboard navigation, and assistive technology compatibility.","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33481,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Faccessibility-auditor\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"accessibility","auditor","accessibility auditor","aria","when","accessibility specialist","for","implementing","screen","keyboard","ada","technology","compatibility","testing","expert","standards","html","compliance","issues","web accessibility","web","design","2026-11-10 10:12:30",false,"---\nname: accessibility-auditor\ndescription: Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA\u002FAAA standards, testing with screen readers, or ensuring ADA compliance. Expert in semantic HTML, keyboard navigation, and assistive technology compatibility.\n---\n\n# Accessibility Auditor\n\nComprehensive guidance for creating accessible web experiences that comply with WCAG standards and serve users of all abilities effectively.\n\n## When to Use This Skill\n\nUse this skill when:\n- Auditing websites for accessibility compliance\n- Implementing WCAG 2.1 Level AA or AAA standards\n- Fixing accessibility violations and errors\n- Testing with screen readers (NVDA, JAWS, VoiceOver)\n- Ensuring keyboard navigation works correctly\n- Implementing ARIA attributes and landmarks\n- Preparing for ADA or Section 508 compliance audits\n- Designing inclusive user experiences\n\n## WCAG 2.1 Principles (POUR)\n\n### 1. Perceivable\nUsers must be able to perceive the information being presented.\n\n### 2. Operable\nUsers must be able to operate the interface.\n\n### 3. Understandable\nUsers must be able to understand the information and interface.\n\n### 4. Robust\nContent must be robust enough to work with current and future technologies.\n\n## Common Accessibility Issues & Fixes\n\n### 1. Missing Alt Text for Images\n\n**❌ Problem:**\n```html\n\u003Cimg src=\"\u002Fproducts\u002Fshoes.jpg\">\n```\n\n**✅ Solution:**\n```html\n\u003C!-- Informative image -->\n\u003Cimg src=\"\u002Fproducts\u002Fshoes.jpg\" alt=\"Red Nike Air Max running shoes with white swoosh\">\n\n\u003C!-- Decorative image -->\n\u003Cimg src=\"\u002Fdecorative-pattern.svg\" alt=\"\" role=\"presentation\">\n\n\u003C!-- Logo that links -->\n\u003Ca href=\"\u002F\">\n  \u003Cimg src=\"\u002Flogo.png\" alt=\"Company Name - Home\">\n\u003C\u002Fa>\n```\n\n**Rules:**\n- Informative images: Describe the content\u002Ffunction\n- Decorative images: Use empty alt (alt=\"\")\n- Functional images: Describe the action\n- Complex images: Provide detailed description nearby\n\n### 2. Low Color Contrast\n\n**❌ Problem:**\n```css\n\u002F* Contrast ratio 2.5:1 - Fails WCAG *\u002F\n.text {\n  color: #767676;\n  background: #ffffff;\n}\n```\n\n**✅ Solution:**\n```css\n\u002F* Contrast ratio 4.5:1+ - Passes AA *\u002F\n.text {\n  color: #595959;\n  background: #ffffff;\n}\n\n\u002F* Contrast ratio 7:1+ - Passes AAA *\u002F\n.text-high-contrast {\n  color: #333333;\n  background: #ffffff;\n}\n```\n\n**Requirements:**\n- Normal text (\u003C 18px): 4.5:1 minimum (AA), 7:1 enhanced (AAA)\n- Large text (≥ 18px or ≥ 14px bold): 3:1 minimum (AA), 4.5:1 enhanced (AAA)\n- UI components and graphics: 3:1 minimum\n\n### 3. Non-Semantic HTML\n\n**❌ Problem:**\n```html\n\u003Cdiv class=\"button\" onclick=\"submitForm()\">Submit\u003C\u002Fdiv>\n\u003Cdiv class=\"heading\">Page Title\u003C\u002Fdiv>\n\u003Cdiv class=\"nav-menu\">...\u003C\u002Fdiv>\n```\n\n**✅ Solution:**\n```html\n\u003Cbutton type=\"submit\" onclick=\"submitForm()\">Submit\u003C\u002Fbutton>\n\u003Ch1>Page Title\u003C\u002Fh1>\n\u003Cnav aria-label=\"Main navigation\">...\u003C\u002Fnav>\n```\n\n**Semantic Elements:**\n- `\u003Cbutton>` for buttons\n- `\u003Ca>` for links\n- `\u003Ch1>` - `\u003Ch6>` for headings (hierarchical)\n- `\u003Cnav>`, `\u003Cmain>`, `\u003Caside>`, `\u003Carticle>`, `\u003Csection>` for landmarks\n- `\u003Cul>`, `\u003Col>`, `\u003Cli>` for lists\n- `\u003Ctable>`, `\u003Cth>`, `\u003Ctd>` for tabular data\n\n### 4. Missing Form Labels\n\n**❌ Problem:**\n```html\n\u003Cinput type=\"email\" placeholder=\"Enter your email\">\n```\n\n**✅ Solution:**\n```html\n\u003C!-- Explicit label -->\n\u003Clabel for=\"email\">Email Address\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\" name=\"email\">\n\n\u003C!-- Implicit label -->\n\u003Clabel>\n  Email Address\n  \u003Cinput type=\"email\" name=\"email\">\n\u003C\u002Flabel>\n\n\u003C!-- Hidden label (for tight layouts) -->\n\u003Clabel for=\"search\" class=\"sr-only\">Search\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"search\" placeholder=\"Search...\">\n```\n\n**Best Practices:**\n- Every form field must have an associated label\n- Labels should be visible (don't rely on placeholder)\n- Use aria-label only when visual label isn't possible\n- Group related fields with `\u003Cfieldset>` and `\u003Clegend>`\n\n### 5. Keyboard Navigation Issues\n\n**❌ Problem:**\n```html\n\u003Cdiv onclick=\"handleClick()\">Click me\u003C\u002Fdiv>\n\u003Ca href=\"javascript:void(0)\" onclick=\"doSomething()\">Action\u003C\u002Fa>\n```\n\n**✅ Solution:**\n```html\n\u003C!-- Use proper button -->\n\u003Cbutton onclick=\"handleClick()\">Click me\u003C\u002Fbutton>\n\n\u003C!-- If div required, make it accessible -->\n\u003Cdiv\n  role=\"button\"\n  tabindex=\"0\"\n  onclick=\"handleClick()\"\n  onkeydown=\"handleKeyPress(event)\"\n>\n  Click me\n\u003C\u002Fdiv>\n\n\u003Cscript>\nfunction handleKeyPress(event) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    handleClick();\n  }\n}\n\u003C\u002Fscript>\n```\n\n**Keyboard Requirements:**\n- All interactive elements must be keyboard accessible\n- Visible focus indicators (outline or custom styling)\n- Logical tab order (matches visual flow)\n- Skip links for repetitive content\n- No keyboard traps (users can navigate away)\n\n### 6. Missing ARIA Landmarks\n\n**❌ Problem:**\n```html\n\u003Cdiv class=\"header\">...\u003C\u002Fdiv>\n\u003Cdiv class=\"main-content\">...\u003C\u002Fdiv>\n\u003Cdiv class=\"sidebar\">...\u003C\u002Fdiv>\n\u003Cdiv class=\"footer\">...\u003C\u002Fdiv>\n```\n\n**✅ Solution:**\n```html\n\u003Cheader role=\"banner\">\n  \u003Cnav aria-label=\"Main navigation\">...\u003C\u002Fnav>\n\u003C\u002Fheader>\n\n\u003Cmain role=\"main\">\n  \u003Ch1>Page Title\u003C\u002Fh1>\n  \u003Carticle>...\u003C\u002Farticle>\n\u003C\u002Fmain>\n\n\u003Caside role=\"complementary\" aria-label=\"Related articles\">\n  ...\n\u003C\u002Faside>\n\n\u003Cfooter role=\"contentinfo\">\n  ...\n\u003C\u002Ffooter>\n```\n\n**Common Landmarks:**\n- `banner` - Site header\n- `navigation` - Navigation menus\n- `main` - Primary content (one per page)\n- `complementary` - Supporting content\n- `contentinfo` - Site footer\n- `search` - Search functionality\n- `form` - Form regions\n\n### 7. Inaccessible Modals\u002FDialogs\n\n**❌ Problem:**\n```html\n\u003Cdiv class=\"modal\">\n  \u003Cdiv class=\"content\">\n    Modal content\n    \u003Cbutton onclick=\"closeModal()\">Close\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**✅ Solution:**\n```html\n\u003Cdiv\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"modal-title\"\n  aria-describedby=\"modal-desc\"\n>\n  \u003Ch2 id=\"modal-title\">Confirm Action\u003C\u002Fh2>\n  \u003Cp id=\"modal-desc\">Are you sure you want to delete this item?\u003C\u002Fp>\n\n  \u003Cbutton onclick=\"confirmAction()\">Confirm\u003C\u002Fbutton>\n  \u003Cbutton onclick=\"closeModal()\">Cancel\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cscript>\n\u002F\u002F Focus management\nfunction openModal() {\n  const modal = document.querySelector('[role=\"dialog\"]');\n  const focusableElements = modal.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n\n  \u002F\u002F Store previous focus\n  previousFocus = document.activeElement;\n\n  \u002F\u002F Focus first element\n  focusableElements[0].focus();\n\n  \u002F\u002F Trap focus\n  modal.addEventListener('keydown', trapFocus);\n}\n\nfunction closeModal() {\n  \u002F\u002F Return focus\n  if (previousFocus) previousFocus.focus();\n}\n\nfunction trapFocus(event) {\n  if (event.key !== 'Tab') return;\n\n  const focusableElements = Array.from(\n    modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n  );\n\n  const firstElement = focusableElements[0];\n  const lastElement = focusableElements[focusableElements.length - 1];\n\n  if (event.shiftKey && document.activeElement === firstElement) {\n    lastElement.focus();\n    event.preventDefault();\n  } else if (!event.shiftKey && document.activeElement === lastElement) {\n    firstElement.focus();\n    event.preventDefault();\n  }\n}\n\u003C\u002Fscript>\n```\n\n**Modal Requirements:**\n- `role=\"dialog\"` or `role=\"alertdialog\"`\n- `aria-modal=\"true\"` to indicate modal behavior\n- `aria-labelledby` pointing to title\n- `aria-describedby` for description (optional)\n- Focus management (trap and restore)\n- Close on Escape key\n- Prevent background scrolling\n\n### 8. Missing Skip Links\n\n**✅ Solution:**\n```html\n\u003Ca href=\"#main-content\" class=\"skip-link\">\n  Skip to main content\n\u003C\u002Fa>\n\n\u003Cheader>\n  \u003Cnav>...\u003C\u002Fnav>\n\u003C\u002Fheader>\n\n\u003Cmain id=\"main-content\" tabindex=\"-1\">\n  \u003C!-- Page content -->\n\u003C\u002Fmain>\n\n\u003Cstyle>\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px;\n  text-decoration: none;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n\u003C\u002Fstyle>\n```\n\n## ARIA Best Practices\n\n### ARIA Attributes Reference\n\n**States:**\n- `aria-checked` - Checkbox\u002Fradio state\n- `aria-disabled` - Disabled state\n- `aria-expanded` - Expanded\u002Fcollapsed state\n- `aria-hidden` - Hidden from assistive technology\n- `aria-pressed` - Toggle button state\n- `aria-selected` - Selected state\n\n**Properties:**\n- `aria-label` - Accessible name\n- `aria-labelledby` - ID reference for label\n- `aria-describedby` - ID reference for description\n- `aria-live` - Live region updates\n- `aria-required` - Required field\n- `aria-invalid` - Validation state\n\n### Live Regions\n\n```html\n\u003C!-- Polite: Wait for pause in speech -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\">\n  Item added to cart\n\u003C\u002Fdiv>\n\n\u003C!-- Assertive: Interrupt immediately -->\n\u003Cdiv aria-live=\"assertive\" role=\"alert\">\n  Error: Payment failed\n\u003C\u002Fdiv>\n\n\u003C!-- Status message -->\n\u003Cdiv role=\"status\" aria-live=\"polite\">\n  Saving changes...\n\u003C\u002Fdiv>\n```\n\n### Custom Components\n\n**Accordion:**\n```html\n\u003Cdiv class=\"accordion\">\n  \u003Cbutton\n    aria-expanded=\"false\"\n    aria-controls=\"panel-1\"\n    id=\"accordion-1\"\n  >\n    Section 1\n  \u003C\u002Fbutton>\n  \u003Cdiv id=\"panel-1\" role=\"region\" aria-labelledby=\"accordion-1\" hidden>\n    Panel content\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Tabs:**\n```html\n\u003Cdiv role=\"tablist\" aria-label=\"Content sections\">\n  \u003Cbutton\n    role=\"tab\"\n    aria-selected=\"true\"\n    aria-controls=\"panel-1\"\n    id=\"tab-1\"\n  >\n    Tab 1\n  \u003C\u002Fbutton>\n  \u003Cbutton\n    role=\"tab\"\n    aria-selected=\"false\"\n    aria-controls=\"panel-2\"\n    id=\"tab-2\"\n    tabindex=\"-1\"\n  >\n    Tab 2\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cdiv role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\">\n  Panel 1 content\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-2\" aria-labelledby=\"tab-2\" hidden>\n  Panel 2 content\n\u003C\u002Fdiv>\n```\n\n## Testing Checklist\n\n### Automated Testing\n- [ ] Run axe DevTools or WAVE browser extension\n- [ ] Check HTML validation (W3C Validator)\n- [ ] Test color contrast ratios\n- [ ] Verify heading hierarchy\n- [ ] Check for missing alt text\n\n### Manual Testing\n- [ ] Navigate entire site using only keyboard (Tab, Enter, Escape, Arrow keys)\n- [ ] Test with screen reader (NVDA, JAWS, or VoiceOver)\n- [ ] Verify focus indicators are visible\n- [ ] Check form validation messages are announced\n- [ ] Test modal focus trapping\n- [ ] Verify skip links work\n- [ ] Test with browser zoom at 200%\n- [ ] Check page reflow at different viewport sizes\n- [ ] Disable JavaScript and verify core functionality\n- [ ] Test with Windows High Contrast mode\n\n### Screen Reader Testing\n\n**VoiceOver (Mac):**\n- Enable: Cmd + F5\n- Navigate: Control + Option + Arrow keys\n- Read all: Control + Option + A\n\n**NVDA (Windows):**\n- Navigate: Arrow keys (browse mode) or Tab (focus mode)\n- Read all: NVDA + Down Arrow\n- Elements list: NVDA + F7\n\n**Test Scenarios:**\n- Can users understand page structure?\n- Are headings descriptive and hierarchical?\n- Are form labels clear and associated?\n- Are error messages announced?\n- Can users complete key tasks without vision?\n\n## Accessibility Statement\n\nInclude on website:\n\n```markdown\n# Accessibility Statement\n\nWe are committed to ensuring digital accessibility for people with disabilities. We continually improve the user experience for everyone and apply relevant accessibility standards.\n\n## Conformance Status\nThis website is partially conformant with WCAG 2.1 Level AA. \"Partially conformant\" means that some parts of the content do not fully conform to the accessibility standard.\n\n## Feedback\nWe welcome your feedback on the accessibility of this site. Please contact us:\n- Email: accessibility@example.com\n- Phone: +1-555-0123\n\n## Known Issues\n- [List any known accessibility issues and planned fixes]\n\nLast updated: [Date]\n```\n\n## Resources\n\n**Tools:**\n- axe DevTools (browser extension)\n- WAVE (web accessibility evaluation tool)\n- Lighthouse (Chrome DevTools)\n- Colour Contrast Analyser\n- Screen readers: NVDA, JAWS, VoiceOver\n\n**Guidelines:**\n- WCAG 2.1: https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F\n- ARIA Authoring Practices: https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F\n\nAccessibility is not optional—it's a fundamental requirement for creating inclusive web experiences. Prioritize it from the start of every project, not as an afterthought.\n","# Accessibility Auditor\n\nComprehensive guidance for creating accessible web experiences that comply with WCAG standards and serve users of all abilities effectively.\n\n## When to Use This Skill\n\nUse this skill when:\n- Auditing websites for accessibility compliance\n- Implementing WCAG 2.1 Level AA or AAA standards\n- Fixing accessibility violations and errors\n- Testing with screen readers (NVDA, JAWS, VoiceOver)\n- Ensuring keyboard navigation works correctly\n- Implementing ARIA attributes and landmarks\n- Preparing for ADA or Section 508 compliance audits\n- Designing inclusive user experiences\n\n## WCAG 2.1 Principles (POUR)\n\n### 1. Perceivable\nUsers must be able to perceive the information being presented.\n\n### 2. Operable\nUsers must be able to operate the interface.\n\n### 3. Understandable\nUsers must be able to understand the information and interface.\n\n### 4. Robust\nContent must be robust enough to work with current and future technologies.\n\n## Common Accessibility Issues & Fixes\n\n### 1. Missing Alt Text for Images\n\n**❌ Problem:**\n```html\n\u003Cimg src=\"\u002Fproducts\u002Fshoes.jpg\">\n```\n\n**✅ Solution:**\n```html\n\u003C!-- Informative image -->\n\u003Cimg src=\"\u002Fproducts\u002Fshoes.jpg\" alt=\"Red Nike Air Max running shoes with white swoosh\">\n\n\u003C!-- Decorative image -->\n\u003Cimg src=\"\u002Fdecorative-pattern.svg\" alt=\"\" role=\"presentation\">\n\n\u003C!-- Logo that links -->\n\u003Ca href=\"\u002F\">\n  \u003Cimg src=\"\u002Flogo.png\" alt=\"Company Name - Home\">\n\u003C\u002Fa>\n```\n\n**Rules:**\n- Informative images: Describe the content\u002Ffunction\n- Decorative images: Use empty alt (alt=\"\")\n- Functional images: Describe the action\n- Complex images: Provide detailed description nearby\n\n### 2. Low Color Contrast\n\n**❌ Problem:**\n```css\n\u002F* Contrast ratio 2.5:1 - Fails WCAG *\u002F\n.text {\n  color: #767676;\n  background: #ffffff;\n}\n```\n\n**✅ Solution:**\n```css\n\u002F* Contrast ratio 4.5:1+ - Passes AA *\u002F\n.text {\n  color: #595959;\n  background: #ffffff;\n}\n\n\u002F* Contrast ratio 7:1+ - Passes AAA *\u002F\n.text-high-contrast {\n  color: #333333;\n  background: #ffffff;\n}\n```\n\n**Requirements:**\n- Normal text (\u003C 18px): 4.5:1 minimum (AA), 7:1 enhanced (AAA)\n- Large text (≥ 18px or ≥ 14px bold): 3:1 minimum (AA), 4.5:1 enhanced (AAA)\n- UI components and graphics: 3:1 minimum\n\n### 3. Non-Semantic HTML\n\n**❌ Problem:**\n```html\n\u003Cdiv class=\"button\" onclick=\"submitForm()\">Submit\u003C\u002Fdiv>\n\u003Cdiv class=\"heading\">Page Title\u003C\u002Fdiv>\n\u003Cdiv class=\"nav-menu\">...\u003C\u002Fdiv>\n```\n\n**✅ Solution:**\n```html\n\u003Cbutton type=\"submit\" onclick=\"submitForm()\">Submit\u003C\u002Fbutton>\n\u003Ch1>Page Title\u003C\u002Fh1>\n\u003Cnav aria-label=\"Main navigation\">...\u003C\u002Fnav>\n```\n\n**Semantic Elements:**\n- `\u003Cbutton>` for buttons\n- `\u003Ca>` for links\n- `\u003Ch1>` - `\u003Ch6>` for headings (hierarchical)\n- `\u003Cnav>`, `\u003Cmain>`, `\u003Caside>`, `\u003Carticle>`, `\u003Csection>` for landmarks\n- `\u003Cul>`, `\u003Col>`, `\u003Cli>` for lists\n- `\u003Ctable>`, `\u003Cth>`, `\u003Ctd>` for tabular data\n\n### 4. Missing Form Labels\n\n**❌ Problem:**\n```html\n\u003Cinput type=\"email\" placeholder=\"Enter your email\">\n```\n\n**✅ Solution:**\n```html\n\u003C!-- Explicit label -->\n\u003Clabel for=\"email\">Email Address\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\" name=\"email\">\n\n\u003C!-- Implicit label -->\n\u003Clabel>\n  Email Address\n  \u003Cinput type=\"email\" name=\"email\">\n\u003C\u002Flabel>\n\n\u003C!-- Hidden label (for tight layouts) -->\n\u003Clabel for=\"search\" class=\"sr-only\">Search\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"search\" placeholder=\"Search...\">\n```\n\n**Best Practices:**\n- Every form field must have an associated label\n- Labels should be visible (don't rely on placeholder)\n- Use aria-label only when visual label isn't possible\n- Group related fields with `\u003Cfieldset>` and `\u003Clegend>`\n\n### 5. Keyboard Navigation Issues\n\n**❌ Problem:**\n```html\n\u003Cdiv onclick=\"handleClick()\">Click me\u003C\u002Fdiv>\n\u003Ca href=\"javascript:void(0)\" onclick=\"doSomething()\">Action\u003C\u002Fa>\n```\n\n**✅ Solution:**\n```html\n\u003C!-- Use proper button -->\n\u003Cbutton onclick=\"handleClick()\">Click me\u003C\u002Fbutton>\n\n\u003C!-- If div required, make it accessible -->\n\u003Cdiv\n  role=\"button\"\n  tabindex=\"0\"\n  onclick=\"handleClick()\"\n  onkeydown=\"handleKeyPress(event)\"\n>\n  Click me\n\u003C\u002Fdiv>\n\n\u003Cscript>\nfunction handleKeyPress(event) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    handleClick();\n  }\n}\n\u003C\u002Fscript>\n```\n\n**Keyboard Requirements:**\n- All interactive elements must be keyboard accessible\n- Visible focus indicators (outline or custom styling)\n- Logical tab order (matches visual flow)\n- Skip links for repetitive content\n- No keyboard traps (users can navigate away)\n\n### 6. Missing ARIA Landmarks\n\n**❌ Problem:**\n```html\n\u003Cdiv class=\"header\">...\u003C\u002Fdiv>\n\u003Cdiv class=\"main-content\">...\u003C\u002Fdiv>\n\u003Cdiv class=\"sidebar\">...\u003C\u002Fdiv>\n\u003Cdiv class=\"footer\">...\u003C\u002Fdiv>\n```\n\n**✅ Solution:**\n```html\n\u003Cheader role=\"banner\">\n  \u003Cnav aria-label=\"Main navigation\">...\u003C\u002Fnav>\n\u003C\u002Fheader>\n\n\u003Cmain role=\"main\">\n  \u003Ch1>Page Title\u003C\u002Fh1>\n  \u003Carticle>...\u003C\u002Farticle>\n\u003C\u002Fmain>\n\n\u003Caside role=\"complementary\" aria-label=\"Related articles\">\n  ...\n\u003C\u002Faside>\n\n\u003Cfooter role=\"contentinfo\">\n  ...\n\u003C\u002Ffooter>\n```\n\n**Common Landmarks:**\n- `banner` - Site header\n- `navigation` - Navigation menus\n- `main` - Primary content (one per page)\n- `complementary` - Supporting content\n- `contentinfo` - Site footer\n- `search` - Search functionality\n- `form` - Form regions\n\n### 7. Inaccessible Modals\u002FDialogs\n\n**❌ Problem:**\n```html\n\u003Cdiv class=\"modal\">\n  \u003Cdiv class=\"content\">\n    Modal content\n    \u003Cbutton onclick=\"closeModal()\">Close\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**✅ Solution:**\n```html\n\u003Cdiv\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"modal-title\"\n  aria-describedby=\"modal-desc\"\n>\n  \u003Ch2 id=\"modal-title\">Confirm Action\u003C\u002Fh2>\n  \u003Cp id=\"modal-desc\">Are you sure you want to delete this item?\u003C\u002Fp>\n\n  \u003Cbutton onclick=\"confirmAction()\">Confirm\u003C\u002Fbutton>\n  \u003Cbutton onclick=\"closeModal()\">Cancel\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cscript>\n\u002F\u002F Focus management\nfunction openModal() {\n  const modal = document.querySelector('[role=\"dialog\"]');\n  const focusableElements = modal.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n\n  \u002F\u002F Store previous focus\n  previousFocus = document.activeElement;\n\n  \u002F\u002F Focus first element\n  focusableElements[0].focus();\n\n  \u002F\u002F Trap focus\n  modal.addEventListener('keydown', trapFocus);\n}\n\nfunction closeModal() {\n  \u002F\u002F Return focus\n  if (previousFocus) previousFocus.focus();\n}\n\nfunction trapFocus(event) {\n  if (event.key !== 'Tab') return;\n\n  const focusableElements = Array.from(\n    modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n  );\n\n  const firstElement = focusableElements[0];\n  const lastElement = focusableElements[focusableElements.length - 1];\n\n  if (event.shiftKey && document.activeElement === firstElement) {\n    lastElement.focus();\n    event.preventDefault();\n  } else if (!event.shiftKey && document.activeElement === lastElement) {\n    firstElement.focus();\n    event.preventDefault();\n  }\n}\n\u003C\u002Fscript>\n```\n\n**Modal Requirements:**\n- `role=\"dialog\"` or `role=\"alertdialog\"`\n- `aria-modal=\"true\"` to indicate modal behavior\n- `aria-labelledby` pointing to title\n- `aria-describedby` for description (optional)\n- Focus management (trap and restore)\n- Close on Escape key\n- Prevent background scrolling\n\n### 8. Missing Skip Links\n\n**✅ Solution:**\n```html\n\u003Ca href=\"#main-content\" class=\"skip-link\">\n  Skip to main content\n\u003C\u002Fa>\n\n\u003Cheader>\n  \u003Cnav>...\u003C\u002Fnav>\n\u003C\u002Fheader>\n\n\u003Cmain id=\"main-content\" tabindex=\"-1\">\n  \u003C!-- Page content -->\n\u003C\u002Fmain>\n\n\u003Cstyle>\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px;\n  text-decoration: none;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n\u003C\u002Fstyle>\n```\n\n## ARIA Best Practices\n\n### ARIA Attributes Reference\n\n**States:**\n- `aria-checked` - Checkbox\u002Fradio state\n- `aria-disabled` - Disabled state\n- `aria-expanded` - Expanded\u002Fcollapsed state\n- `aria-hidden` - Hidden from assistive technology\n- `aria-pressed` - Toggle button state\n- `aria-selected` - Selected state\n\n**Properties:**\n- `aria-label` - Accessible name\n- `aria-labelledby` - ID reference for label\n- `aria-describedby` - ID reference for description\n- `aria-live` - Live region updates\n- `aria-required` - Required field\n- `aria-invalid` - Validation state\n\n### Live Regions\n\n```html\n\u003C!-- Polite: Wait for pause in speech -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\">\n  Item added to cart\n\u003C\u002Fdiv>\n\n\u003C!-- Assertive: Interrupt immediately -->\n\u003Cdiv aria-live=\"assertive\" role=\"alert\">\n  Error: Payment failed\n\u003C\u002Fdiv>\n\n\u003C!-- Status message -->\n\u003Cdiv role=\"status\" aria-live=\"polite\">\n  Saving changes...\n\u003C\u002Fdiv>\n```\n\n### Custom Components\n\n**Accordion:**\n```html\n\u003Cdiv class=\"accordion\">\n  \u003Cbutton\n    aria-expanded=\"false\"\n    aria-controls=\"panel-1\"\n    id=\"accordion-1\"\n  >\n    Section 1\n  \u003C\u002Fbutton>\n  \u003Cdiv id=\"panel-1\" role=\"region\" aria-labelledby=\"accordion-1\" hidden>\n    Panel content\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Tabs:**\n```html\n\u003Cdiv role=\"tablist\" aria-label=\"Content sections\">\n  \u003Cbutton\n    role=\"tab\"\n    aria-selected=\"true\"\n    aria-controls=\"panel-1\"\n    id=\"tab-1\"\n  >\n    Tab 1\n  \u003C\u002Fbutton>\n  \u003Cbutton\n    role=\"tab\"\n    aria-selected=\"false\"\n    aria-controls=\"panel-2\"\n    id=\"tab-2\"\n    tabindex=\"-1\"\n  >\n    Tab 2\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cdiv role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\">\n  Panel 1 content\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-2\" aria-labelledby=\"tab-2\" hidden>\n  Panel 2 content\n\u003C\u002Fdiv>\n```\n\n## Testing Checklist\n\n### Automated Testing\n- [ ] Run axe DevTools or WAVE browser extension\n- [ ] Check HTML validation (W3C Validator)\n- [ ] Test color contrast ratios\n- [ ] Verify heading hierarchy\n- [ ] Check for missing alt text\n\n### Manual Testing\n- [ ] Navigate entire site using only keyboard (Tab, Enter, Escape, Arrow keys)\n- [ ] Test with screen reader (NVDA, JAWS, or VoiceOver)\n- [ ] Verify focus indicators are visible\n- [ ] Check form validation messages are announced\n- [ ] Test modal focus trapping\n- [ ] Verify skip links work\n- [ ] Test with browser zoom at 200%\n- [ ] Check page reflow at different viewport sizes\n- [ ] Disable JavaScript and verify core functionality\n- [ ] Test with Windows High Contrast mode\n\n### Screen Reader Testing\n\n**VoiceOver (Mac):**\n- Enable: Cmd + F5\n- Navigate: Control + Option + Arrow keys\n- Read all: Control + Option + A\n\n**NVDA (Windows):**\n- Navigate: Arrow keys (browse mode) or Tab (focus mode)\n- Read all: NVDA + Down Arrow\n- Elements list: NVDA + F7\n\n**Test Scenarios:**\n- Can users understand page structure?\n- Are headings descriptive and hierarchical?\n- Are form labels clear and associated?\n- Are error messages announced?\n- Can users complete key tasks without vision?\n\n## Accessibility Statement\n\nInclude on website:\n\n```markdown\n# Accessibility Statement\n\nWe are committed to ensuring digital accessibility for people with disabilities. We continually improve the user experience for everyone and apply relevant accessibility standards.\n\n## Conformance Status\nThis website is partially conformant with WCAG 2.1 Level AA. \"Partially conformant\" means that some parts of the content do not fully conform to the accessibility standard.\n\n## Feedback\nWe welcome your feedback on the accessibility of this site. Please contact us:\n- Email: accessibility@example.com\n- Phone: +1-555-0123\n\n## Known Issues\n- [List any known accessibility issues and planned fixes]\n\nLast updated: [Date]\n```\n\n## Resources\n\n**Tools:**\n- axe DevTools (browser extension)\n- WAVE (web accessibility evaluation tool)\n- Lighthouse (Chrome DevTools)\n- Colour Contrast Analyser\n- Screen readers: NVDA, JAWS, VoiceOver\n\n**Guidelines:**\n- WCAG 2.1: https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F\n- ARIA Authoring Practices: https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F\n\nAccessibility is not optional—it's a fundamental requirement for creating inclusive web experiences. Prioritize it from the start of every project, not as an afterthought.\n",{"name":5,"description":7},"main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Faccessibility-auditor",3931,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-14 06:14:46",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add davila7\u002Fclaude-code-templates --skill accessibility-auditor",{"tool":67,"command":68},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill accessibility-auditor",{"tool":70,"command":71},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill accessibility-auditor","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Faccessibility-auditor\u002FSKILL.md",true,[],[76,104,130,163,196,217],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":85,"publishedAt":46},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[86,87,88,89,90,30,91,92,93,28,94,95,96,97,98,99,100,101,102,103],"scoring","pool","wealthville pool scoring","liquidity","which","exit","now","use","reduce","with","record","track","verdict","evm","solana","how","public","look",{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":111,"publishedAt":46},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[110],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},[112,113,114,115,25,116,117,118,119,120,121,28,122,123,124,125,126,127,128,129],"technical debt","debt","technical","technical debt auditor","coverage","complexity","markers","project","cleanup","unused","code","todo","work","plan","focus","signals","audit","dependency",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":145,"publishedAt":46},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[136,139,140],{"categoryNo":137,"categoryName":138,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":141,"categoryName":142,"taxonomyType":143,"taxonomyTypeDesc":144},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[146,147,148,149,150,151,152,30,153,154,155,156,157,158,159,93,160,161,28,162],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":167,"licenseFileUrl":168,"sourceHtmlUrl":169,"categories":170,"keywords":174,"publishedAt":46},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[171],{"categoryNo":172,"categoryName":173,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[175,44,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,40,194,30,195],"artifacts builder","web artifacts builder","artifacts","builder","state","routing","state management","component","css","frontend","ui","Tools","file","components","shadcn","react","Tailwind","suite","jsx","single-file","ui components",{"skillNo":197,"name":198,"nameZh":6,"description":199,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":167,"licenseFileUrl":200,"sourceHtmlUrl":201,"categories":202,"keywords":205,"publishedAt":46},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[203,204],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":172,"categoryName":173,"taxonomyType":21,"taxonomyTypeDesc":22},[206,37,207,208,209,44,210,184,185,211,212,213,214,30,215,95,216],"webapp testing","webapp","browser","playwright","applications","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":218,"name":219,"nameZh":6,"description":220,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":167,"licenseFileUrl":221,"sourceHtmlUrl":222,"categories":223,"keywords":231,"publishedAt":46},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[224,227,228],{"categoryNo":225,"categoryName":226,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":229,"categoryName":230,"taxonomyType":143,"taxonomyTypeDesc":144},"01JBSEEDCAT000000000000036","内容创作者",[232,233,234,235,236,237,238,239,177,240,187,122,241,242,243,244,245,158,246,28,247,248,249,250,251,101,252],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]