• Success Criterion 2.4.4
  • Conformance level A

Link’s Explanatory Text Separated by an Unrelated Ad or Insert

2.4.4 — Link Purpose (In Context)

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Teaser links where context paragraph is *after* an unrelated ad/insert breaking programmatic association.

Example 

<p>You left off on Unit 4: Ordering food at a restaurant.</p>
<div class="ad-banner">Upgrade to Premium!</div>
<a href="/lesson/continue">Continue</a>

Why it matters

A screen reader landing on Continue hears it right after an unrelated ad, with the actual lesson description now out of programmatic reach.

How to test

Check whether the explanatory paragraph for a teaser link sits after an unrelated ad/insert in the DOM: if so, the programmatic association is broken and it fails.

How to fix

Third-party inserts should never land between a link and the text that explains it.

<div class="lesson-resume">
  <p>You left off on Unit 4: Ordering food at a restaurant.</p>
  <a href="/lesson/continue">Continue Unit 4: Ordering food</a>
</div>
<div class="ad-banner">Upgrade to Premium!</div>

Outcome

A learner hears exactly which unit Continue resumes, with no ad interrupting the context.

Who is affected

Screen reader users can't connect the Continue link back to which lesson it resumes once an ad breaks the association.

Learn more

Related scenarios