Duplicate Accessible Names
Minor - WCAG LEVEL AAA
What the issue is:
Duplicate accessible names occur when two or more interactive or landmark elements expose the exact same name (accessible name) to assistive technologies without additional distinguishing context. For example, multiple buttons or links all labeled “Open” or “More options” in the same context will be announced identically by a screen reader.
Why it matters:
Screen reader and keyboard users rely on accessible names to find and differentiate controls. When elements have identical names and no additional context, users cannot determine which control performs which action. This increases cognitive load and can cause users to take incorrect actions or abandon tasks.
How to fix it:
Identify where multiple elements expose the same accessible name (textContent, aria-label, aria-labelledby, alt, etc.).
Determine whether those duplicates are necessary. If a duplicate is purely decorative or redundant to screen reader users, hide it from AT using aria-hidden="true" or role="presentation" on the decorative element.
If the duplicates are distinct interactive controls, give each a unique, descriptive accessible name that includes context (e.g., "Delete photo: summer-beach.jpg" or "Open settings for Project Alpha"). Use aria-label or aria-labelledby to build names programmatically if visible text cannot be changed.
Consider pairing visible context text with aria-labelledby (reference the id of a nearby visible label) so the accessible name matches the visual label and provides context.
Test with screen readers (NVDA/JAWS/VoiceOver) and keyboard-only navigation to confirm users can reliably distinguish controls.
Best practices:
Use semantic HTML first (button, a, label). Prefer visible, contextual text over aria-label where possible.
Use aria-describedby for supplemental details (not for the primary name).
Keep accessible names concise but specific. When generating names dynamically, ensure uniqueness and stability.
Common mistakes:
Relying on the same aria-label for multiple controls
Overusing aria-label to hide visible text (which can remove context)
Using duplicate IDs in aria-labelledby
Hiding necessary context with aria-hidden
Assuming visual cues (icons/position) convey meaning to screen reader users