Zeig jederzeit, wo der Fokus ist

Du drückst die Tab-Taste – und weißt nicht mehr, wo du bist. So geht es Menschen, die eine Website mit der Tastatur bedienen. Hier, auf Seeblick: Navigation, Button, Footer, Formular. Und nirgends ist zu sehen, wo der Fokus steht. Das Theme blendet ihn aus, oder jedes Element zeigt etwas anderes. Dabei verlangt das WCAG-Kriterium 2.4.7 einen sichtbaren Tastaturfokus. Mit Focus Outlines in EZZE WCAG Pro machst du ihn einheitlich. In Minuten.

Du findest die Funktion im WordPress-Menü unter EZZE WCAG Pro, in der Gruppe Website-Optimierung, im Tab Focus Outlines. Oben sitzt der Hauptschalter: Focus Outlines aktivieren. Ist er an, gelten deine Fokusstile auf der öffentlichen Website.

Darunter wählst du eines von drei Profilen. Der Standard-Fokus ist immer aktiv und gilt für alle fokussierbaren Elemente: Links, Buttons und alles, was man mit der Tastatur erreicht. Der Alternative Fokus setzt einen Kontrast zum Standardstil, für Bereiche, die optisch abweichen, etwa einen dunklen Footer auf heller Seite oder umgekehrt. Und die Formularfelder bekommen auf Wunsch ihren eigenen Stil. Die beiden letzten schaltest du mit „Profil verwenden“ dazu. Und jede dieser drei Focus Outlines gestaltest du vollständig individuell: Methode, Linie, Stärke, Farbe, Radius, Abstand, getrennt pro Profil.

Beginnen wir mit dem Standard-Fokus. Bei der CSS-Methode wählst du am besten Outline: Sie ist in der Regel am zuverlässigsten und verändert die Größe des Elements nicht. Dann stellst du Linienstil, Stärke und Farbe ein. Für Seeblick nehmen wir ein kräftiges Blau, drei Pixel, durchgezogen. Eckenradius und Abstand runden den Ring ab. Jede Änderung siehst du sofort rechts in der Live-Vorschau.

Der Footer von Seeblick weicht optisch ab: Er ist dunkel. Ein blauer Ring ist dort kaum zu erkennen. Dafür gibt es den Alternativen Fokus. Aktiviere das Profil, wähle einen hellen Ring und klappe die CSS-Selektoren auf. Im Feld „Selektoren für den alternativen Stil“ stehen beispielhaft schon Footer-Links und -Buttons, die typischen Kandidaten. Du kannst beliebig weitere Selektoren ergänzen: eintippen, Komma oder Enter drücken, fertig. Diese Elemente nimmt die Standard-Outline automatisch aus. Du pflegst nichts doppelt.

Manchmal soll ein Element gar keinen Ring bekommen, etwa ein dekoratives Slider-Element oder der Logo-Link. Dafür gibt es das Feld „Ausgeschlossene Selektoren“. Aber wie findest du den Selektor? Mit dem Browser. Klicke zum Beispiel im Chrome-Browser mit der rechten Maustaste auf das Element und wähle „Untersuchen“. Im Panel „Elements“ ist die passende Zeile markiert. Hier ein A-Element, also ein Link, mit der Klasse site-logo. Die Klasse schreibst du mit Punkt davor: .site-logo. Bei einer ID setzt du eine Raute davor: #header-logo. Diesen Selektor trägst du ins Feld ein. Mehrere trennst du mit Komma. Kommt die Klasse auch an anderer Stelle vor, grenze sie mit einer Bereichs-ID ein: #footer .btn.

Auch Eingabefelder bekommen einen eigenen Stil. Aktiviere nun das dritte Profil, die Formularfelder. Es gilt für Eingabefelder, Auswahlfelder und Textbereiche, also input, select und textarea. Der Absenden-Button ist bewusst ausgenommen.

Jetzt klickst du auf „Einstellungen speichern“. Es erscheint: Einstellungen erfolgreich gespeichert. Zurück auf Seeblick wandert der Fokusring Tab für Tab durch Navigation, „Zimmer ansehen“, Footer und Kontaktformular. Überall sichtbar. Überall einheitlich.

Damit ist der Tastaturfokus auf deiner Website sichtbar, einheitlich und genau da, wo du ihn haben willst. Prüfe das Ergebnis am besten einmal selbst: Tab-Taste drücken und durch die Seite wandern. Wer mit der Tastatur unterwegs ist, wird es dir danken. Focus Outlines in EZZE WCAG Pro: Fokus sichtbar. Für alle.