Ein tiefer Einblick in das Überspringen von Inhalten

Während die meisten Leute, die im Internet auf einem Computer surfen, eine Maus benutzen, sind viele stattdessen auf ihre Tastatur angewiesen. Theoretisch sollte die Nutzung einer Webseite mit der Tastatur kein Problem darstellen — drücken Sie die Taste TAB, um den Tastaturfokus von einem fokussierbaren Element zum nächsten zu bewegen, und drücken Sie dann ENTER, um es zu aktivieren, einfach! Viele (wenn nicht die meisten) Websites haben jedoch oben auf der Seite ein Menü mit Links, und es kann manchmal viele Tastendrücke dauern, um zu den gewünschten Inhalten zu gelangen. Nehmen Sie zum Beispiel die Homepage von 20min, eine der größten Nachrichtenseiten hier in der Schweiz. Möchten Sie die Top-Story lesen? Das sind dann schon fast 40 Tastendrücke — keine gute Zeitverwendung für niemanden.

Wenn Sie also möchten, dass Tastaturnutzer Ihre Website tatsächlich nutzen, anstatt gelangweilt wegzuklicken und woanders hinzugehen, müssen Sie im Hintergrund etwas Arbeit leisten, um das Überspringen direkt zu Ihren Hauptinhalten schneller und einfacher zu gestalten. Sie finden allerlei Techniken dafür im Web verstreut (einschließlich hier auf CSS-Tricks), aber die meisten verpassen ein oder zwei Tricks, und viele empfehlen die Verwendung veralteten oder eingestellten Codes. In diesem Artikel werde ich also einen tiefen Einblick in das Überspringen von Inhalten geben und alles im Stil von 2021 behandeln.

Zwei Arten von Tastaturnutzern

Obwohl es zahlreiche Unterschiede in der genauen Art von Tastatur oder gleichwertigem Schaltergerät gibt, das Menschen zur Navigation verwenden, müssen wir aus Programmierersicht nur zwei Gruppen berücksichtigen

• Personen, die die Tastatur in Verbindung mit einem Screenreader verwenden — wie NVDA oder JAWS auf einem PC, oder VoiceOver auf einem Mac — der den Bildschirminhalt laut vorliest. Diese Geräte werden oft von Menschen mit schwereren Sehbehinderungen verwendet.
• Alle anderen Tastaturnutzer.

Unsere Techniken zum Überspringen von Inhalten müssen beiden Gruppen gerecht werden, ohne Mausnutzer zu behindern. Wir verwenden zwei komplementäre Techniken, um das beste Ergebnis zu erzielen: Landmarken und Sprunglinks.

Ein grundlegendes Beispiel betrachten

Ich habe eine Beispielwebsite namens Style Magic erstellt, um die von uns behandelten Techniken zu veranschaulichen. Wir beginnen mit einem Zustand, der für einen Maussnutzer gut funktioniert, aber für Tastaturnutzer etwas umständlich ist. Die Basis-Website und die Versionen für jede der Techniken finden Sie in dieser Sammlung auf CodePen, und da das Testen der Tastaturnavigation auf CodePen etwas knifflig ist, finden Sie auch eigenständige Versionen hier.

Versuchen Sie, die TAB-Taste zu verwenden, um durch dieses Beispiel zu navigieren. (Es ist einfacher auf der eigenständigen Seite; TAB, um von einem Link zum nächsten zu springen, und SHIFT+TAB, um rückwärts zu gehen.) Sie werden feststellen, dass es nicht zu schlimm ist, aber nur, weil es nicht viele Menüpunkte gibt.

Wenn Sie Zeit haben und unter Windows sind, ermutige ich Sie auch, eine kostenlose Kopie des NVDA Screenreaders herunterzuladen und alle Beispiele damit auszuprobieren, wobei Sie auf die Übersicht von WebAIM zur Verwendung zurückgreifen. Die meisten von Ihnen auf einem Mac haben bereits den VoiceOver Screenreader zur Verfügung und WebAIM hat eine großartige Einführung zur Verwendung.

Landmarken hinzufügen

Eine der Dinge, die Screenreading-Software tun kann, ist die Anzeige einer Liste von Landmarken, die sie auf einer Webseite findet. Landmarken stellen wichtige Bereiche einer Seite dar, und der Benutzer kann diese Liste aufrufen und dann direkt zu einer dieser Landmarken springen.

Wenn Sie NVDA mit einer vollständigen Tastatur verwenden, drücken Sie INS+F7, um die „Elementliste“ aufzurufen, und dann ALT+d, um die Landmarken anzuzeigen. (Auf VoiceOver finden Sie eine ähnliche Liste über das Web Item Rotor.) Wenn Sie das auf der Beispielseite tun, werden Sie jedoch nur mit einer nicht hilfreichen leeren Liste konfrontiert.

Lassen Sie uns das zuerst beheben.

Das Hinzufügen von Landmarken ist unglaublich einfach und, wenn Sie HTML5 verwenden, haben Sie diese möglicherweise bereits auf Ihrer Website, ohne es zu merken, da sie direkt mit den semantischen HTML5-Elementen (<header>, <main>, <footer> und so weiter) verbunden sind.

Hier ein Vorher-Nachher-Vergleich des HTML, das zur Erzeugung des Kopfbereichs der Seite verwendet wird

<div class="bg-dark">
  <div class="content-width flex-container">
    <div class="branding"><a href="#">Style Magic</a></div>
    <div class="menu-right with-branding">
      <a href="#">Home</a>
      <!-- etc. -->
      </div>
  </div>
</div>

Wird zu

<div class="bg-dark">
 <header class="content-width flex-container">    
    <section class="branding"><a href="#">Style Magic</a></section>
    <nav aria-label="Main menu" class="menu-right with-branding">
      <a href="#">Home</a>
      <!-- etc. -->
    </nav>
  </header>
</div>

Die verwendeten Klassen bleiben gleich, sodass wir keinerlei Änderungen am CSS vornehmen müssen.

Hier ist eine vollständige Liste der Änderungen, die wir in unserer Beispielseite vornehmen müssen

• Das <div>, das den Kopfbereich oben auf der Seite kennzeichnet, ist jetzt ein <header>-Element.
• Das <div>, das das Branding enthält, ist jetzt ein <section>-Element.
• Die beiden <div>s, die Menüs enthalten, wurden durch <nav>-Elemente ersetzt.
• Den beiden neuen <nav>-Elementen wurde ein aria-label-Attribut zugewiesen, das sie beschreibt: „Hauptmenü“ für das Menü oben auf der Seite und „Dienstmenü“ für das Menü unten auf der Seite.
• Das <div>, das den Hauptinhalt der Seite enthält, ist jetzt ein <main>-Element.
• Das <div>, das die Fußzeile unten auf der Seite kennzeichnet, ist jetzt ein <footer>-Element.

Sie können das vollständige aktualisierte HTML auf CodePen sehen.

Versuchen wir den Landmarken-Listen-Trick in NVDA erneut (INS+F7, dann ALT+d — hier ist der Link zur eigenständigen Seite, damit Sie es selbst testen können)

Großartig! Wir haben jetzt die banner Landmarke (zugeordnet dem <header>-Element), Hauptmenü; Navigation (zugeordnet dem oberen <nav>-Element und Anzeige unseres aria-label), main (zugeordnet <main>) und content info (zugeordnet footer). Von diesem Dialog aus kann ich mit TAB und den Pfeiltasten die main Landmarke auswählen und direkt zum Inhalt der Seite springen, oder noch besser, ich kann einfach die Taste D drücken, während ich die Seite durchsuche, um von einer Landmarkenrolle direkt zur nächsten zu springen. Nutzer des JAWS Screenreaders haben es noch einfacher — sie können einfach Q drücken, während sie surfen, um direkt zur main Landmarke zu springen.

Als zusätzlicher Bonus helfen semantische Elemente auch Suchmaschinen dabei, Ihre Inhalte besser zu verstehen und zu indexieren. Das ist ein schöner kleiner Nebeneffekt davon, eine Website viel zugänglicher zu machen.

Einen Sprunglink hinzufügen

Ich erwarte, dass Sie sich an diesem Punkt denken: „Aufgabe erledigt“. Nun, ich fürchte, es gibt immer ein „Aber“, das man bedenken muss. Google hat bereits 2011 einige Forschungen zur Nutzung von CTRL+f zur Suche innerhalb einer Webseite durchgeführt und festgestellt, dass erschreckende 90 % der Leute entweder nicht wussten, dass es existiert, oder es noch nie benutzt haben. Nutzer mit einem Screenreader verhalten sich bei Landmarken sehr ähnlich – ein großer Teil von ihnen nutzt diese Funktion einfach nicht, obwohl sie sehr nützlich ist. Daher werden wir unserer Website einen Sprunglink hinzufügen, um beiden Gruppen sowie all jenen Tastaturnutzern zu helfen, die keinen Screenreader verwenden.

Die grundlegenden Anforderungen für einen guten Sprunglink sind

• Er sollte für alle Tastaturnutzer (einschließlich Screenreader-Nutzer) wahrnehmbar sein, wenn er benötigt wird.
• Er sollte dem Tastaturnutzer genügend Informationen liefern, um zu erklären, was er tut.
• Er sollte auf einer möglichst breiten Palette aktueller Browser funktionieren.
• Er sollte die Navigation eines Maussnutzers nicht beeinträchtigen.

Schritt 1: Verbesserung der Tastaturfokus-Darstellung

Zuerst verbessern wir die Sichtbarkeit des Tastaturfokus auf der gesamten Website. Sie können sich den Tastaturfokus als Äquivalent zur Cursorposition vorstellen, wenn Sie Text in einem Textverarbeitungsprogramm bearbeiten. Wenn Sie die TAB-Taste verwenden, um zu navigieren, bewegt sich der Tastaturfokus von Link zu Link (oder Formularsteuerelement).

Die neuesten Webbrowser leisten vernünftige Arbeit bei der Anzeige der Position des Tastaturfokus, können aber immer noch von etwas Hilfe profitieren. Es gibt viele kreative Möglichkeiten, den Fokusring zu gestalten, obwohl unser Ziel darin besteht, ihn vor allem hervorzuheben.

Wir können die :focus Pseudo-Klasse für unsere Gestaltung verwenden (und es ist eine gute Idee, die gleichen Stile auch auf :hover anzuwenden, was wir auf der Beispielseite bereits getan haben — CodePen, Live-Seite). Das ist das Mindeste, was wir tun können, obwohl es üblich ist, weiter zu gehen und die Linkfarben bei :focus auf der gesamten Seite umzukehren.

Hier ist etwas CSS für unseren :focus-Zustand (eine Kopie dessen, was wir bereits für :hover haben)

a:focus { /* generic rule for entire page */
  border-bottom-color: #1295e6;
}
.menu-right a:focus,
.branding a:focus {
  /* inverted colors for links in the header and footer */
  background-color: white;
  color: #1295e6;
}

Schritt 2: Hinzufügen von HTML und CSS

Die letzte Änderung besteht darin, den Sprunglink selbst zu HTML und CSS hinzuzufügen. Er besteht aus zwei Teilen: dem Auslöser (dem Link) und dem Ziel (der Landmarke). Hier ist das von mir empfohlene HTML für den Auslöser, platziert ganz am Anfang der Seite, direkt im <header>-Element

<header class="content-width flex-container">
  <a href="#skip-link-target" class="text-assistive display-at-top-on-focus">Skip to main content.</a>
  <!-- etc. -->
</header>

Und hier ist das HTML für das Ziel, platziert direkt vor dem Hauptinhalt der <main>

<a href="#skip-link-target" class="text-assistive display-at-top-on-focus" id="skip-link-target">Start of main content.</a>

<main class="content-width">
  <!-- etc. -->
</main>

So funktioniert der Sprunglink

• Der Sprunglink-Auslöser verknüpft sich mit dem Sprunglink-Ziel über ein Standard-Seitenfragment (href="#skip-link-target"), das sich auf das id-Attribut des Ziels bezieht (id="skip-link-target"). Wenn Sie dem Link folgen, wird der Tastaturfokus vom Auslöser zum Ziel verschoben.
• Wir verknüpfen uns mit einem Anker (<a>) Element, anstatt das id-Attribut direkt zum <main>-Element hinzuzufügen, aus zwei Gründen. Erstens vermeidet es Probleme, bei denen der Tastaturfokus nicht korrekt verschoben wird (was in einigen Browsern ein Problem sein kann); zweitens können wir dem Benutzer klares Feedback geben, um zu zeigen, dass der Sprunglink funktioniert hat.
• Der Text der beiden Links ist beschreibend, um dem Benutzer klar zu erklären, was passiert.

Wir haben jetzt einen funktionierenden Sprunglink, aber es gibt ein Problem: Er ist für alle sichtbar. Wir werden CSS verwenden, um ihn standardmäßig auszublenden, damit er für Maussnutzer nicht im Weg ist, und ihn dann nur erscheinen zu lassen, wenn er den Tastaturfokus erhält. Es gibt viele Möglichkeiten, dies zu tun, und die meisten davon sind in Ordnung, aber es gibt ein paar falsche Wege, die Sie vermeiden sollten

• Tun Sie: verwenden Sie clip-path, um den Link unsichtbar zu machen, oder verwenden Sie transform: translate oder position: absolute, um ihn aus dem Bildschirm zu positionieren.
• Tun Sie nicht: verwenden Sie display: none, visibility: hidden, das hidden-Attribut, oder setzen Sie die width oder height des Sprunglinks auf Null. All dies macht Ihren Sprunglink für eine oder beide Klassen von Tastaturnutzern unbrauchbar.
• Tun Sie nicht: verwenden Sie clip, da es veraltet ist.

Hier ist der Code, den ich empfehle, um beide Links auszublenden. Die Verwendung von clip-path zusammen mit seiner Präfix-Version -webkit- trifft zum Zeitpunkt des Schreibens 96,84 % der Nutzer, was (meiner Meinung nach) für die meisten Websites und Anwendungsfälle in Ordnung ist. Sollte Ihr Anwendungsfall es erfordern, gibt es eine Reihe anderer Techniken, die auf WebAIM detailliert beschrieben sind.

.text-assistive {
  -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  box-sizing: border-box;
  position: absolute;
  margin: 0;
  padding: 0;
}

Und um die Links anzuzeigen, wenn sie Fokus haben, empfehle ich eine Version dieses CSS mit Farben und Größen, die zu Ihrem Branding passen

.text-assistive.display-at-top-on-focus {
  top: 0;
  left: 0;
  width: 100%;  
}
.text-assistive.display-at-top-on-focus:focus {
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 999;
  height: 80px;
  line-height: 80px;
  background: white;
  font-size: 1.2rem;
  text-decoration: none;
  color: #1295e6;
  text-align: center;
}
#skip-link-target:focus {
  background: #084367;
  color: white;
}

Dies sorgt für eine sehr sichtbare Anzeige des Auslösers und des Ziels ganz oben auf der Seite, wo ein Nutzer den Tastaturfokus direkt nach dem Laden der Seite erwarten würde. Es gibt auch eine Farbänderung, wenn Sie dem Link folgen, um klares Feedback zu geben, dass etwas passiert ist. Sie können selbst mit dem Code auf CodePen experimentieren (siehe unten) und ihn mit NVDA auf der eigenständigen Seite testen.

Darüber hinausgehend

Sprunglinks sind nicht nur für Weihnachten Ihr Hauptmenü da, sie sind nützlich, wann immer Ihre Webseite eine lange Liste von Links hat. Tatsächlich demonstriert dieser CodePen einen guten Ansatz für Sprunglinks innerhalb des Seiteninhalts (eigenständige Seite hier) mit transform: translateY() in CSS, um die Auslöser und Ziele auszublenden und anzuzeigen. Und wenn Sie sich in der „glücklichen“ Position befinden, ältere Browser unterstützen zu müssen, dann hier eine Technik dafür auf diesem CodePen (eigenständige Seite hier).

Schauen wir es uns an!

Zum Abschluss hier ein paar kurze Videos, die zeigen, wie die Sprunglinks für unsere beiden Klassen von Tastaturnutzern funktionieren.

So funktioniert der fertige Sprunglink bei Verwendung des NVDA Screenreaders

Hier ist er noch einmal, beim Surfen mit der Tastatur ohne Screenreader

---

Wir haben uns gerade angesehen, was ich als modernen Ansatz für zugängliche Sprunglinks im Jahr 2021 betrachte. Wir haben einige Ideen aus früheren Beispielen übernommen und sie aktualisiert, um bessere CSS-Praktiken, eine verbesserte Benutzeroberfläche für Tastaturnutzer und eine verbesserte Erfahrung für Screenreader-Nutzer zu berücksichtigen, dank eines aktualisierten Ansatzes für das HTML.