"Read more" fourteen times on one page

What the criterion actually asks

WCAG 2.4.4 Link Purpose (In Context) is satisfied when the purpose of each link can be determined from the link text alone or together with its programmatically determined context — the sentence, list item, table cell or paragraph it sits in.

That “or” is doing a lot of work, and it is why this is a fix family that automation should not settle by itself. “Read more” following a heading that names a product does have determinable context. The same words in a footer column do not. A machine can identify the pattern; it cannot reliably judge the context.

The stricter Level AAA criterion, 2.4.9 Link Purpose (Link Only), removes the “or” entirely. If you want to be excellent rather than merely conformant, aim at that one — it is also simply better writing.

How this is detected here

No engine in the scan carries a named rule for ambiguous-but-present link text — axe’s link-name fires only when a link has no name at all, which is the sibling family. So this one is found by Klarvo’s own deterministic pass over the rendered page: the same generic phrase — “Read more”, “Details”, “Click here” — repeated across links that point at different destinations. Each finding becomes a drafted rewrite in your review queue. Nothing in this family is ever applied on the machine’s own judgement, and a draft that fails its own audit is discarded rather than proposed.

Where the ambiguity creeps in

• Product grids and archives. Themes append “Read more” or “View product” to every excerpt. Pull up the links list on a shop page and you get the same phrase repeated once per product.
• “Details”, “More info”, “Learn more”. Blog roll-ups, cross-sells and upsell blocks.
• Bare URLs. A pasted https://… link is read out character by character by some screen readers, which is worse than an unhelpful phrase.
• “Click here”. Still remarkably common in shipping and returns copy, and it names an action rather than a destination.
• Icon-plus-text combinations where the text is the same for every item and the icon carries the difference.

The specific damage is not that any individual link is confusing. It is that the list is destroyed, and the list is the navigation mechanism.

How to fix it yourself

First choice: change the visible text

The best fix helps everybody, including people who are simply skimming.

<?php
// wp-content/themes/<child-theme>/functions.php
// WooCommerce's loop "read more" button, given a real name.
add_filter( 'woocommerce_loop_add_to_cart_link', function ( $html, $product ) {
    if ( $product->is_type( 'simple' ) && $product->is_purchasable() ) {
        return $html; // "Add to basket" is already clear
    }

    return sprintf(
        '<a href="%1$s" class="button product_type_%2$s">%3$s</a>',
        esc_url( $product->get_permalink() ),
        esc_attr( $product->get_type() ),
        esc_html( sprintf( __( 'View %s', 'your-theme' ), $product->get_name() ) )
    );
}, 10, 2 );

For the classic post excerpt link:

add_filter( 'the_content_more_link', function ( $link ) {
    return sprintf(
        '<a class="more-link" href="%1$s">%2$s</a>',
        esc_url( get_permalink() ),
        esc_html( sprintf( __( 'Read more: %s', 'your-theme' ), get_the_title() ) )
    );
} );

There is a design objection to this, and it is a real one: long link text in a tidy grid looks untidy. Which brings us to the second choice.

Second choice: keep the visible text, extend the accessible name

<a class="more-link" href="/product/ceramic-mug/" aria-label="Read more about the Ceramic Mug">
  Read more
</a>

The visible text stays two words; the accessible name is specific. The rule to hold to is that the accessible name contains the visible text, so that a voice-control user saying “click read more” still matches the control.

If you would rather not use ARIA, the same result comes from a visually hidden span, which has the advantage of translating with the rest of your content:

<a class="more-link" href="/product/ceramic-mug/">
  Read more<span class="screen-reader-text"> about the Ceramic Mug</span>
</a>

What not to do

• Do not put the product name in a title attribute and consider it handled. title is unreliable, invisible on touch, and frequently not announced.
• Do not make the whole excerpt the link. A very long accessible name is its own barrier.
• Do not write “Read more about the Ceramic Mug (opens in a new window)” unless it genuinely opens in a new window — and if it does, say so, because an unannounced context change is a separate failure.
• Do not link a bare URL as its own text. Give it a name, or at minimum shorten it to the domain.

Writing good link text

Two habits carry most of the weight: front-load the distinguishing word, and never make the link text a verb with no object.

How you know it worked

The test is the one your customers use. With a screen reader running, pull up the links list — VO-U then the links menu in VoiceOver, Insert+F7 in NVDA — and read down it. If you can tell, from that list alone, where each link goes, you are done. If two entries are identical and go to different places, you are not.

A quicker sighted approximation, useful in a hurry:

// paste in the console: every link, grouped by its accessible-ish name
const byName = {};
document.querySelectorAll('a[href]').forEach((a) => {
  const name = (a.getAttribute('aria-label') || a.textContent || '').trim().replace(/\s+/g, ' ');
  (byName[name] ||= new Set()).add(a.getAttribute('href'));
});
Object.entries(byName)
  .filter(([, hrefs]) => hrefs.size > 1)
  .forEach(([name, hrefs]) => console.warn(`"${name}" → ${hrefs.size} different destinations`));

Anything that warns is a link name doing two jobs at once. That is the list to work through.