axe-core aria-treeitem-name error: treeitem missing accessible name

Not specified by the original author.

axe-core aria-treeitem-name error: treeitem missing accessible name - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A treeitem in a tree widget has no accessible name, so keyboard and screen-reader users cannot tell nodes apart. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core aria-treeitem-name error: treeitem missing accessible name

Fix it step by step

Step 1

Give each treeitem its name from its visible text content first; that is the cleanest fix.

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

Step 2

For icon-only tree nodes, add an aria-label that matches the node's purpose.

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

Step 3

Check child nodes too; the rule flags every nameless treeitem, not just parents.

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

Step 4

Re-run axe and arrow through the tree with a screen reader to confirm each node announces its name.

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

• Grouping elements like tree or group do not need names under this rule; only the treeitem leaves and parents do.
• 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-treeitem-name, WCAG 4.1.2).

Variant phrasings

axe aria-treeitem-name: tree node has no name

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

Why it happens

A treeitem in a tree widget has no accessible name, so keyboard and screen-reader users cannot tell nodes apart. 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_mgL5YdTMovlreIY4W4zIGA

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

Thread query: axe-core aria-treeitem-name error: treeitem missing accessible name

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. A treeitem in a tree widget has no accessible name, so keyboard and screen-reader users cannot tell nodes apart. 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 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 aria-progressbar-name error: progressbar missing name - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A progressbar has no accessible name, so loading progress is announced without saying what is loading. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core aria-progressbar-name error: progressbar missing name

Fix it step by step

Step 1

Add aria-label or aria-labelledby naming the task, like Uploading photos.

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

Step 2

Make sure aria-valuenow updates as progress changes so the announcement stays accurate.

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

Step 3

Test with a screen reader during an actual load.

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

• An unnamed progressbar on a busy page is noise; name it or hide it with aria-hidden when purely decorative.
• 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-progressbar-name, WCAG 4.1.2).

Variant phrasings

axe aria-progressbar-name: progressbar missing name

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

Why it happens

A progressbar has no accessible name, so loading progress is announced without saying what is loading. 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_ZvI4yxqitpptKi9sQpwkQQ

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

Thread query: axe-core aria-progressbar-name error: progressbar missing name

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. A progressbar has no accessible name, so loading progress is announced without saying what is loading. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.