Letzte Woche habe ich mir moderne Programmiertechniken wie Javascript Frameworks & Co. in Zeiten von Accessibility angeschaut. Heute möchte ich Dir einmal ein Problem aufzeigen, das wir SEOs in den kommenden Monaten zu lösen haben. Es geht um das Thema Link-Maskierung und PRG-Pattern.
Aber wieso ist das überhaupt ein Problem? Es ist eigentlich sehr simpel. Durch die Maskierung von einem Link ändern wir das gängige A-Tag, das einen Link beschreibt, in ein anderes HTML-Tag, codieren das Linkziel mit einem Codec wie Base64 und schreiben es in ein Attribut des geänderten Tags. Nun setzen wir noch ein Javascript-OnClick-Event auf dieses Tag und rufen damit eine Javascript-Funktion auf, die unser Base64-Linkziel decodiert und den Browser auf das Linkziel leitet. Dieses Szenario beschreibt die klassische Linkmaskierung.
Maskierte Links sind nicht barrierefrei
Dabei vergessen wir nun aber den European Accessibility Act. In diesem ist klar definiert, dass Webseiten bzw. Ecommerce- Anwendungen auch mit anderen Eingabegeräten wie z.B. die Tastatur zu bedienen sein müssen. Da wir aber unseren Link mutwillig nicht mehr als Link gekennzeichnet haben, ist dieser aus dem Tab-Index (Eine Liste von Controls, die per Tab-Taste nacheinander fokussiert werden können) geflogen und nicht mehr per Tastatur ansteuerbar.
Um dieses Problem zu lösen, könnte man nun auf die Idee kommen, den WAI-ARIA-Standard zu Hilfe zu nehmen. Mit diesem Standard und einigen Tag-Attributen kann das Verhalten von HTML-Tags im Browser verändert werden. Wir könnten aus unserem maskierten Link nun wieder einen Link machen, den der Browser (und vielleicht auch die Suchmaschine) wieder als Link erkennt. Um dies zu verhindern, habe ich eine einfachere Lösung gefunden:
-
Mit dem Attribute tabindex="0" reihen wir das HTML-Tag in den Tab-Index ein. Das HTML-Tag kann nun durch Drücken der Tab-Taste wieder erreicht werden. Du erkennst das daran, dass ein kleiner Kasten um das jeweils fokussierte Element angezeigt wird.
-
Als nächstes benötigen wir noch ein Javascript-Event onkeypress="...", mit dessen Hilfe wir prüfen, ob die Enter-Taste gedrückt wurde. Wenn dies der Fall ist, simulieren wir per Javascript einen Klick auf das HTML-Tag.
Wie geht das genau? Ich hab da mal was vorbereitet
Dieses Vorgehen lässt sich auch auf die PRG-Pattern übertragen. Als Service und Beispiel möchte ich Dir mein GitHub-Projekt "PRG-Pattern" vorstellen. In diesem Projekt findest Du ein vollständig funktionieres PRG-Pattern-Beispiel mit allen Scripten, die Du zur Maskierung, Dekodierung und Weiterleitung benötigst.
Dabei habe ich noch einen gesalzenen Hash-Wert in das Projekt aufgenommen, um den Missbrauch unseres PHP-Weiterleitungsscripts durch Dritte zu verhindern. Wir erzeugen also mit einer geheimen Zeichenkette plus der URL des Linkziel einen md5-Hashwert. Nur wenn der Hashwert mit der URL von unserem Weiterleitungsscript auch erfolgreich verglichen werden kann, leitet dieses weiter. So können Dritte das PHP-Script nicht verlinken und sich so keine Links von unserer Seite ergaunern.
Solche Skripte waren übrigens ein sehr beliebter Trick für Fiverr-Angebote wie "I boost your PR up to 50". Aber das diskutieren wir besser an anderer Stelle.