Clickarea mithilfe von JS oder (wrapped) Anker?

Ich arbeite aktuell an einem größeren Projekt und mache mir gerade ein paar Gedanken zur allgemeinen Seitenstruktur und dessen Markup. Ich würde gerne mal hören, wie ihr eine "Clickarea" umsetzen würdet. Hier das bisherige Markup.

HTML:

<article class="b-cluster">
 <header class="b-cluster__title-row">
  <div class="container">
   <h2 class="cluster-title">the title</h2>
  </div>
 <header>
 <div class="b-cluster__content">
  <article class="teaser">
   <div class="teaser__ratio">
    <img class="teaser__img" src="#">
   </div>
   <div class="teaser__box">
    <h3 class="teaser-title">
     <span>Category</span>
     <span>|</span>
     <span>Artist</span>
     <a href="#">read more...</a>
    </h3>
   </div>
  </article>
 </div>
</article>

oder:

<article>
 <div class="container">
  <h2>title<h2>
 </div>
 <a href="./categeory/artist">
  <article>
   <!-- teaser -->
  <article>
 </a>
</article>

Das <article> Element mit der Klasse teaser soll eine Click-Area sein und enthält selbst einen CTA-Link. Sollte ich diesen entfernen und anstelle dessen den ganzen Artikel in einen <a> Tag verschachteln oder würdest mithilfe von JavaScript auf den eigentlichen Artikel zugreifen?

Der CTA-Button und die Click-Area habe ja das selbe Ziel. Ich bin mir gerade nicht sicher, wie es semantisch am sinnvollsten wäre. Mich interessiert daher wie ihr das ganze angehen würdet. Falls es relevant ist, im <div> Container mit der Klasse b_cluster__content werden mehrere Artikel innerhalb eines Sliders ausgegeben.

Vorab schonmal ein Danke für euren Input.

Computer, Technik, HTML, CSS, Konzeption, Mediengestaltung, Technologie, Webdesign, Webentwicklung