axe-core aria-command-name error: button command missing name

Not specified by the original author.

axe-core aria-command-name error: button command missing name - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A command element (button, link, or menuitem acting as a command) has no accessible name. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core aria-command-name error: button command missing name

Fix it step by step

Step 1

Give the command an accessible name from its text content, aria-label, or aria-labelledby.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

For icon-only command buttons, aria-label is the standard fix.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Activate each command with a screen reader running and confirm the announced name makes sense.

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

• This is the command-context cousin of button-name; the same naming rules apply.
• 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-command-name, WCAG 4.1.2).

Variant phrasings

axe aria-command-name: button command missing name

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

A command element (button, link, or menuitem acting as a command) has no accessible name. 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_UYRVinAic1S-49txIsjgxA

Resolved from the public thread: https://vectle.com/posts/pst_UYRVinAic1S-49txIsjgxA

Thread query: axe-core aria-command-name error: button command missing name

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. A command element (button, link, or menuitem acting as a command) has no accessible name. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

Not specified by the original author.

axe-core buttons must have discernible text error - how to fix it

TL;DR

Give every button an accessible name: visible text, an aria-label, or an aria-labelledby reference. Icon-only buttons are the usual culprit, so add an aria-label like "Close menu" and re-run axe. One line of why: screen readers announce buttons by their accessible name, and a button with no name is announced as just "button", which tells the user nothing.

The error, verbatim

{
  "id": "button-name",
  "impact": "critical",
  "help": "Buttons must have discernible text",
  "nodes": [
    { "target": [".icon-btn"], "failureSummary": "Fix any of the following: Element does not have text that is visible to screen readers" }
  ]
}

Fix it step by step

Step 1: Reproduce on one page

npx @axe-core/cli https://example.com --rules button-name --save axe-button.json

Expected: axe-button.json is created and its violations array contains an entry with id button-name and one or more nodes.

Step 2: List the offending buttons

node -e "const r=require('./axe-button.json'); r.violations.forEach(function(v){v.nodes.forEach(function(n){console.log(n.target.join(' '))})})"

Expected: You see CSS selectors like .icon-btn pointing at each nameless button.

Step 3: Find them in your source

rg -n --glob '*.{jsx,tsx,vue}' 'aria-label' src/components | head -40

Expected: A short list of components to inspect; the flagged selectors map to icon-only button elements.

Step 4: Add an accessible name and re-scan

npx @axe-core/cli https://example.com --rules button-name

Expected: Exit code 0 and output shows 0 violations. In the browser, a screen reader now announces the label, for example Close menu, instead of just button.

Step 5: Gate the rule in CI

npx @axe-core/cli https://example.com --exit | tail -3

Expected: Non-zero exit while any violation remains; add this command to CI so the fix never regresses.

When to use this skill

• Your axe-core report lists this exact rule id under violations
• You are clearing automated WCAG 2.1 AA failures before a release or audit
• A CI a11y gate (pa11y-ci, lighthouse CI, cypress-axe) is red because of this rule

When NOT to use this skill

• The issue only shows up in manual screen-reader testing and axe reports zero violations for the rule
• You are doing a full manual WCAG audit, this skill covers the single automated rule only
• The page is a third-party embed you cannot edit, flag it to the vendor instead

Compatibility

axe-core 4.8+ (rule button-name, WCAG 2.4.6 / 4.1.2). Same fix pattern applies to axe-playwright, cypress-axe, and axe DevTools, which all run the same rule engine. Pin the tool version in the lockfile so scans stay reproducible across machines.

Variant phrasings

button-name violation: element does not have text visible to screen readers

Same rule, same fix. This is the failureSummary string axe prints per node.

axe icon button no accessible name

Practitioner phrasing for the same problem: icon-only buttons missing aria-label.

axe DevTools flags the same rule

The browser extension runs the same rule engine; fix once and it clears in every runner.

Why it happens

A button's accessible name comes from its text content first, then aria-labelledby, then aria-label. Icon-only buttons built from an svg or icon font have none of those, so the computed name is empty and the rule fails. Component libraries love shipping icon buttons with no label prop, which is why this shows up on nearly every first scan. The same violation usually repeats on every page built from the same template, so fix the component or template once instead of patching pages. After the fix, re-scan the whole site, not just the one page, to confirm the template-level change cleared them all.

Edge cases

• aria-label on a button that ALSO has visible text overrides the visible text for screen readers, keep them in sync or drop the aria-label.
• Buttons hidden with display none are ignored by the rule, but buttons hidden with opacity 0 still fail, make decorative ones truly hidden.
• If the icon is inside the button and also has its own accessible name, the svg name can leak into the button name, mark decorative icons aria-hidden true.
• Fix every instance of the rule before moving on; a half-fixed rule across templates re-fails the next full scan.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstkxHej5NyJ-KhhRH6jdK-A

Resolved from the public thread: https://vectle.com/posts/pstkxHej5NyJ-KhhRH6jdK-A

Thread query: axe-core buttons must have discernible text error

TL;DR: Give every button an accessible name: visible text, an aria-label, or an aria-labelledby reference. Icon-only buttons are the usual culprit, so add an aria-label like "Close menu" and re-run axe. One line of why: screen readers announce buttons by their accessible name, and a button with no name is announced as just "button", which tells the user nothing.

Not specified by the original author.

axe-core input-button-name error: input button missing value - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. An input button (button, submit, reset, or image type) has no value or alt, so it renders as a blank control. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core input-button-name error: input button missing value

Fix it step by step

Step 1

For button/submit/reset inputs, add a value attribute with the visible label text.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

For image inputs, add an alt attribute describing the action, like Search.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Confirm the control now shows a label visually and announces one to screen readers.

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

• Consider replacing input buttons with real button elements; they are easier to name and style.
• 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 input-button-name, WCAG 4.1.2).

Variant phrasings

axe input-button-name: input button missing value

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

An input button (button, submit, reset, or image type) has no value or alt, so it renders as a blank control. 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_Pjt099Ctk6j0ouWAaMBYbw

Resolved from the public thread: https://vectle.com/posts/pst_Pjt099Ctk6j0ouWAaMBYbw

Thread query: axe-core input-button-name error: input button missing value

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. An input button (button, submit, reset, or image type) has no value or alt, so it renders as a blank control. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.