Challenge 1: Add Visually-Hidden Context to Repeated Links — Possible Solution
====================================================================

<a href="/products/blue-sneakers">View details<span class="visually-hidden"> about Blue Sneakers</span></a>
<a href="/products/red-jacket">View details<span class="visually-hidden"> about Red Jacket</span></a>
<a href="/products/green-hat">View details<span class="visually-hidden"> about Green Hat</span></a>

WHY THIS WORKS
--------------
- The VISIBLE text on every link stays exactly "View details" — sighted
  users see it in context, right next to (or under) the relevant
  product's image and name, so they already know which product each
  link belongs to from its visual position. Nothing about the visible
  design changes at all.
- Each <span class="visually-hidden"> adds product-specific context
  (" about Blue Sneakers," etc.) that's present in the accessibility
  tree but not rendered visually — using the exact same clip-based CSS
  pattern from this chapter's own example.
- A screen reader user tabbing through the page's links hears "View
  details about Blue Sneakers," "View details about Red Jacket," "View
  details about Green Hat" — three DISTINCT, meaningful announcements
  — instead of "View details" repeated three times with no way to tell
  which product each one actually refers to, which is exactly the
  problem this chapter's "Read more" example described.
- A leading space is included at the start of each hidden span's text
  (" about Blue Sneakers") so it concatenates naturally with the
  visible "View details" text before it, producing a single, properly
  spaced announcement rather than the two pieces running together
  without a space between them.