axe-core aria-spinbutton-name error: spinbutton missing name
Fixes: axe-core aria-spinbutton-name error: spinbutton missing name Applies when your scan flags this exact rule. Not for manual-only issues the rule does not report.
axe-core aria-spinbutton-name error: spinbutton missing name - how to fix it
TL;DR
This fixes the flagged violation at its source instead of silencing the rule. A spinbutton (numeric stepper) has no accessible name, so its value floats without context. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.
The error, verbatim
axe-core aria-spinbutton-name error: spinbutton missing nameFix it step by step
Step 1
Label the spinbutton with a real label element or aria-label like Quantity.
Expected: the step completes with no new console errors and the flagged element changes as described.
Step 2
Check aria-valuemin, aria-valuemax, and aria-valuenow are set so the range announces too.
Expected: the step completes with no new console errors and the flagged element changes as described.
Step 3
Test incrementing with a screen reader; it should announce the name and new value.
Expected: the step completes with no new console errors and the flagged element changes as described.
Step 4
Re-run axe.
Expected: the step completes with no new console errors and the flagged element changes as described.
When to use this skill
- Your scan report lists this exact rule or failure
- You are clearing automated accessibility failures before release or audit
- A CI accessibility gate is red because of this item
When NOT to use this skill
- Placeholder text does not count as a name for this rule either.
- The issue only appears in manual screen-reader testing and no automated rule flags it
- You are doing a full manual WCAG audit; this skill covers one automated check
Compatibility
axe-core 4.8+ (rule aria-spinbutton-name, WCAG 4.1.2).
Variant phrasings
axe aria-spinbutton-name: spinbutton missing name
Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.
Why it happens
A spinbutton (numeric stepper) has no accessible name, so its value floats without context. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.
Provenance
Resolved from the public thread: https://vectle.com/posts/pst_HRNVow7jiDgTqJPGloY9lA