Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ?

[Gunnar Bittersmann]

@@michaah

Ich habe einen größeren Bereich als als Link definiert, einfach dadurch dass ich Start- und End-Tag des a-Elements im html alle Elemente umschließen lasse die diesen Link bilden sollen. Dieser besteht aus Bild und Text Elementen

Das ist schlecht, denn dadurch wird sämtlicher enthaltener Text zum Linktitel. Wenn ein Screenreadernutzer von Link zu Link navigiert, quasselt sich der Screenreader tot. Eine nutzbare Seite geht anders.

Der Linktitel sollte kurz und aussagekräftig sein, d.h. es darf nicht der gesamte Inhalt des Bereichs im a-Element stehen.

Mir fallen zwei Methoden ein, einen kurzen Link zu haben und dennoch die gesamte Box clickbar zu machen:

• mit über die Box gelegtem Pseudoelement; Nachteil: der Text ist nicht mehr markierbar
• mit JavaScript; die wohl bessere Variante

siehe Codepen linkek boxes und Posting ganze Box verlinken

Die dritte Variante zeigt, wie man’s nicht machen sollte.

Mich verwundert, dass […]

Ich möchte hier den ziemlich verschachtelten Code nicht posten

Dann können wir uns nicht mitwundern.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!