BlogbeitragSkiplinks in Divi: Step-by-Step zum barrierefreien Webdesign

von | Juli 8, 2025

Warum barrierefreies Webdesign wichtig ist

In den letzten Wochen habe ich mich intensiv mit barrierefreiem Webdesign beschäftigt. Das stand tatsächlich schon ewig auf meiner Liste und dank einiger Kundenprojekte wurde ich sozusagen dazu gezwungen ganz tief in die Materie einzutauchen. Und da ich auch gerade Stück für Stück meine eigene Website dahingehend überarbeite, möchte ich euch nun ebenfalls Stück für Stück mitnehmen. Heutiges Thema: Skiplinks, “Skip to content” oder wie sie häufig im deutschen übersetzt werden “Zum Inhalt springen”.

Was sind Skiplinks?

Also, Skiplinks sind im Grunde kleine, aber mächtige Tools im Webdesign. Sie ermöglichen es Menschen, die Screenreader verwenden oder nur die Tastatur zur Navigation nutzen, schnell und einfach über Navigationselemente wie Menüs oder andere wiederholende Inhalte zu springen. Stell dir vor, du könntest beim Fernsehen direkt zu deinen Lieblingsszenen springen – genau das ermöglichen Skiplinks auf Webseiten!

Die Bedeutung von Skiplinks für barrierefreies Webdesign

Skiplinks sind nicht nur eine nette kleine Zusatzfunktion, sie sind ein echter Gamechanger für barrierefreies Webdesign. Sie schaffen eine Brücke, die es Menschen mit Beeinträchtigungen erlaubt, sich frei und selbstständig im Internet zu bewegen. Das klingt jetzt ehrlich gesagt ganz schön groß, aber irgendwie empfinde ich es inzwischen so. Ich bin der Meinung wir dürfen Stück für Stück etwas optimieren und müssen nicht gleich alles perfekt umsetzen, aber wenn wir einen kleinen Teil dazu beitragen, das Internet inklusiver zu gestalten, ist das doch super.

Skiplinks in Divi: Eine Anleitung

Vorbereitung: Was Du vor der Einrichtung wissen solltest

Bevor wir tief in die technischen Details eintauchen, lass uns über die Planung sprechen. Gute Vorbereitung ist alles! Denk daran, deine Website zunächst gründlich zu analysieren. Welche Bereiche profitieren am meisten von Skiplinks? Oft sind es wiederkehrende Elemente wie Menüs oder Seitenleisten, die Nutzer schnell überspringen möchten. Ich habe mir vorgenommen auf meiner Seite zunächst das Hauptmenü zu überspringen, also einen Skip-to-maincontent-link einzufügen. Tatsächlich finde ich es etwas tricky mit Divi einen Skiplink einzurichten, vor allem, da es je nach Art und Weise, wie du deine Website gebaut hast, ein bisschen unterschiedlich sein kann. Ich zeige dir hier meine Vorgehensweise und kann dir keine Garantie dafür geben, dass es bei dir genauso funktioniert. Aber kleiner Spoiler vorneweg: Falls du gar keine Lust hast, dich damit zu beschäftigen, kann ich das für dich übernehmen.

Schritt 1: Skiplinks in Divi einrichten

  1. Richte am besten eine Staging-Umgebung ein oder teste lokal oder mach zumindestens vorher ein Backup deiner Seite
  2. Code in der functions.php einfügen
  3. Code in den body einfügen in Divi
  4. ID für die ersten Elemente der Seiten vergeben

Erstens: Staging-Umgebung mit Plugin einrichten oder auf Local WP testen

Zweitens: Zunächst gehst du also in die functions.php deines Child Themes. In der functions.php deines Child Themes fügst du folgenden Code ein:

//Skiplink einfügen in header
function mein_skiplink() {
echo '<a href="#maincontent" class="skip-link">Zum Inhalt springen</a>';
}
add_action('wp_body_open', 'mein_skiplink');

Drittens: In Divi → Theme Optionen → Integration → Code dem body hinzufügen, fügst du folgenden Code ein:

<script>
document.querySelector('.skip-link').addEventListener('click', function(e){
e.preventDefault();
var target = document.getElementById('maincontent');
target.setAttribute('tabindex', '-1');
target.focus();
});
</script>

Viertens: Nun gehst du auf jede Seite und fügst im ersten Element eine ID “maincontent” (natürlich ohne “”) hinzu. Falls du Layouts im Theme Builder gebaut hast, füge es auch dort in die jeweils erste Sektion ein.

Schritt 2: Testen der Skiplinks

Füge im Costumizer unter CSS folgendes CSS zum Testen hinzu: 5. Im Costumizer unter CSS fügst du folgenden Code ein. Dieser ist zunächst erstmal zum testen, ob du den Link siehst.

/*zum testen*/
.skip-link {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  background: red !important;
  color: white !important;
  padding: 10px !important;
  z-index: 9999 !important;
}

Nun gehst du im Inkognitomodus auf deine Seite und drückst die Tab-Taste. Der Skiplink sollte zu sehen sein und mit #maincontent beschriftet sein. Bei Enter sollte er auf deine gewählte erste Sektion springen und bei nochmaligem Tabben sollte er die weiteren Links nach dem Menü durchgehen. Wenn alles funktioniert, kannst du den CSS Code ersetzen z. B. durch:

/*Skiplink Styling für Barrierefreiheit
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 16px;
}
.skip-link:focus,
.skip-link:active {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
}*/

    Best Practices und Tipps für effektive Skiplinks in Divi

    Hier sind ein paar Tipps: Halte deine Skiplinks einfach und intuitiv. Überlade sie nicht mit zu viel Text oder komplizierten Funktionen oder ausgefallenem Design. Und denk daran, sie an den Anfang deiner Seite zu setzen, damit sie sofort zugänglich sind.

    Hat dir diese Anleitung für Divi und Skiplinks geholfen?

    Ich hoffe, dieses kleine Tutorial macht es dir leicht, Skiplinks in Divi einzusetzen. Denk immer daran, es geht nicht nur um technische Standards, sondern vor allem darum, echten Menschen zu helfen, sich im digitalen Raum zu orientieren und teilzuhaben – und zwar auf ihre ganz eigene Weise.

    Falls du beim Einrichten der Skiplinks oder anderen Aspekten des barrierefreien Webdesigns Fragen hast oder etwas nicht klappt, zögere nicht, mich zu kontaktieren. Buche einfach ein kostenloses Erstgespräch und lass uns gemeinsam deine Website für alle zugänglich machen!

    Diskutiere mit!Kommentare

    0 Kommentare

    Einen Kommentar abschicken

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

    ähnliche BeiträgeVielleicht interessiert dich auch das?

    Dark Theme ist mehr ist als nur ein Trend

    Dark Theme ist mehr ist als nur ein Trend

    Warum ein Dark Theme mehr ist als nur ein Trend Dark Themes sind längst mehr als nur eine optische Spielerei. Sie stehen für modernes Design, das die Augen schont und ein hochwertiges Nutzererlebnis bietet. Außerdem sind sie spätestens mit der Diskussion um die...

    Projektvorstellung: Übungsprojekte HTML + CSS

    Projektvorstellung: Übungsprojekte HTML + CSS

    In diesem Blogartikel stelle ich euch selbst gecodete Übungsseiten mit HTML und CSS vor.  Das Projektziel bestand darin, verschiedene "statische" Seiten ausschließlich mit HTML und CSS zu erstellen. Der Fokus lag hier nicht auf einem super durchdachten Design oder...

    Wenn du ebenfalls Unterstützung benötigst, schreib mir gern. Gemeinsam können wir über dein Projekt sprechen.

    suche blog foto von josy schreier

    Suche

    Hier gibt es Beiträge zu Webdesign, Website Management und digitalen Services. Außerdem schreibe ich auch gern über die Selbstständigkeit als Freelancerin und Virtuelle Assistentin und nützliche Tools.

    Dein Thema nicht dabei? Schreib mir gern, ich verfasse sicher gern einen Artikel darüber.

    ueber-mich-blog-bottom foto von josy schreier

    Hi, ich bin Katja

    Schön, dass du da bist! Ich unterstütze Selbstständige und Unternehmer*innen bei allen Themen rund um Technik & Design. Ich liebe außerdem Fitness, Abenteuer, Vanlife, Reisen und Erdnussbutter.
    noch-fragen-blog-bottom foto von josy schreier

    Noch Fragen?

    WordPress Cookie Hinweis von Real Cookie Banner//Skiplink