Back, or all the way home

When the three links aren't yours to fix

Sometimes accessibility work means making bad markup less bad without pretending you fixed the system.

Sometimes the markup arrives from a black box. A CMS template, a third-party component, a system nobody’s allowed to touch until the next fiscal year. You know the teaser should have one link. It has three. You don’t get a vote.

You do get CSS, though. visibility has a perk that display doesn’t: children can opt back in. Hide the redundant anchors, then make their contents visible again:

a:has(.teaser__image),
a:has(.teaser__excerpt) {
  visibility: hidden;

  > * {
    visibility: visible;
  }
}

The image and excerpt still render exactly where they were. But the anchors themselves are gone from the accessibility tree and the tab order, because visibility: hidden removes them from both, unlike opacity or a transparent color, which only make things look absent. One link remains, you stretch its click area with the pseudo-element trick from the main article, and the teaser behaves the way it should have from the start.

Before (try tabbing through)

After

It’s a patch, not a fix. The right answer is still upstream, in whatever system decided every teaser needs three identical destinations. But keyboard users don’t tab through your architecture diagrams. They tab through what shipped.

Another thing