Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.
.claude/skills/thedaviddias-custom-element-accessibility/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-02 | ✗→✓ | ▲ Improved | -15% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 35% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -10% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | 37% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | 13% | 0% |
Custom elements that lack ARIA reflection are invisible to screen readers — a button that looks correct visually may be announced as a generic "group" or not at all. ElementInternals provides the bridge between the shadow DOM and the accessibility tree, and it is also the only standards-compliant way to integrate custom inputs with native HTML forms.
<button>, <input>, <select>, and <details> before building a custom widgetInspect these custom element definitions for missing ElementInternals setup, absent ARIA reflection, incomplete keyboard interaction patterns, and lack of form association for input-like components. First verify that the widget truly needs to be custom rather than a native control with styling.
Add ElementInternals attachment in the constructor, implement ariaRole and ariaLabel reflection, add keyboard event handlers following ARIA authoring patterns, and use formAssociated for custom input elements. Replace the component with native HTML when the native control already supports the required interaction.
Explain why the shadow DOM does not automatically expose ARIA semantics and how ElementInternals bridges the gap between custom elements and the accessibility tree.
Review custom element class files for ElementInternals attachment, ARIA property reflection, keyboard interaction (Tab, Enter, Space, Arrow keys), focus management, and formAssociated static property on input-like elements. Flag cases where a native control would remove the accessibility burden entirely.
For full implementation details, code examples, and framework-specific guidance, see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/html/custom-element-accessibility
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 16,344 | 14,468 | -11% | 1 | 1 | 0% | 3,637 | 3,804 | +5% | 0 | 0 | — |
case-02 | fail→pass | 13,093 | 9,565 | -27% | 1 | 1 | 0% | 2,726 | 2,309 | -15% | 0 | 0 | — |
case-03 | pass→pass | 13,192 | 11,718 | -11% | 1 | 1 | 0% | 2,355 | 3,231 | +37% | 0 | 0 | — |
case-04 | pass→pass | 10,459 | 9,284 | -11% | 1 | 1 | 0% | 2,446 | 2,769 | +13% | 0 | 0 | — |
case-05 | fail→pass | 9,627 | 10,123 | +5% | 1 | 1 | 0% | 2,084 | 2,818 | +35% | 0 | 0 | — |
case-06 | pass→pass | 14,354 | 9,867 | -31% | 1 | 1 | 0% | 2,536 | 2,311 | -9% | 0 | 0 | — |
case-07 | fail→fail | 15,962 | 16,380 | +3% | 1 | 1 | 0% | 2,926 | 3,932 | +34% | 0 | 0 | — |
case-08 | pass→pass | 10,819 | 13,302 | +23% | 1 | 1 | 0% | 2,726 | 3,303 | +21% | 0 | 0 | — |
case-09 | pass→pass | 11,581 | 9,542 | -18% | 1 | 1 | 0% | 2,346 | 2,453 | +5% | 0 | 0 | — |
case-10 | pass→pass | 8,516 | 6,236 | -27% | 1 | 1 | 0% | 1,651 | 1,699 | +3% | 0 | 0 | — |
case-11 | fail→pass | 12,399 | 7,898 | -36% | 1 | 1 | 0% | 2,432 | 2,200 | -10% | 0 | 0 | — |
case-12 | pass→pass | 10,466 | 8,906 | -15% | 1 | 1 | 0% | 2,078 | 2,327 | +12% | 0 | 0 | — |
case-13 | pass→pass | 13,563 | 9,374 | -31% | 1 | 1 | 0% | 2,459 | 2,243 | -9% | 0 | 0 | — |
case-22 | fail→fail | 13,695 | 9,342 | -32% | 1 | 1 | 0% | 2,140 | 2,077 | -3% | 0 | 0 | — |
case-14 | pass→pass | 7,915 | 7,228 | -9% | 1 | 1 | 0% | 1,629 | 1,902 | +17% | 0 | 0 | — |
case-15 | fail→fail | 16,591 | 18,044 | +9% | 1 | 1 | 0% | 3,235 | 4,262 | +32% | 0 | 0 | — |
case-16 | pass→pass | 15,256 | 12,154 | -20% | 1 | 1 | 0% | 3,219 | 3,029 | -6% | 0 | 0 | — |
case-17 | pass→pass | 14,793 | 12,576 | -15% | 1 | 1 | 0% | 2,819 | 3,116 | +11% | 0 | 0 | — |
case-18 | pass→pass | 4,203 | 4,913 | +17% | 1 | 1 | 0% | 807 | 1,342 | +66% | 0 | 0 | — |
case-19 | pass→pass | 13,913 | 9,422 | -32% | 1 | 1 | 0% | 2,327 | 2,203 | -5% | 0 | 0 | — |
case-20 | pass→pass | 11,211 | 8,182 | -27% | 1 | 1 | 0% | 2,073 | 1,831 | -12% | 0 | 0 | — |
case-21 | pass→pass | 9,494 | 7,179 | -24% | 1 | 1 | 0% | 1,859 | 1,971 | +6% | 0 | 0 | — |
case-23 | pass→pass | 12,312 | 12,291 | -0% | 1 | 1 | 0% | 2,537 | 2,649 | +4% | 0 | 0 | — |
case-24 | pass→pass | 12,822 | 11,607 | -9% | 1 | 1 | 0% | 2,808 | 2,867 | +2% | 0 | 0 | — |
case-25 | pass→pass | 9,451 | 5,022 | -47% | 1 | 1 | 0% | 1,757 | 1,452 | -17% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of +12 percentage points is the difference between those two pass rates over the 25 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.