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
- Richte am besten eine Staging-Umgebung ein oder teste lokal oder mach zumindestens vorher ein Backup deiner Seite
- Code in der functions.php einfügen
- Code in den body einfügen in Divi
- 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!
0 Kommentare