Zugängliche „Weiterlesen“-Links

Das Problem

Ah ja, der schwer fassbare Link "Weiterlesen". Dies ist eine gängige Designbehandlung, um Benutzer anzuweisen, tatsächlich mehr zu lesen. Wenn es jedoch um einen AT -Benutzer geht, geben Links wie diese zu wenig Kontext, um sinnvoll zu sein.

Hier ist ein Beispiel dafür, worauf wir uns beziehen:

Weiterlesen

Wenn Sie jetzt einen Screenreader verwenden würden, woher würden Sie wissen, was dieser Link bedeutet? Lesen Sie mehr über was?

Eine mögliche Lösung

Hier ist eine einfache und effektive Lösung, um Benutzern mehr Kontext zu geben:

Lesen Sie mehr über das Thema, auf das sich dieser Artikel bezieht.

Sehen Sie zusätzlichen Text? Ich auch nicht. Dies ist das Ergebnis der CSS-Klasse .visuallyhidden , die den zusätzlichen Text versteckt. Wenn Sie dies mit einem Screenreader testen würden, würde dieser den vollständigen Text innerhalb des <anchor> -Elements und des versteckten <span> -Elements laut vorlesen, was dem Benutzer viel mehr Kontext bietet. Dies verleiht weitere Details darüber, was der Benutzer anklicken wird, und ist tatsächlich das, wonach er sucht.

Zurück zum Blog