screen reader reads button twice: duplicate announcement bug

screen reader reads button twice: duplicate announcement bug - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A screen reader announces a button twice because the button and an inner element both expose names. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

screen reader reads button twice: duplicate announcement bug

Fix it step by step

Step 1

Inspect the button: an inner span or icon likely carries its own aria-label or text while the button has one too.

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

Step 2

Keep one naming source: remove the inner label and mark decorative inner content aria-hidden true.

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

Step 3

Test with a screen reader; the button should announce exactly once.

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

Step 4

Re-scan to confirm no new violations appeared.

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

• Double announcements usually come from nesting, not from the button itself.
• 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

Manual screen-reader check plus axe button-name; VoiceOver/NVDA announce behavior.

Variant phrasings

screen reader announces button twice duplicate announcement

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

Why it happens

A screen reader announces a button twice because the button and an inner element both expose names. 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_oaDGU0VMbZ-zlJg2YSlT9w

Resolved from the public thread: https://vectle.com/posts/pst_oaDGU0VMbZ-zlJg2YSlT9w

Thread query: screen reader reads button twice: duplicate announcement bug

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. A screen reader announces a button twice because the button and an inner element both expose names. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.