Klickbare Cards barrierefrei umsetzen

Karten, bei denen die ganze Fläche klickbar ist, sind ein beliebtes Muster – und ein häufiger Anlass für kaputtes Markup. Der naive Weg, die gesamte Karte in ein <a> zu packen, schafft mehr Probleme, als er löst. Es geht eleganter.

Warum nicht die ganze Karte in ein <a>?

Eine Karte enthält meist eine Überschrift, Text und vielleicht ein Bild. Packt man alles in einen einzigen Link, entstehen zwei Probleme:

• Verschachtelte interaktive Elemente: Sobald in der Karte ein zweiter Link oder Button steckt, ist das ungültig – Links dürfen keine Links enthalten.
• Geschwätzige Ansage: Screenreader lesen den kompletten Linktext am Stück vor – Überschrift, Beschreibung, „Bild“ –, statt einer klaren, kurzen Linkbezeichnung.

Das Stretched-Link-Muster

Die saubere Lösung: ein echter Link auf der Überschrift, der per Pseudo-Element die ganze Karte überzieht. Geklickt wird die ganze Fläche, angesagt wird nur der sinnvolle Linktext.

<article class="card">
  <h3><a href="/seo-und-ki/bild-seo.html">Bild-SEO</a></h3>
  <p>Wie Bilder gefunden werden und die Seite stärken.</p>
</article>

.card { position: relative; }
.card a::after {
  content: "";
  position: absolute;
  inset: 0; /* überzieht die ganze Karte */
}

Randnotiz – genau dieses Muster nutzt diese Seite. Die Themen-Karten auf den Übersichtsseiten und die „Weiterlesen“-Karten am Artikelende sind exakt so gebaut: ein Link auf der Überschrift, ein ::after, das die Karte klickbar macht, plus ein sichtbarer Fokusrahmen über :has(a:focus-visible). Eine Karte, ein Link, klare Ansage.

Text markierbar halten

Ein überzogenes ::after schluckt die Maus-Auswahl des Textes. Wer das vermeiden will, lässt das Overlay nur den nötigen Bereich abdecken oder hebt die Markierbarkeit gezielt an – ein kleiner Feinschliff, der das Kopieren von Text erhält.

Mehrere Aktionen in einer Karte

Sobald eine Karte mehrere Ziele hat (Hauptlink plus „Teilen“, „Merken“), ist die voll klickbare Fläche der falsche Ansatz. Dann gilt: echte, getrennte Links und Buttons, und die Karte ist eben nicht komplett klickbar. Klarheit schlägt Komfort.

Häufige Fehler

• Ganze Karte in ein <a> – verschachtelte Links, geschwätzige Ansage.
• Klick-<div> mit JS-Handler statt eines echten Links – kein „in neuem Tab“, keine Tastatur.
• Kein sichtbarer Fokus auf der Karte.
• Stretched Link trotz mehrerer Aktionen – die Zweitlinks werden unerreichbar.
• Text nicht mehr markierbar, ohne dass es nötig wäre.

Häufige Fragen

Wie wird die Karte per Tastatur bedienbar?

Über den echten Link in der Überschrift – er ist fokussierbar und auslösbar. Den Fokus machst du auf der ganzen Karte sichtbar, z. B. mit :has(a:focus-visible).

Was, wenn ich Hauptlink und einen kleinen Zweitlink will?

Dann verzichte auf die voll klickbare Fläche. Nutze zwei echte, getrennt benannte Links – sonst überlagert das Overlay den Zweitlink.

Ist das gut fürs SEO?

Ja. Es bleibt ein normaler, beschreibender interner Link auf der Überschrift – ideal für Ankertext und Crawlbarkeit.

Fazit

Klickbare Karten löst du mit dem Stretched-Link-Muster: ein echter Link auf der Überschrift, ein ::after, das die Fläche überzieht, plus sichtbarer Fokus. Das vermeidet verschachtelte Links und die geschwätzige Ansage des „Alles-Link“-Ansatzes. Sobald eine Karte mehrere Ziele hat, nimmst du echte, getrennte Links und verzichtest auf die voll klickbare Fläche.