Technische Einstellung für barrierefreie Webseiten
Drei wichtige technische Einstellungen für Webseitenbesucher mit körperlichen Einschränkungen oder anderen Beeinträchtigungen sind von entscheidender Bedeutung, um eine umfassende Barrierefreiheit zu gewährleisten.
Um diese Funktion zu aktivieren, gehen Sie in Ihren Webseiten-Editor:
Klicken Sie oben links auf das Zahnrad-Symbol*.
Klappen Sie die weiteren Optionen unter "Webseite-Einstellungen*" auf.
Wählen Sie den letzten Tab "Eingabehilfen*" aus.
Aktivieren Sie dort alle drei Optionen: "Aria aktivieren*", "*Zum Inhalt springen aktivieren*" und "*Fokusanzeige aktivieren*"
Speicher Sie auf dem grünen Button und Veröffentlichen Sie die Webseite neu auf dem blauen Button
Die Aktivierung von ARIA-Beschriftungen (Accessible Rich Internet Applications) im Website-Code hilft zum Beispiel seh-eingeschränkten Nutzern, Elemente ohne Textbeschriftung zu verstehen.
Webseitbesucher, die nur mit der Tastatur navigieren (z.B. bei eingeschränkter Handfunktion), verwenden die Tabulatortaste, um von Element zu Element zu springen. Das bedeutet auch, dass sie jedes Mal, wenn sie eine neue Seite auf Ihrer Website öffnen, mit der Tabulatortaste durch alle Links in der Hauptnavigation (Kopfzeile) gehen müssen, um zum Hauptinhalt der Seite zu gelangen. Mit der Einstellung "Zum Inhalt springen" wird ihnen eine Option gegeben, das Durchgehen durch die Navigation zu überspringen.
Die Fokusanzeige ist eine farbige Umrandung, die anzeigt, welches Element (Button, Link, ...) auf der Website gerade im Fokus ist, so dass es durch Enter-Taste oder der Leertaste "angeklickt" werden kann. Diese wird für alle Besucher sichtbar angezeigt und sollte daher farbig zum Design Ihrer Seite passen.
Um ein Dropdown-Menü mit der Tastatur zu bedienen, können Nutzer ihrer Webseite mit der Tab-Taste durch die Menüpunkte und die Seite navigieren. Wenn der gewünschte Punkt erreicht ist, kann das Menü mit der Enter-Taste oder der Leertaste geöffnet und mit den Pfeiltasten durch die Optionen navigiert werden. So lässt sich das Menü ganz ohne Maus steuern.
Die Fokusanzeige ist standardmäßig transparent.
Sie können sie unter Globales Design > Design für Barrierefreiheit > Fokusanzeige gestalten.
Dort lassen sich die Farbe und Dicke (Fokusgröße) des Umrisses sowie der Rahmenstil (Fokustyp) anpassen.
Technischer Hintergrund der "Zum Inhalt springen"-Funktion
Die "Zum Inhalt springen"-Option wird technisch durch eine `tabindex="-1"`-Eigenschaft im Navigationscode der Website ermöglicht. Dies weist assistierende Technologien an, dieses spezifische Element zu ignorieren. Die visuelle Darstellung der Website für andere Besucher wird dadurch nicht beeinflusst.
Benutzererfahrung
Wenn ein Bildschirmleser-Nutzer eine neue Seite auf der Website öffnet, erscheint automatisch ein "Zum Inhalt springen"-Element in der oberen linken Ecke des Browserfensters. Dies ist das erste interaktive Element, das der Bildschirmleser vorliest. Betätigt der Nutzer die Leertaste, während der Fokus auf diesem Element liegt, wird die Navigation übersprungen und das nächste fokussierbare Element ist der Beginn des Hauptinhalts der Website.
Gestaltung des "Zum Inhalt springen"-Elements
Standardmäßig erbt das "Zum Inhalt springen"-Element die Farbeinstellung von Globales Design > Globale Farben > Akzentfarben > Primäre Akzentfarbe 3.
Sie können das "Zum Inhalt springen"-Element über Globales Design > Barrierefreiheit > Zum Inhalt springen gestalten.
Dort können Sie den Text, den Hintergrund und den Rahmen des Elements anpassen.
Wie Sie Ihre Website barrierefrei gestalten
Globale Farben - Wie man die Farben einer Website ändert
Alt-Texte für Bilder einfügen
Erstellen und veröffentlichen der Barrierefreiheitserklärung für die Website
Wie füge ich einen Link in die Fußzeile meiner Webseite ein? (z.B. für die Erklärung zur Barrierefreiheit)
Um diese Funktion zu aktivieren, gehen Sie in Ihren Webseiten-Editor:
Klicken Sie oben links auf das Zahnrad-Symbol*.
Klappen Sie die weiteren Optionen unter "Webseite-Einstellungen*" auf.
Wählen Sie den letzten Tab "Eingabehilfen*" aus.
Aktivieren Sie dort alle drei Optionen: "Aria aktivieren*", "*Zum Inhalt springen aktivieren*" und "*Fokusanzeige aktivieren*"
Speicher Sie auf dem grünen Button und Veröffentlichen Sie die Webseite neu auf dem blauen Button
"Aria aktivieren" einschalten
Die Aktivierung von ARIA-Beschriftungen (Accessible Rich Internet Applications) im Website-Code hilft zum Beispiel seh-eingeschränkten Nutzern, Elemente ohne Textbeschriftung zu verstehen.
"Zum Inhalt springen" einschalten
Webseitbesucher, die nur mit der Tastatur navigieren (z.B. bei eingeschränkter Handfunktion), verwenden die Tabulatortaste, um von Element zu Element zu springen. Das bedeutet auch, dass sie jedes Mal, wenn sie eine neue Seite auf Ihrer Website öffnen, mit der Tabulatortaste durch alle Links in der Hauptnavigation (Kopfzeile) gehen müssen, um zum Hauptinhalt der Seite zu gelangen. Mit der Einstellung "Zum Inhalt springen" wird ihnen eine Option gegeben, das Durchgehen durch die Navigation zu überspringen.
"Fokusanzeige" einschalten
Die Fokusanzeige ist eine farbige Umrandung, die anzeigt, welches Element (Button, Link, ...) auf der Website gerade im Fokus ist, so dass es durch Enter-Taste oder der Leertaste "angeklickt" werden kann. Diese wird für alle Besucher sichtbar angezeigt und sollte daher farbig zum Design Ihrer Seite passen.
FAQ - Häufige Fragen
Wie bedient man eine Webseite nur mit der Tastertur?
Um ein Dropdown-Menü mit der Tastatur zu bedienen, können Nutzer ihrer Webseite mit der Tab-Taste durch die Menüpunkte und die Seite navigieren. Wenn der gewünschte Punkt erreicht ist, kann das Menü mit der Enter-Taste oder der Leertaste geöffnet und mit den Pfeiltasten durch die Optionen navigiert werden. So lässt sich das Menü ganz ohne Maus steuern.
Wie gestaltet man die Fokusanzeige?
Die Fokusanzeige ist standardmäßig transparent.
Sie können sie unter Globales Design > Design für Barrierefreiheit > Fokusanzeige gestalten.
Dort lassen sich die Farbe und Dicke (Fokusgröße) des Umrisses sowie der Rahmenstil (Fokustyp) anpassen.
Wie gestaltet man den "Zum Inhalt springen" Button?
Technischer Hintergrund der "Zum Inhalt springen"-Funktion
Die "Zum Inhalt springen"-Option wird technisch durch eine `tabindex="-1"`-Eigenschaft im Navigationscode der Website ermöglicht. Dies weist assistierende Technologien an, dieses spezifische Element zu ignorieren. Die visuelle Darstellung der Website für andere Besucher wird dadurch nicht beeinflusst.
Benutzererfahrung
Wenn ein Bildschirmleser-Nutzer eine neue Seite auf der Website öffnet, erscheint automatisch ein "Zum Inhalt springen"-Element in der oberen linken Ecke des Browserfensters. Dies ist das erste interaktive Element, das der Bildschirmleser vorliest. Betätigt der Nutzer die Leertaste, während der Fokus auf diesem Element liegt, wird die Navigation übersprungen und das nächste fokussierbare Element ist der Beginn des Hauptinhalts der Website.
Gestaltung des "Zum Inhalt springen"-Elements
Standardmäßig erbt das "Zum Inhalt springen"-Element die Farbeinstellung von Globales Design > Globale Farben > Akzentfarben > Primäre Akzentfarbe 3.
Sie können das "Zum Inhalt springen"-Element über Globales Design > Barrierefreiheit > Zum Inhalt springen gestalten.
Dort können Sie den Text, den Hintergrund und den Rahmen des Elements anpassen.
Hier finden Sie weitere Artikel für praktische Schritte zur Barrierefreiheit:
Wie Sie Ihre Website barrierefrei gestalten
Globale Farben - Wie man die Farben einer Website ändert
Alt-Texte für Bilder einfügen
Erstellen und veröffentlichen der Barrierefreiheitserklärung für die Website
Wie füge ich einen Link in die Fußzeile meiner Webseite ein? (z.B. für die Erklärung zur Barrierefreiheit)
Aktualisiert am: 26/06/2025
Danke!