Wie man einen „Skip to Content“-Link erstellt

Skip-Links sind kleine interne Navigationslinks, die Benutzern helfen, sich auf einer Seite zurechtzufinden. Es ist möglich, dass Sie noch nie einen gesehen haben, da sie oft nicht sichtbar sind und als Barrierefreiheitsverbesserung dienen, die es Tastaturnutzern und Screenreadern ermöglicht, vom oberen Seitenrand zum Inhalt zu springen, ohne zuerst andere Elemente auf der Seite durchlaufen zu müssen.

Tatsächlich finden Sie einen davon hier auf CSS-Tricks, wenn Sie die DevTools öffnen.

Meiner Meinung nach ist der beste Weg, einen Skip-Link zu implementieren, ihn zu verstecken und ihn dann sichtbar zu machen, wenn er fokussiert ist. Nehmen wir also an, wir haben einen Link im HTML

<a class="skip-to-content-link" href="#main">
  Skip to content
</a>

… wir können ihm eine absolute Position geben und ihn vom Bildschirm weg verschieben

.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

Dann können wir ihn wieder sichtbar machen, wenn er fokussiert ist, und ihn dabei etwas stylen

.skip-to-content-link {
  background: #e77e23;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}

Dies wird unseren Link verbergen, bis er fokussiert ist, und ihn dann sichtbar machen, wenn er fokussiert wird.

Nun lassen Sie mich näher darauf eingehen, beginnend mit diesem Zitat von Miles Davis

Zeit ist nicht die Hauptsache. Sie ist die einzige Sache.

Während ich in einem regnerischen Irland sitze, um diesen Artikel zu schreiben, denke ich an die Herausforderungen, denen sich viele Benutzer stellen, wenn sie das Web nutzen, was ich für selbstverständlich halte. Wir denken intensiv darüber nach, eine großartige Benutzererfahrung zu schaffen, ohne an *alle* unsere Benutzer und deren Bedürfnisse zu denken. Zugegebenermaßen hatte ich noch nie von einem Skip-Link gehört, bis ich einen Kurs bei Frontend Masters von Marcy Sutton absolvierte. Seitdem ich die Kraft und Einfachheit eines Skip-Links kenne, habe ich es mir zur Aufgabe gemacht, mehr Bewusstsein zu schaffen – und welche Plattform wäre besser als CSS-Tricks!

Eine Lösung ist die Antwort auf ein Problem. Was ist also die Lösung, um Tastaturnutzern und Screenreadern zu helfen, schnell den Inhalt einer Seite zu finden? Kurz gesagt, die Lösung ist *Zeit*. Benutzern die Möglichkeit zu geben, zu den Teilen unserer Website zu navigieren, die sie am meisten interessieren, gibt ihnen die Macht, wertvolle Zeit zu sparen.

Nehmen Sie zum Beispiel die Website von Sky News. Sie bietet eine „Skip to Content“-Schaltfläche, die es Benutzern ermöglicht, alle Navigationselemente zu überspringen und direkt zum Hauptinhalt zu springen.

Sie können diese Schaltfläche sehen, indem Sie mit Ihrer Tastatur zum oberen Seitenrand navigieren. Dies ähnelt der oben gezeigten Implementierung. Der Link ist immer im Dokument vorhanden, wird aber nur sichtbar, wenn er fokussiert ist.

Dies ist die Art von Skip-Link, die wir in diesem Beitrag gemeinsam erstellen werden.

Unsere Beispiel-Website

Ich habe eine Beispiel-Website erstellt, die wir zur Demonstration eines Skip-Links verwenden werden.

Die Website hat eine Reihe von Navigationslinks, aber aus Zeitgründen gibt es nur zwei Seiten: die **Startseite** und die **Blog-Seite**. Das ist alles, was wir brauchen, um zu sehen, wie die Dinge funktionieren.

Das Problem identifizieren

Hier ist die Navigation, mit der wir arbeiten

Insgesamt haben wir acht Navigationspunkte, die ein Tastaturnutzer und ein Screenreader durchlaufen müssen, bevor sie den Hauptinhalt unter der Navigation erreichen.

Das ist das Problem. Die Navigation ist für den Benutzer möglicherweise irrelevant. Vielleicht wurde dem Benutzer ein direkter Link zu einem Artikel gegeben und er möchte einfach nur zum Inhalt gelangen.

Dies ist ein perfekter Anwendungsfall für einen Skip-Link.

Den Link erstellen

Es gibt verschiedene Ansätze, um einen Skip-to-Content-Link zu erstellen. Was ich gerne tue, ähnelt dem Sky News-Beispiel, nämlich das Verstecken des Links, bis er fokussiert ist. Das bedeutet, wir können den Link oben auf der Seite oder in der Nähe platzieren, zum Beispiel im <header>-Element.

<header>
  <a class="skip-link" href='#main'>Skip to content</a>
  <!-- Navigation-->
</header>

Dieser Link hat eine .skip-link-Klasse, damit wir ihn stylen können. Das href-Attribut verweist auf #main, was die ID ist, die wir dem <main>-Element hinzufügen, das weiter unten auf der Seite kommt. Darauf springt der Link beim Klicken.

<header>
  <a class="skip-link" href='#main'>Skip to content</a>
  <!-- Navigation-->
</header>


<!-- Maybe some other stuff... -->


<main id="main">
  <!-- Content -->
</main>

Hier ist, was wir haben, wenn wir den Link einfach ohne Styling in den Header einfügen.

Das sieht nicht gut aus, aber die Funktionalität ist vorhanden. Versuchen Sie, mit Ihrer Tastatur zum Link zu navigieren und Enter zu drücken, wenn er fokussiert ist.

Jetzt ist es an der Zeit, ihn hübsch zu machen. Wir müssen zuerst die Positionierung beheben und unseren Skip-Link nur anzeigen, wenn er fokussiert ist.

.skip-link {
  background: #319795;
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0%);
}

Die Magie liegt hier in der transform-Eigenschaft, die unseren Skip-Link je nachdem, ob er fokussiert ist oder nicht, versteckt und anzeigt. Machen wir ihn mit einem schnellen Übergang auf der transform-Eigenschaft etwas schöner.

.skip-link {
  /* Same as  before */
  transition: transform 0.3s;
}

Er wird nun schöner in Sicht übergehen.

Sie sollten jetzt (hoffentlich) haben, was ich unten habe

Wie Sie sehen können, umgeht der Skip-Link die Navigation und springt beim Klicken direkt zum <main>-Element.

Es ist OK, mehr als einen Link zu verwenden!

Derzeit erfüllt der Link nur einen Zweck, nämlich den Sprung zum Inhalt unserer Website. Aber wir müssen nicht dabei aufhören.

Wir können noch weiter gehen und einen Skip-Link mit mehr Optionen erstellen, z. B. eine Möglichkeit, zum Footer der Website zu springen. Wie Sie sich vorstellen können, ist dies dem, was wir bereits getan haben, recht ähnlich.

Machen wir die Blog-Seite der Beispiel-Website ein wenig benutzerfreundlicher, indem wir mehrere Skip-Links verwenden. Es ist üblich, dass Blogs AJAX verwenden, das mehr Beiträge lädt, wenn das Ende der Seite erreicht ist. Das kann es sehr schwierig machen, zum Footer der Website zu gelangen. Das ist das Problem, das wir in diesem Fall lösen wollen.

Fügen wir also einen zweiten Link hinzu, der all diese Auto-Loading-Geschichten umgeht und den Benutzer direkt zu einem #footer-Element auf der Seite springen lässt.

<div class="skip-link" >
  Skip to <a href='#main'>content</a> or <a href='#footer'>footer</a>
</div>

Wir müssen auch unser CSS ein wenig anpassen und den :focus-within-Pseudo-Selektor verwenden.

.skip-link {
  transform: translateY(-100%);
}

.skip-link:focus-within {
  transform: translateY(0%);
}

Dies besagt, dass, wenn *irgendetwas* innerhalb unseres .skip-link-Elements den Fokus hat, wir es anzeigen. Leider unterstützen weder Internet Explorer noch Opera Mini focus-within, aber die Abdeckung ist ziemlich gut und es gibt ein Polyfill.

Das Letzte, was wir tun müssen, ist sicherzustellen, dass unser Footer-Element eine ID hat, damit der Link etwas hat, zu dem er springen kann.

<footer id="footer">

Hier ist, was uns das gibt

Wenn wir noch einen Schritt weiter gehen wollten (und ich würde es ermutigen), könnten wir jeden Link ein wenig anders gestalten, damit die Benutzer die beiden unterscheiden können. Beide Links in diesem Beispiel sind schlicht weiß, was gut für einen einzelnen Button ist, der eine einzelne Sache tut, aber es wäre klarer, dass wir es mit zwei Links zu tun haben, wenn sie unterschiedlich dargestellt würden.

Zu Schlussfolgerungen springen

Verwenden Sie Skip-Links auf Ihrer Website? Oder, wenn nicht, überzeugt Sie das, einen zu verwenden? Ich hoffe, es ist klar, dass Skip-Links einen großen Mehrwert für die Barrierefreiheit einer Website darstellen. Obwohl es kein Allheilmittel ist, das alle Barrierefreiheitsbedürfnisse löst, löst es einige Anwendungsfälle, die zu einer viel ausgefeilteren Benutzererfahrung führen.

Hier sind einige prominente Websites, die diese oder eine ähnliche Technik verwenden

• Amazon
• Chase
• Google (kein Skip-Link, aber ein Link zum Hinterlassen von Feedback zur Barrierefreiheit)
• Target
• Die New York Times
• Zillow