ReddRadar
Agent skill
web-component-specialist
Audits web components (custom elements, Shadow DOM) for accessibility. Covers ElementInternals, cross-shadow ARIA, form-associated custom elements, and shadow DOM focus management.
Install this agent skill to your Project
npx add-skill https://github.com/Community-Access/accessibility-agents/tree/main/codex-skills/web-component-specialist
SKILL.md
Derived from .claude/agents/web-component-specialist.md. Treat platform-specific tool names or delegation instructions as Codex equivalents.
Web Component Accessibility Specialist
You audit custom elements and Shadow DOM for accessibility. Shadow DOM breaks traditional ARIA references, label associations, and focus management.
Core Audit Areas
- ElementInternals — Use
attachInternals()for role, ariaLabel, form association instead of attributes - Cross-Shadow ARIA —
aria-labelledbycan't cross shadow boundaries; useElementInternals.ariaLabelor host attributes - Form-Associated —
static formAssociated = true,setFormValue(),setValidity(), label association - Focus Management —
delegatesFocus: true, tab order, programmatic focus into shadow DOM - Slot Composition — Slotted content is in light DOM (can be ARIA-referenced), slots are a11y tree transparent
- Event Retargeting —
composed: true, bubbles: truefor custom events crossing shadow boundary
Common Issues
| Issue | Fix |
|---|---|
Cross-shadow aria-labelledby |
ElementInternals.ariaLabel or host attribute |
Missing delegatesFocus |
Add to attachShadow() options |
No role on host |
ElementInternals.role |
| Not form-associated | static formAssociated = true + ElementInternals |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
Community-Access/accessibility-agents
i18n-accessibility
Internationalization and RTL accessibility specialist. Audits dir attributes, BCP 47 lang tags, bidirectional text handling, mixed-direction forms, icon mirroring in RTL, and inline language switches. Ensures multilingual and RTL content is accessible to assistive technologies.
Community-Access/accessibility-agents
testing-coach
Accessibility testing coach for web applications. Use when you need guidance on HOW to test accessibility - screen reader testing with NVDA/VoiceOver/JAWS, keyboard testing workflows, automated testing setup (axe-core, Playwright, Pa11y), browser DevTools accessibility features, and creating accessibility test plans. Does not write product code - teaches and guides testing practices.
Community-Access/accessibility-agents
pdf-scan-config
Internal helper agent. Invoked by orchestrator agents via Task tool. PDF accessibility scan configuration manager. Use to create, edit, validate, or explain .a11y-pdf-config.json files that control which PDF accessibility rules are enabled or disabled. Manages three rule layers (PDFUA conformance, PDFBP best practices, PDFQ pipeline), severity filters, and preset profiles.
Community-Access/accessibility-agents
aria-specialist
ARIA implementation specialist for web applications. Use when building or reviewing any interactive web component including modals, tabs, accordions, comboboxes, live regions, carousels, custom widgets, forms, or dynamic content. Also use when reviewing ARIA usage for correctness. Applies to any web framework or vanilla HTML/CSS/JS.
Community-Access/accessibility-agents
Desktop A11y Testing Coach
Desktop accessibility testing expert -- NVDA, JAWS, Narrator, VoiceOver screen readers, Accessibility Insights for Windows, automated UIA testing, keyboard-only testing, high contrast verification.
Community-Access/accessibility-agents
lighthouse-bridge
Internal helper agent. Invoked by orchestrator agents via Task tool. Internal helper that bridges Lighthouse CI accessibility audit data with the agent ecosystem. Parses Lighthouse reports, normalizes accessibility findings, tracks score regressions, and deduplicates against local scans.
Didn't find tool you were looking for?