Welche Themes haben einen Skip-to-Content-Link und was ist das überhaupt?

Simon hat den Themenmonat Barrierefreiheit ausgerufen und daher beschäftige ich mich heute mit einer ganz einfachen Möglichkeit die Zugänglichkeit einer Website zu verbessern. Dem „Skip to Content“-Link. Damit zum Beispiel blinde Besucher nicht jedes mal das gesamte Menü durchklicken müssen, sollte jede Website mit einem Link starten, der einem zum Inhalt der Seite via Sprunglink bringt.

Um sich das Problem mal selbst klar zu machen, empfehle ich jedem Nutzer, mal die eigene Website komplett per Tastatur zu steuern (Mehr Infos dazu im Artikel vom Theme-Review-Team zum Thema Tastatursteuerung optimieren). Alternativ kann unter macOS die Sprachausgabe via VoiceOver aktiviert werden. Schnell wird jetzt hoffentlich klar, warum so ein Link wichtig ist …

Wie einfach dieser „Skip to Content“-Link eingebaut werden kann, muss ich nicht nochmal schreiben, das haben Kirsten Schelper und Elisabeth Hölzl im Netzialisten-Blog schon hervorragend gemacht.

Noch etwas ausführlicher und mehr „edge cases“ berücksichtigend ist der Artikel vom Theme Review Team zum Thema Skip Links.

Und auf notwendige Browser-Einstellungen verweist Carrie Dils, die für Code-Laien noch einen weiteren Tipp hat: Wenn der Link fehlt, dann kann eventuell das Plugin WP Accessibility die Lücke schließen, ohne dass ein Child-Theme mit den Änderungen erstellt werden muss.

In meinen Augen scheint das Implementieren dieser Technik doch recht einfach zu sein, daher wollte ich mal schauen, wie weit verbreitet diese Technik ist und habe ein paar Themes getestet, mit etwas erschreckendem Ergebnis …

Bei den Elmastudio-Themes ist der „Skip to Content“-Link nur im aktuellsten Theme Pukeko vorhanden (wobei leider das CSS für den Focus fehlt). Das noch in der Entwicklung steckende Aino-Theme ist das einzige Theme mit „Skip to Content“-Link inkl. CSS für den Fall, dass der Link den Fokus hat.

Der neue Theme-Shop von Thomas Weichselbaumer, GermanThemes, enthält aktuell 6 Themes, die alle den „Skip to Content“-Link enthalten. Bei seinem älteren Shop ThemeZee ist der „Skip to Content“-Link ab dem Theme Merlin vorhanden. Alle früheren Themes scheinen den Link nicht zu haben.

Auch die Themes von Florian Brinkmann sind leider durchwachsen. Die frühen Werke Fanoe, Nordby und Bornholm haben den Link leider nicht. Hannover und Schlicht haben ihn, Rindby hat zwar den Link, aber die ID des Sprunglinks gibt es gar nicht im Theme, weshalb er nicht funktioniert und Photographus hat den Link wieder gar nicht.

Meine Stichproben bei den MH Themes haben kein einziges Theme offenbart, was den „Skip to Content“-Link hätte.

Okay, das ist ein sehr durchwachsenes Bild was die deutschen Theme-Anbieter hier zeigen. Wie sieht es bei den großen Anbietern aus? Bei den üblichen Verdächtigen?

Das Divi-Theme von Elegantthemes hat den Link nicht. Dankenswerterweise ist die Divi-Community sehr groß und es gibt ein Plugin, mit dem Accessibility für das Theme nachgerüstet werden kann.

Positiv überrascht hat mich Avada vom Theme Fusion, welches den Link enthält.

Bei Enfold hingegen fand ich nur Support-Threads zu dem Thema. Die Einschätzung inwieweit eine Injection des Markups via jQuery-Skript sinnvoll ist, überlasse ich den Accessibility-Experten.

Auch hier sehr durchwachsene Ergebnisse und Kenntnisstände bei den großen Theme-Anbietern und das für eine Technik, die wirklich sehr einfach zu implementieren ist, sehende Besucher nicht stört und wenig wartungsintensiv ist.

Bei den wirklich komplexen Regeln zu Barrierefreiheit sind wir ja noch gar nicht angekommen. Einen sehr guten Vortrag gab es dazu auf dem WordPress Meetup Nürnberg von Joschi Kuphal.

Hier findet ihr die Slides zum Vortrag: https://jkphl.is/slides/wpnbg/a11y/#0


Wer sich noch mehr mit der Materie beschäftigen möchte, dem empfehle ich dem Accessibility-Blog des WordPress-Projekts zu folgen.

Auch in den Foren gibt es ein expliziten Anlaufpunkt für Accessibility-Fragen.

Das Theme Review Team hat ebenfalls Infos dazu in seinem Handbuch.

Habt ihr mehr Beispiele für Theme Shops, deren Themes den „Skip to Content“-Link anbieten? Oder hat wer Lust die Anbieter auf den Missstand hinzuweisen und gegebenenfalls Pull Requests (sofern möglich) zu erstellen? Meldet euch in den Kommentaren!

14 Antworten auf Welche Themes haben einen Skip-to-Content-Link und was ist das überhaupt?

  1. Hi Torsten,

    (kurz auf Twitter zwar schon, aber es gibt da ja so ein gewisses Projekt für wieder mehr Inhalte auf Blogs, also noch mal an der richtigen Stelle 😇)

    Danke für den Artikel, und den Hinweis zu meinen Themes. Ich weiß nicht genau warum, aber irgendwie war ich davon ausgegangen, dass die Links überall drin sind 🙈 Werde das möglichst schnell nachrüsten und entsprechende Updates rauszubringen 🙂

    LG

  2. Da ich vor habe dieses Jahr das Theme bei mir mal zu wechseln, danke für den Hinweis und die Auswahl an möglichen Themes 😉

  3. Hallo Torsten, eine Ergänzung: In allen Child-Themes für das WP-Framework Genesis, die ich gekauft habe, sind Skip-Links enthalten, und zwar drei: Skip to primary navivation, to main content und to footer.
    Wer ein älteres Genesis-Theme ohne das Feature hat, kann die Funktion mit einem Snippet in der functions.php aktivieren.
    Ich habe die Skip-Links auf meinen Sites noch nicht alle ins Deutsche übersetzt. Eine Frage dazu: Gibt es allgemein anerkannte deutsche Entsprechungen für die englischen Ausdrücke? Es bringt ja nichts, wenn sich jeder Anwender eigene Begriffe einfallen lässt und dadurch womöglich wieder Barrieren aufbaut.

  4. > Damit zum Beispiel blinde Besucher nicht jedes mal das gesamte Menü durchklicken müssen

    Ich hatte mich beim Lesen gefragt, ob das im Zeitalter von semantischem HTML und ARIA Landmark Regions für blinde Besucher wirklich noch stimmt. Ein Screenreader-Nutzer kann doch einfach zur gewünschten ARIA Landmark Region springen, z. B. zu main. Sind Skiplinks dann immer noch so wichtig?

    Eine kurze Googelei ergab dann, dass das wohl stimmt, dass Skiplinks aber wie du oben auch schreibst für *Keyboard-User* sehr nützlich sind, jedenfalls solange die Browser keine Keyboard-Shortcuts zu den Landmarks anbieten. Eine Antwort auf Stack Overflow hat das sehr schön zusammengefasst :

    »That said, skip navigation links are still needed for other users, most notably people with eyesight who are navigating by keyboard (not the mouse). They are likely using the tab key to navigate through links on the page, and it’s incredibly tedious to tab through dozens of navigation menu links to get to a link in the main content. I wouldn’t overdo it – just a single link to bypass navigation and get to the main content should suffice. Also, since the beneficiaries are users with eyesight, the link should be visible, or at least it should become visible when it receives keyboard focus.«
    https://stackoverflow.com/questions/16969412/accessibility-skiplinks-stiil-needed

    Skiplinks also wohl nicht mehr so sehr für blinde Screenreader-Nutzer, sondern für sehende Keyboard-User, die mit der TAB-Taste navigieren.

    • Vielen Dank für diese Ergänzung! Sehend und blind sind ja auch nicht zwei Seiten einer Medaille. Es gibt viele Stufen dazwischen. Menschen mit schlechter Sicht, ältere Menschen, etc. – ich hatte mich bei der Einschätzung zu der Relevanz der Skip-Links auf das Theme Review Team beziehungsweise das Accessibility-Team verlassen. Die kennen sich aus und ihren Empfehlungen zu folgen, macht in den meisten Fällen Sinn.

  5. In dem verlinkten Artikel über die Erstellung von Skiplinks von Kirsten Schelper und Elisabeth Hölzl im Netzialisten-Blog wird das mit der Tastatur-Navigation übrigens auch sehr schön beschrieben. Note to myself: Ers lesen, dann googeln…

    Hintergrund meiner Recherche ist übrigens, dass ich gerade an einer neuen Auflage meiner Einführung in HTML + CSS und überlegt hatte, ob ich Skiplinks mit reinnehme oder nicht. Das ist jetzt ein definitives JA.

    Und für deine Theme-Sammlung: GeneratePress hat auch einen wunderbaren Skiplink mit :focus.

  6. Gerade mal geschaut das Basis Theme _s aka. underscores hat den Link auch eingebaut. Wenn man sein Theme darauf aufbau kann der Link nicht vergeessen werden.

  7. Hallo Torsten,

    Vielen Dank für den Hinweis, dass der Skip-to-Content Link in meinen älteren Themes von 2015 fehlt. Werde ich mit den nächsten Updates hinzufügen. Bei neuen Themes achte ich zunehmend auf Barrierefreiheit, damals hat mir dafür ehrlich gesagt noch das Bewusstsein gefehlt.

    Und mir war wie Florian auch gar nicht wirklich klar, dass der Link bei manchen Themes fehlt.

    Viele Grüße,
    Thomas

    • Cool, dass du es auch für die älteren Themes noch einbauen möchtest! In diesem Kontext könntet ihr euch auch das neue wp_body_open anschauen und einbauen. Und nicht den Shim für ältere Versionen vergessen 😉

  8. Hallo Torsten,

    inzwischen habe ich mehrere Projekte mit dem Theme „Astra“ gebaut. Dort gibt es ebenfalls den Skip-Link. Beim testen fiel mir aber auf, dass der bei Navigation per Tastatur nicht sichtbar ist. Da schlägt das CSS leider mit einer Angabe zu, die den Button aus dem Viewport schiebt: „clip-path: inset(50%)“. Mit „inset(100%)“ klappt auch der Skip-Link.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.