[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CZX7M3TTB3M3AAWEMFVYBE":3,"skill-same:01M6CZX7M3TTB3M3AAWEMFVYBE":67},{"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":18,"publishedAt":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":14,"repositoryHtmlUrl":43,"repositoryHomepageUrl":44,"ownerHtmlUrl":45,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":46,"install":47,"resources":60},"01M6CZX7M3TTB3M3AAWEMFVYBE","accessibility",null,"Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to \"improve accessibility\", \"a11y audit\", \"WCAG compliance\", \"screen reader support\", \"keyboard navigation\", or \"make accessible\".","agusruiz11\u002Fposicionarte-2026","agusruiz11","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F70041288?v=4","01M6CZWNW7CXR4K6E7CJQ8C15P","Agustin M. Ruiz","01M6CZWP1N7K2JHWWCJKVRJ46E",0,"MIT","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Faccessibility\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31],"support","web","guidelines","web accessibility","audit","compliance","WCAG","improve","quality","reader","a11y audit","use","navigation","2026-11-10 10:12:30",false,"---\nname: accessibility\ndescription: Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to \"improve accessibility\", \"a11y audit\", \"WCAG compliance\", \"screen reader support\", \"keyboard navigation\", or \"make accessible\".\nlicense: MIT\nmetadata:\n  author: web-quality-skills\n  version: \"1.0\"\n---\n\n# Accessibility (a11y)\n\nComprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities.\n\n## WCAG Principles: POUR\n\n| Principle | Description |\n|-----------|-------------|\n| **P**erceivable | Content can be perceived through different senses |\n| **O**perable | Interface can be operated by all users |\n| **U**nderstandable | Content and interface are understandable |\n| **R**obust | Content works with assistive technologies |\n\n## Conformance levels\n\n| Level | Requirement | Target |\n|-------|-------------|--------|\n| **A** | Minimum accessibility | Must pass |\n| **AA** | Standard compliance | Should pass (legal requirement in many jurisdictions) |\n| **AAA** | Enhanced accessibility | Nice to have |\n\n---\n\n## Perceivable\n\n### Text alternatives (1.1)\n\n**Images require alt text:**\n```html\n\u003C!-- ❌ Missing alt -->\n\u003Cimg src=\"chart.png\">\n\n\u003C!-- ✅ Descriptive alt -->\n\u003Cimg src=\"chart.png\" alt=\"Bar chart showing 40% increase in Q3 sales\">\n\n\u003C!-- ✅ Decorative image (empty alt) -->\n\u003Cimg src=\"decorative-border.png\" alt=\"\" role=\"presentation\">\n\n\u003C!-- ✅ Complex image with longer description -->\n\u003Cfigure>\n  \u003Cimg src=\"infographic.png\" alt=\"2024 market trends infographic\" \n       aria-describedby=\"infographic-desc\">\n  \u003Cfigcaption id=\"infographic-desc\">\n    \u003C!-- Detailed description -->\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n**Icon buttons need accessible names:**\n```html\n\u003C!-- ❌ No accessible name -->\n\u003Cbutton>\u003Csvg>\u003C!-- menu icon -->\u003C\u002Fsvg>\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using aria-label -->\n\u003Cbutton aria-label=\"Open menu\">\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using visually hidden text -->\n\u003Cbutton>\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n  \u003Cspan class=\"visually-hidden\">Open menu\u003C\u002Fspan>\n\u003C\u002Fbutton>\n```\n\n**Visually hidden class:**\n```css\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n```\n\n### Color contrast (1.4.3, 1.4.6)\n\n| Text Size | AA minimum | AAA enhanced |\n|-----------|------------|--------------|\n| Normal text (\u003C 18px \u002F \u003C 14px bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18px \u002F ≥ 14px bold) | 3:1 | 4.5:1 |\n| UI components & graphics | 3:1 | 3:1 |\n\n```css\n\u002F* ❌ Low contrast (2.5:1) *\u002F\n.low-contrast {\n  color: #999;\n  background: #fff;\n}\n\n\u002F* ✅ Sufficient contrast (7:1) *\u002F\n.high-contrast {\n  color: #333;\n  background: #fff;\n}\n\n\u002F* ✅ Focus states need contrast too *\u002F\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n```\n\n**Don't rely on color alone:**\n```html\n\u003C!-- ❌ Only color indicates error -->\n\u003Cinput class=\"error-border\">\n\u003Cstyle>.error-border { border-color: red; }\u003C\u002Fstyle>\n\n\u003C!-- ✅ Color + icon + text -->\n\u003Cdiv class=\"field-error\">\n  \u003Cinput aria-invalid=\"true\" aria-describedby=\"email-error\">\n  \u003Cspan id=\"email-error\" class=\"error-message\">\n    \u003Csvg aria-hidden=\"true\">\u003C!-- error icon -->\u003C\u002Fsvg>\n    Please enter a valid email address\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n### Media alternatives (1.2)\n\n```html\n\u003C!-- Video with captions -->\n\u003Cvideo controls>\n  \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n  \u003Ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\" default>\n  \u003Ctrack kind=\"descriptions\" src=\"descriptions.vtt\" srclang=\"en\" label=\"Descriptions\">\n\u003C\u002Fvideo>\n\n\u003C!-- Audio with transcript -->\n\u003Caudio controls>\n  \u003Csource src=\"podcast.mp3\" type=\"audio\u002Fmp3\">\n\u003C\u002Faudio>\n\u003Cdetails>\n  \u003Csummary>Transcript\u003C\u002Fsummary>\n  \u003Cp>Full transcript text...\u003C\u002Fp>\n\u003C\u002Fdetails>\n```\n\n---\n\n## Operable\n\n### Keyboard accessible (2.1)\n\n**All functionality must be keyboard accessible:**\n```javascript\n\u002F\u002F ❌ Only handles click\nelement.addEventListener('click', handleAction);\n\n\u002F\u002F ✅ Handles both click and keyboard\nelement.addEventListener('click', handleAction);\nelement.addEventListener('keydown', (e) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    handleAction();\n  }\n});\n```\n\n**No keyboard traps:**\n```javascript\n\u002F\u002F Modal focus management\nfunction openModal(modal) {\n  const focusableElements = modal.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n  const firstElement = focusableElements[0];\n  const lastElement = focusableElements[focusableElements.length - 1];\n  \n  \u002F\u002F Trap focus within modal\n  modal.addEventListener('keydown', (e) => {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstElement) {\n        e.preventDefault();\n        lastElement.focus();\n      } else if (!e.shiftKey && document.activeElement === lastElement) {\n        e.preventDefault();\n        firstElement.focus();\n      }\n    }\n    if (e.key === 'Escape') {\n      closeModal();\n    }\n  });\n  \n  firstElement.focus();\n}\n```\n\n### Focus visible (2.4.7)\n\n```css\n\u002F* ❌ Never remove focus outlines *\u002F\n*:focus { outline: none; }\n\n\u002F* ✅ Use :focus-visible for keyboard-only focus *\u002F\n:focus {\n  outline: none;\n}\n\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n\u002F* ✅ Or custom focus styles *\u002F\nbutton:focus-visible {\n  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n### Skip links (2.4.1)\n\n```html\n\u003Cbody>\n  \u003Ca href=\"#main-content\" class=\"skip-link\">Skip to main content\u003C\u002Fa>\n  \u003Cheader>\u003C!-- navigation -->\u003C\u002Fheader>\n  \u003Cmain id=\"main-content\" tabindex=\"-1\">\n    \u003C!-- main content -->\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n```\n\n```css\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px 16px;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n### Timing (2.2)\n\n```javascript\n\u002F\u002F Allow users to extend time limits\nfunction showSessionWarning() {\n  const modal = createModal({\n    title: 'Session Expiring',\n    content: 'Your session will expire in 2 minutes.',\n    actions: [\n      { label: 'Extend session', action: extendSession },\n      { label: 'Log out', action: logout }\n    ],\n    timeout: 120000 \u002F\u002F 2 minutes to respond\n  });\n}\n```\n\n### Motion (2.3)\n\n```css\n\u002F* Respect reduced motion preference *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n---\n\n## Understandable\n\n### Page language (3.1.1)\n\n```html\n\u003C!-- ❌ No language specified -->\n\u003Chtml>\n\n\u003C!-- ✅ Language specified -->\n\u003Chtml lang=\"en\">\n\n\u003C!-- ✅ Language changes within page -->\n\u003Cp>The French word for hello is \u003Cspan lang=\"fr\">bonjour\u003C\u002Fspan>.\u003C\u002Fp>\n```\n\n### Consistent navigation (3.2.3)\n\n```html\n\u003C!-- Navigation should be consistent across pages -->\n\u003Cnav aria-label=\"Main\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\" aria-current=\"page\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fproducts\">Products\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n```\n\n### Form labels (3.3.2)\n\n```html\n\u003C!-- ❌ No label association -->\n\u003Cinput type=\"email\" placeholder=\"Email\">\n\n\u003C!-- ✅ Explicit label -->\n\u003Clabel for=\"email\">Email address\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\" name=\"email\" \n       autocomplete=\"email\" required>\n\n\u003C!-- ✅ Implicit label -->\n\u003Clabel>\n  Email address\n  \u003Cinput type=\"email\" name=\"email\" autocomplete=\"email\" required>\n\u003C\u002Flabel>\n\n\u003C!-- ✅ With instructions -->\n\u003Clabel for=\"password\">Password\u003C\u002Flabel>\n\u003Cinput type=\"password\" id=\"password\" \n       aria-describedby=\"password-requirements\">\n\u003Cp id=\"password-requirements\">\n  Must be at least 8 characters with one number.\n\u003C\u002Fp>\n```\n\n### Error handling (3.3.1, 3.3.3)\n\n```html\n\u003C!-- Announce errors to screen readers -->\n\u003Cform novalidate>\n  \u003Cdiv class=\"field\" aria-live=\"polite\">\n    \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n    \u003Cinput type=\"email\" id=\"email\" \n           aria-invalid=\"true\"\n           aria-describedby=\"email-error\">\n    \u003Cp id=\"email-error\" class=\"error\" role=\"alert\">\n      Please enter a valid email address (e.g., name@example.com)\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\n```javascript\n\u002F\u002F Focus first error on submit\nform.addEventListener('submit', (e) => {\n  const firstError = form.querySelector('[aria-invalid=\"true\"]');\n  if (firstError) {\n    e.preventDefault();\n    firstError.focus();\n    \n    \u002F\u002F Announce error summary\n    const errorSummary = document.getElementById('error-summary');\n    errorSummary.textContent = `${errors.length} errors found. Please fix them and try again.`;\n    errorSummary.focus();\n  }\n});\n```\n\n---\n\n## Robust\n\n### Valid HTML (4.1.1)\n\n```html\n\u003C!-- ❌ Duplicate IDs -->\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\n\u003C!-- ❌ Invalid nesting -->\n\u003Ca href=\"\u002F\">\u003Cbutton>Click\u003C\u002Fbutton>\u003C\u002Fa>\n\n\u003C!-- ✅ Unique IDs -->\n\u003Cdiv id=\"main-content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"sidebar-content\">...\u003C\u002Fdiv>\n\n\u003C!-- ✅ Proper nesting -->\n\u003Ca href=\"\u002F\" class=\"button-link\">Click\u003C\u002Fa>\n```\n\n### ARIA usage (4.1.2)\n\n**Prefer native elements:**\n```html\n\u003C!-- ❌ ARIA role on div -->\n\u003Cdiv role=\"button\" tabindex=\"0\">Click me\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native button -->\n\u003Cbutton>Click me\u003C\u002Fbutton>\n\n\u003C!-- ❌ ARIA checkbox -->\n\u003Cdiv role=\"checkbox\" aria-checked=\"false\">Option\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native checkbox -->\n\u003Clabel>\u003Cinput type=\"checkbox\"> Option\u003C\u002Flabel>\n```\n\n**When ARIA is needed:**\n```html\n\u003C!-- Custom tabs component -->\n\u003Cdiv role=\"tablist\" aria-label=\"Product information\">\n  \u003Cbutton role=\"tab\" id=\"tab-1\" aria-selected=\"true\" \n          aria-controls=\"panel-1\">Description\u003C\u002Fbutton>\n  \u003Cbutton role=\"tab\" id=\"tab-2\" aria-selected=\"false\" \n          aria-controls=\"panel-2\" tabindex=\"-1\">Reviews\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\">\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-2\" aria-labelledby=\"tab-2\" hidden>\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n```\n\n### Live regions (4.1.3)\n\n```html\n\u003C!-- Status updates -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\" class=\"status\">\n  \u003C!-- Content updates announced to screen readers -->\n\u003C\u002Fdiv>\n\n\u003C!-- Urgent alerts -->\n\u003Cdiv role=\"alert\" aria-live=\"assertive\">\n  \u003C!-- Interrupts current announcement -->\n\u003C\u002Fdiv>\n```\n\n```javascript\n\u002F\u002F Announce dynamic content changes\nfunction showNotification(message, type = 'polite') {\n  const container = document.getElementById(`${type}-announcer`);\n  container.textContent = ''; \u002F\u002F Clear first\n  requestAnimationFrame(() => {\n    container.textContent = message;\n  });\n}\n```\n\n---\n\n## Testing checklist\n\n### Automated testing\n```bash\n# Lighthouse accessibility audit\nnpx lighthouse https:\u002F\u002Fexample.com --only-categories=accessibility\n\n# axe-core\nnpm install @axe-core\u002Fcli -g\naxe https:\u002F\u002Fexample.com\n```\n\n### Manual testing\n\n- [ ] **Keyboard navigation:** Tab through entire page, use Enter\u002FSpace to activate\n- [ ] **Screen reader:** Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)\n- [ ] **Zoom:** Content usable at 200% zoom\n- [ ] **High contrast:** Test with Windows High Contrast Mode\n- [ ] **Reduced motion:** Test with `prefers-reduced-motion: reduce`\n- [ ] **Focus order:** Logical and follows visual order\n\n### Screen reader commands\n\n| Action | VoiceOver (Mac) | NVDA (Windows) |\n|--------|-----------------|----------------|\n| Start\u002FStop | ⌘ + F5 | Ctrl + Alt + N |\n| Next item | VO + → | ↓ |\n| Previous item | VO + ← | ↑ |\n| Activate | VO + Space | Enter |\n| Headings list | VO + U, then arrows | H \u002F Shift + H |\n| Links list | VO + U | K \u002F Shift + K |\n\n---\n\n## Common issues by impact\n\n### Critical (fix immediately)\n1. Missing form labels\n2. Missing image alt text\n3. Insufficient color contrast\n4. Keyboard traps\n5. No focus indicators\n\n### Serious (fix before launch)\n1. Missing page language\n2. Missing heading structure\n3. Non-descriptive link text\n4. Auto-playing media\n5. Missing skip links\n\n### Moderate (fix soon)\n1. Missing ARIA labels on icons\n2. Inconsistent navigation\n3. Missing error identification\n4. Timing without controls\n5. Missing landmark regions\n\n## References\n\n- [WCAG 2.1 Quick Reference](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F)\n- [WAI-ARIA Authoring Practices](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Deque axe Rules](https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F)\n- [Web Quality Audit](..\u002Fweb-quality-audit\u002FSKILL.md)\n","# Accessibility (a11y)\n\nComprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities.\n\n## WCAG Principles: POUR\n\n| Principle | Description |\n|-----------|-------------|\n| **P**erceivable | Content can be perceived through different senses |\n| **O**perable | Interface can be operated by all users |\n| **U**nderstandable | Content and interface are understandable |\n| **R**obust | Content works with assistive technologies |\n\n## Conformance levels\n\n| Level | Requirement | Target |\n|-------|-------------|--------|\n| **A** | Minimum accessibility | Must pass |\n| **AA** | Standard compliance | Should pass (legal requirement in many jurisdictions) |\n| **AAA** | Enhanced accessibility | Nice to have |\n\n---\n\n## Perceivable\n\n### Text alternatives (1.1)\n\n**Images require alt text:**\n```html\n\u003C!-- ❌ Missing alt -->\n\u003Cimg src=\"chart.png\">\n\n\u003C!-- ✅ Descriptive alt -->\n\u003Cimg src=\"chart.png\" alt=\"Bar chart showing 40% increase in Q3 sales\">\n\n\u003C!-- ✅ Decorative image (empty alt) -->\n\u003Cimg src=\"decorative-border.png\" alt=\"\" role=\"presentation\">\n\n\u003C!-- ✅ Complex image with longer description -->\n\u003Cfigure>\n  \u003Cimg src=\"infographic.png\" alt=\"2024 market trends infographic\" \n       aria-describedby=\"infographic-desc\">\n  \u003Cfigcaption id=\"infographic-desc\">\n    \u003C!-- Detailed description -->\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n**Icon buttons need accessible names:**\n```html\n\u003C!-- ❌ No accessible name -->\n\u003Cbutton>\u003Csvg>\u003C!-- menu icon -->\u003C\u002Fsvg>\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using aria-label -->\n\u003Cbutton aria-label=\"Open menu\">\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using visually hidden text -->\n\u003Cbutton>\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n  \u003Cspan class=\"visually-hidden\">Open menu\u003C\u002Fspan>\n\u003C\u002Fbutton>\n```\n\n**Visually hidden class:**\n```css\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n```\n\n### Color contrast (1.4.3, 1.4.6)\n\n| Text Size | AA minimum | AAA enhanced |\n|-----------|------------|--------------|\n| Normal text (\u003C 18px \u002F \u003C 14px bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18px \u002F ≥ 14px bold) | 3:1 | 4.5:1 |\n| UI components & graphics | 3:1 | 3:1 |\n\n```css\n\u002F* ❌ Low contrast (2.5:1) *\u002F\n.low-contrast {\n  color: #999;\n  background: #fff;\n}\n\n\u002F* ✅ Sufficient contrast (7:1) *\u002F\n.high-contrast {\n  color: #333;\n  background: #fff;\n}\n\n\u002F* ✅ Focus states need contrast too *\u002F\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n```\n\n**Don't rely on color alone:**\n```html\n\u003C!-- ❌ Only color indicates error -->\n\u003Cinput class=\"error-border\">\n\u003Cstyle>.error-border { border-color: red; }\u003C\u002Fstyle>\n\n\u003C!-- ✅ Color + icon + text -->\n\u003Cdiv class=\"field-error\">\n  \u003Cinput aria-invalid=\"true\" aria-describedby=\"email-error\">\n  \u003Cspan id=\"email-error\" class=\"error-message\">\n    \u003Csvg aria-hidden=\"true\">\u003C!-- error icon -->\u003C\u002Fsvg>\n    Please enter a valid email address\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n### Media alternatives (1.2)\n\n```html\n\u003C!-- Video with captions -->\n\u003Cvideo controls>\n  \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n  \u003Ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\" default>\n  \u003Ctrack kind=\"descriptions\" src=\"descriptions.vtt\" srclang=\"en\" label=\"Descriptions\">\n\u003C\u002Fvideo>\n\n\u003C!-- Audio with transcript -->\n\u003Caudio controls>\n  \u003Csource src=\"podcast.mp3\" type=\"audio\u002Fmp3\">\n\u003C\u002Faudio>\n\u003Cdetails>\n  \u003Csummary>Transcript\u003C\u002Fsummary>\n  \u003Cp>Full transcript text...\u003C\u002Fp>\n\u003C\u002Fdetails>\n```\n\n---\n\n## Operable\n\n### Keyboard accessible (2.1)\n\n**All functionality must be keyboard accessible:**\n```javascript\n\u002F\u002F ❌ Only handles click\nelement.addEventListener('click', handleAction);\n\n\u002F\u002F ✅ Handles both click and keyboard\nelement.addEventListener('click', handleAction);\nelement.addEventListener('keydown', (e) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    handleAction();\n  }\n});\n```\n\n**No keyboard traps:**\n```javascript\n\u002F\u002F Modal focus management\nfunction openModal(modal) {\n  const focusableElements = modal.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n  const firstElement = focusableElements[0];\n  const lastElement = focusableElements[focusableElements.length - 1];\n  \n  \u002F\u002F Trap focus within modal\n  modal.addEventListener('keydown', (e) => {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstElement) {\n        e.preventDefault();\n        lastElement.focus();\n      } else if (!e.shiftKey && document.activeElement === lastElement) {\n        e.preventDefault();\n        firstElement.focus();\n      }\n    }\n    if (e.key === 'Escape') {\n      closeModal();\n    }\n  });\n  \n  firstElement.focus();\n}\n```\n\n### Focus visible (2.4.7)\n\n```css\n\u002F* ❌ Never remove focus outlines *\u002F\n*:focus { outline: none; }\n\n\u002F* ✅ Use :focus-visible for keyboard-only focus *\u002F\n:focus {\n  outline: none;\n}\n\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n\u002F* ✅ Or custom focus styles *\u002F\nbutton:focus-visible {\n  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n### Skip links (2.4.1)\n\n```html\n\u003Cbody>\n  \u003Ca href=\"#main-content\" class=\"skip-link\">Skip to main content\u003C\u002Fa>\n  \u003Cheader>\u003C!-- navigation -->\u003C\u002Fheader>\n  \u003Cmain id=\"main-content\" tabindex=\"-1\">\n    \u003C!-- main content -->\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n```\n\n```css\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px 16px;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n### Timing (2.2)\n\n```javascript\n\u002F\u002F Allow users to extend time limits\nfunction showSessionWarning() {\n  const modal = createModal({\n    title: 'Session Expiring',\n    content: 'Your session will expire in 2 minutes.',\n    actions: [\n      { label: 'Extend session', action: extendSession },\n      { label: 'Log out', action: logout }\n    ],\n    timeout: 120000 \u002F\u002F 2 minutes to respond\n  });\n}\n```\n\n### Motion (2.3)\n\n```css\n\u002F* Respect reduced motion preference *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n---\n\n## Understandable\n\n### Page language (3.1.1)\n\n```html\n\u003C!-- ❌ No language specified -->\n\u003Chtml>\n\n\u003C!-- ✅ Language specified -->\n\u003Chtml lang=\"en\">\n\n\u003C!-- ✅ Language changes within page -->\n\u003Cp>The French word for hello is \u003Cspan lang=\"fr\">bonjour\u003C\u002Fspan>.\u003C\u002Fp>\n```\n\n### Consistent navigation (3.2.3)\n\n```html\n\u003C!-- Navigation should be consistent across pages -->\n\u003Cnav aria-label=\"Main\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\" aria-current=\"page\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fproducts\">Products\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n```\n\n### Form labels (3.3.2)\n\n```html\n\u003C!-- ❌ No label association -->\n\u003Cinput type=\"email\" placeholder=\"Email\">\n\n\u003C!-- ✅ Explicit label -->\n\u003Clabel for=\"email\">Email address\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\" name=\"email\" \n       autocomplete=\"email\" required>\n\n\u003C!-- ✅ Implicit label -->\n\u003Clabel>\n  Email address\n  \u003Cinput type=\"email\" name=\"email\" autocomplete=\"email\" required>\n\u003C\u002Flabel>\n\n\u003C!-- ✅ With instructions -->\n\u003Clabel for=\"password\">Password\u003C\u002Flabel>\n\u003Cinput type=\"password\" id=\"password\" \n       aria-describedby=\"password-requirements\">\n\u003Cp id=\"password-requirements\">\n  Must be at least 8 characters with one number.\n\u003C\u002Fp>\n```\n\n### Error handling (3.3.1, 3.3.3)\n\n```html\n\u003C!-- Announce errors to screen readers -->\n\u003Cform novalidate>\n  \u003Cdiv class=\"field\" aria-live=\"polite\">\n    \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n    \u003Cinput type=\"email\" id=\"email\" \n           aria-invalid=\"true\"\n           aria-describedby=\"email-error\">\n    \u003Cp id=\"email-error\" class=\"error\" role=\"alert\">\n      Please enter a valid email address (e.g., name@example.com)\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\n```javascript\n\u002F\u002F Focus first error on submit\nform.addEventListener('submit', (e) => {\n  const firstError = form.querySelector('[aria-invalid=\"true\"]');\n  if (firstError) {\n    e.preventDefault();\n    firstError.focus();\n    \n    \u002F\u002F Announce error summary\n    const errorSummary = document.getElementById('error-summary');\n    errorSummary.textContent = `${errors.length} errors found. Please fix them and try again.`;\n    errorSummary.focus();\n  }\n});\n```\n\n---\n\n## Robust\n\n### Valid HTML (4.1.1)\n\n```html\n\u003C!-- ❌ Duplicate IDs -->\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\n\u003C!-- ❌ Invalid nesting -->\n\u003Ca href=\"\u002F\">\u003Cbutton>Click\u003C\u002Fbutton>\u003C\u002Fa>\n\n\u003C!-- ✅ Unique IDs -->\n\u003Cdiv id=\"main-content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"sidebar-content\">...\u003C\u002Fdiv>\n\n\u003C!-- ✅ Proper nesting -->\n\u003Ca href=\"\u002F\" class=\"button-link\">Click\u003C\u002Fa>\n```\n\n### ARIA usage (4.1.2)\n\n**Prefer native elements:**\n```html\n\u003C!-- ❌ ARIA role on div -->\n\u003Cdiv role=\"button\" tabindex=\"0\">Click me\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native button -->\n\u003Cbutton>Click me\u003C\u002Fbutton>\n\n\u003C!-- ❌ ARIA checkbox -->\n\u003Cdiv role=\"checkbox\" aria-checked=\"false\">Option\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native checkbox -->\n\u003Clabel>\u003Cinput type=\"checkbox\"> Option\u003C\u002Flabel>\n```\n\n**When ARIA is needed:**\n```html\n\u003C!-- Custom tabs component -->\n\u003Cdiv role=\"tablist\" aria-label=\"Product information\">\n  \u003Cbutton role=\"tab\" id=\"tab-1\" aria-selected=\"true\" \n          aria-controls=\"panel-1\">Description\u003C\u002Fbutton>\n  \u003Cbutton role=\"tab\" id=\"tab-2\" aria-selected=\"false\" \n          aria-controls=\"panel-2\" tabindex=\"-1\">Reviews\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\">\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-2\" aria-labelledby=\"tab-2\" hidden>\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n```\n\n### Live regions (4.1.3)\n\n```html\n\u003C!-- Status updates -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\" class=\"status\">\n  \u003C!-- Content updates announced to screen readers -->\n\u003C\u002Fdiv>\n\n\u003C!-- Urgent alerts -->\n\u003Cdiv role=\"alert\" aria-live=\"assertive\">\n  \u003C!-- Interrupts current announcement -->\n\u003C\u002Fdiv>\n```\n\n```javascript\n\u002F\u002F Announce dynamic content changes\nfunction showNotification(message, type = 'polite') {\n  const container = document.getElementById(`${type}-announcer`);\n  container.textContent = ''; \u002F\u002F Clear first\n  requestAnimationFrame(() => {\n    container.textContent = message;\n  });\n}\n```\n\n---\n\n## Testing checklist\n\n### Automated testing\n```bash\n# Lighthouse accessibility audit\nnpx lighthouse https:\u002F\u002Fexample.com --only-categories=accessibility\n\n# axe-core\nnpm install @axe-core\u002Fcli -g\naxe https:\u002F\u002Fexample.com\n```\n\n### Manual testing\n\n- [ ] **Keyboard navigation:** Tab through entire page, use Enter\u002FSpace to activate\n- [ ] **Screen reader:** Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)\n- [ ] **Zoom:** Content usable at 200% zoom\n- [ ] **High contrast:** Test with Windows High Contrast Mode\n- [ ] **Reduced motion:** Test with `prefers-reduced-motion: reduce`\n- [ ] **Focus order:** Logical and follows visual order\n\n### Screen reader commands\n\n| Action | VoiceOver (Mac) | NVDA (Windows) |\n|--------|-----------------|----------------|\n| Start\u002FStop | ⌘ + F5 | Ctrl + Alt + N |\n| Next item | VO + → | ↓ |\n| Previous item | VO + ← | ↑ |\n| Activate | VO + Space | Enter |\n| Headings list | VO + U, then arrows | H \u002F Shift + H |\n| Links list | VO + U | K \u002F Shift + K |\n\n---\n\n## Common issues by impact\n\n### Critical (fix immediately)\n1. Missing form labels\n2. Missing image alt text\n3. Insufficient color contrast\n4. Keyboard traps\n5. No focus indicators\n\n### Serious (fix before launch)\n1. Missing page language\n2. Missing heading structure\n3. Non-descriptive link text\n4. Auto-playing media\n5. Missing skip links\n\n### Moderate (fix soon)\n1. Missing ARIA labels on icons\n2. Inconsistent navigation\n3. Missing error identification\n4. Timing without controls\n5. Missing landmark regions\n\n## References\n\n- [WCAG 2.1 Quick Reference](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F)\n- [WAI-ARIA Authoring Practices](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Deque axe Rules](https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F)\n- [Web Quality Audit](..\u002Fweb-quality-audit\u002FSKILL.md)\n",{"name":5,"license":15,"metadata":37,"description":7},{"author":38,"version":39},"web-quality-skills","1.0","main","75be4e902e7b589398c498b20c11965fb27c9fdb",".agents\u002Fskills\u002Faccessibility","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026","https:\u002F\u002Fposicionarte-2026.vercel.app","https:\u002F\u002Fgithub.com\u002Fagusruiz11","2026-09-24 04:03:25",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add agusruiz11\u002Fposicionarte-2026 --skill accessibility",{"tool":53,"command":54},"bunx","bunx skills add agusruiz11\u002Fposicionarte-2026 --skill accessibility",{"tool":56,"command":57},"pnpm","pnpm dlx skills add agusruiz11\u002Fposicionarte-2026 --skill accessibility","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Faccessibility\u002FSKILL.md",true,[61],{"path":62,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":66},"references\u002FWCAG.md","REFERENCE","参考文档",7324,"https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Faccessibility\u002Freferences\u002FWCAG.md",[68,97,119,140,161,176],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":84,"publishedAt":32},"01M6D0M467V4FP2H8GTRW25ESA","web-quality-audit","Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to \"audit my site\", \"review web quality\", \"run lighthouse audit\", \"check page quality\", or \"optimize my website\".","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fweb-quality-audit\u002FSKILL.md",[74,79],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000019","营销推广","SCENARIO","使用场景",{"categoryNo":80,"categoryName":81,"taxonomyType":82,"taxonomyTypeDesc":83},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[20,23,85,27,86,87,5,88,89,90,91,92,93,94,95,30,96],"web quality audit","review","performance","run","best practices","website","seo","Lighthouse","site","page","check","optimize",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":106,"publishedAt":32},"01M6D0KCA27324N369EG03G4RW","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvercel-react-native-skills\u002FSKILL.md",[103],{"categoryNo":104,"categoryName":105,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000009","前端开发",[107,108,109,110,111,87,112,113,89,114,30,115,116,117,118],"react","vercel react native skills","react native","vercel","react native skills","components","tasks","list","modules","mobile","expo","platform",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":126,"publishedAt":32},"01M6D0K3FVFNZ3KS30TCJM2SR2","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[125],{"categoryNo":104,"categoryName":105,"taxonomyType":77,"taxonomyTypeDesc":78},[107,127,89,128,110,129,87,112,130,21,113,131,132,133,134,135,136,137,138,139],"vercel react best practices","react best practices","writing","react components","code","Optimization","data","Next.js","refactoring","performance optimization","patterns","next","pages",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":147,"publishedAt":32},"01M6D0JZ7XBQQ3PJZGPG6ZR6Q9","vercel-composition-patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvercel-composition-patterns\u002FSKILL.md",[146],{"categoryNo":104,"categoryName":105,"taxonomyType":77,"taxonomyTypeDesc":78},[148,149,110,137,112,107,150,151,152,113,153,154,155,156,135,157,158,30,159,160],"Composition","vercel composition patterns","component","architecture","api changes","libraries","component architecture","Providers","api","react composition","context","reusable","compound",{"skillNo":162,"name":91,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":168,"publishedAt":32},"01M6D0FD6JDPAGQ2JRVFK3C0SM","Optimize for search engine visibility and ranking. Use when asked to \"improve SEO\", \"optimize for search\", \"fix meta tags\", \"add structured data\", \"sitemap optimization\", or \"search engine optimization\".","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fseo\u002FSKILL.md",[166,167],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":80,"categoryName":81,"taxonomyType":82,"taxonomyTypeDesc":83},[91,169,20,170,132,133,171,172,26,173,27,174,30,96,175],"structured data","search","Meta","Meta Tags","engine","fix","structured",{"skillNo":177,"name":87,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":181,"publishedAt":32},"01M6D0BM5YE6KVCKCT5XSF4ZHE","Optimize web performance for faster loading and better user experience. Use when asked to \"speed up my site\", \"optimize performance\", \"reduce load time\", \"fix slow loading\", \"improve page speed\", or \"performance audit\".","https:\u002F\u002Fgithub.com\u002Fagusruiz11\u002Fposicionarte-2026\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fperformance\u002FSKILL.md",[],[87,20,182,23,26,93,94,27,183,174,30,184,96,185,186,187],"web performance","user","up","time","speed","user experience"]