[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EQSW9RXB3CGY9SHRZB21J2":3,"skill-same:01M6EQSW9RXB3CGY9SHRZB21J2":92},{"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":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6EQSW9RXB3CGY9SHRZB21J2","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.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdavila7\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],"accessibility","accessibility auditor","html","screen","keyboard","ada","technology","compatibility","aria","expert","implementation","standards","testing","use","WCAG","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","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fdavila7\u002Faccessibility-auditor",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill accessibility-auditor",{"tool":64,"command":65},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill accessibility-auditor",{"tool":67,"command":68},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill accessibility-auditor","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdavila7\u002Faccessibility-auditor\u002FSKILL.md",true,[72,78,82,88],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fcancel-flow-playbook.md","REFERENCE","参考文档",8573,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-vault-audit\u002Fproduct-monetization\u002Fchurn-prevention\u002Freferences\u002Fcancel-flow-playbook.md",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fdunning-guide.md",8652,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-vault-audit\u002Fproduct-monetization\u002Fchurn-prevention\u002Freferences\u002Fdunning-guide.md",{"path":83,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":86,"sourceHtmlUrl":87},"scripts\u002Fchurn_impact_calculator.py","SCRIPT","脚本",7909,"https:\u002F\u002Fgithub.com\u002Fvitalikpestov\u002FSkills-Catalog\u002Fblob\u002Fmain\u002F_Mobile-Dev\u002Ffrom-vault-audit\u002Fproduct-monetization\u002Fchurn-prevention\u002Fscripts\u002Fchurn_impact_calculator.py",{"path":89,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":90,"sourceHtmlUrl":91},"skill-report.json",18019,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdavila7\u002Faccessibility-auditor\u002Fskill-report.json",[93,105,115,124,130,137],{"skillNo":94,"name":95,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":101,"publishedAt":44},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[98],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[102,103,104],"model","model hierarchy","model hierarchy skill",{"skillNo":106,"name":107,"nameZh":6,"description":6,"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":44},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[110],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},[112,113,114],"MCP","zoom","zoom mcp",{"skillNo":116,"name":117,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":44},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[121,122,123,113],"sdk","zoom apps sdk","apps",{"skillNo":125,"name":126,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":44},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[126],{"skillNo":131,"name":132,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":136,"publishedAt":44},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[135],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},[132],{"skillNo":138,"name":139,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":142,"publishedAt":44},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[139]]