Um den Besuchern einer Webseite möglichst viel Komfort zu bieten geht der Trend dazu Teaser vollflächig zu verlinken, um die Clickfläche möglichst groß und klar zu gestalten, anstatt nur den “mehr” Link als Clickfläche anzubieten.
Das Problem
Das Problem bei diesem vorgehen ist es, dass Links auch im Teasertext vorkommen können oder sogar sollen. Es ist jedoch nicht erlaubt <a> Tags in andere <a> Tags zu verschachteln. Wird das Problem nicht behandelt und es kommen doch Links innerhalb von Links vor, so treffen die Browser eigene Entscheidungen, wie mit dem HTML umzugehen ist. So wird z.B. das Element beim äußeren Link geöffnet aber beim inneren Link geschlossen, sodass das Design in der Regel bricht.
Die Lösung
Um dieses Problem zu Lösen habe ich das Modul mit dem Namen c-full-link ins Leben gerufen. Dieses behandelt mehrere Schichten des Problems und in vier Teillösungen aufgesplittet.
Als Basis für das Modul wird das CodePen Material Design Card (Simple) von Travis Williamson verwendet.
See the Pen
Material Design Card (Simple) by Travis Williamson (@travisw)
on CodePen.
Überlagerung
Als erstes wird eine Überlagerung über die komplette Fläche benötigt. Dazu legt man einen absolut positionierten Link innerhalb eines relativ positionierten Elternelementes ab. Dadurch ist nun über dem gesamten Teaser ein Link.
See the Pen
Material Design Card (Simple) – c-full-link – 1 by wesselbaum (@wesselbaum)
on CodePen.
Beinhaltende Elemente clickbar gestalten
Durch die Überlagerung geht nun die Interaktion mit den Kindselementen verloren. Um das zu beheben muss der Überlagerung und den interaktiven Elementen ein z-index gegeben werden.
See the Pen
Material Design Card (Simple) – c-full-link – 2 by wesselbaum (@wesselbaum)
on CodePen.
Hauptlink
Im nächsten Schritt muss definiert werden, bei welchem der Links es sich um den Hauptlink handelt. Dieser wird mit der Klasse c-link__main-link versehen. Anschließend muss dafür gesorgt werden, dass die Aktivzustände der Elementlinks auf den Hauptlink übertragen werden, sobald es Interaktionen mit dem vollflächigen Link gibt.
Zusätzlich sollte der Hauptlink keine Interaktionen mit der Maus anbieten, da die Clickfläche bereits durch den c-full-link__link gegeben ist. Das ist vor allem dann wichtig, wenn weitere Elemente einen Aktivzustand haben. Solche Elemente können z.B. die Titelzeile mit einer Unterstreichung o.Ä. sein.
See the Pen
Material Design Card (Simple) – c-full-link – 3 by wesselbaum (@wesselbaum)
on CodePen.
Barrierefreiheit
Für die Barrierefreiheit ist es wichtig, an welcher Stelle der c-full-link__link im Quellcode positioniert ist.
Hauptlink vorhanden
Wenn ein Hauptlink vorhanden ist, so sollte c-full-link__link als erstes Kindelment von c-full-link sich befinden mit den Attributen aria-hidden="true" tabindex="-1". Dadurch wird der Link nicht bei der Bedienung mit der Tastatur ausgewählt oder vorgelesen, jedoch kann der Hauptlink eine Animation erhalten, da er eines der Geschwisterelemente ist, oder darin beinhaltet wird.
See the Pen
Material Design Card (Simple) – c-full-link -4 by wesselbaum (@wesselbaum)
on CodePen.
Kein Hauptlink vorhanden
Wenn kein Hauptlink vorhanden ist, so sollte c-full-link__link als letztes Kindelement von c-full-link sich befinden und zwar ohne weitere Attribute. Das hat den Hintergrund, dass dieser Link weiterhin mit der Tastatur anwählbar und von Screenreadern vorgelesen werden soll. Die Aktivzustände sollten dann auf c-full-link__link liegen.
Kompromiss
Leider kommt die Lösung nicht ohne eine Einschränkung. Dadurch, dass der Link über dem Inhalt liegt, können nur interaktive Elemente in den Vordergrund gebracht werden. Dadurch ist der normale Fließtext für die Benutzer der Seite nicht auswähl- und kopierbar.