• Success Criterion 1.3.1
  • Conformance level A

Same Page Content Accidentally Announced More Than Once

1.3.1 — Info and Relationships

Scenario

Setting

A calendar app's event-creation form

What’s wrong

The same content is announced twice — duplicated accessible nodes, or a landmark (a coded page region) re-announced with all its links on every encounter — creating noise and making users doubt where they are.

Example 

<nav aria-label="Event actions">
  <a href="#save">Save</a><a href="#discard">Discard</a>
</nav>
<nav aria-label="Event actions" class="mobile-only">
  <a href="#save">Save</a><a href="#discard">Discard</a>
</nav>

Why it matters

A screen reader user hears Event actions, Save, Discard announced twice back to back. Both navs stay in the accessibility tree, though only one shows visually.

How to test

Navigate the page with a screen reader end-to-end: listen for the same landmark, link list, or content block being announced more than once — duplicated accessible nodes create this.

How to fix

Use CSS to restyle one element for different screen sizes instead of duplicating the whole markup block.

<nav aria-label="Event actions" class="responsive-nav">
  <a href="#save">Save</a><a href="#discard">Discard</a>
</nav>

Outcome

A user hears the Event actions menu announced exactly once, with no repeated links to sort through.

Who is affected

Screen reader users creating an event hear duplicate landmarks and links, making them doubt which one to use.

Learn more

Related scenarios