• Zur Hauptnavigation springen
  • Skip to main content
Zurück zur Startseite

Netz-Rebellen

Für ein barrierefreies Internet

  • Home
  • Über mich
  • Blog

Der sichtbare Tastatur-Fokus

5. Dezember 2022

Ein Button auf weiss mit einem Schlagschatten. auf dem Button steht „Focus me" Links oben ist das Logo der netz-rebellen zu sehen: eine Faust, die aus einem Bildschirm herausragt.

Was du als UX-UI-Designer wissen solltest

Die meisten kennen ihn noch nicht einmal. Und vor nicht allzu langer Zeit haben viele Web-Designer (mich eingeschlossen) laut aufgeheult, wenn sie entdeckten, dass auf ihrer Seite plötzlich so ein „hässlicher“ blauer Rand oder eine gestrichelte Linie um Schaltflächen und Links herum erschien. Warum? Wieso? Weg damit! – war oft die erste Reaktion; Also gleich mal den Entwickler anrufen und seinem Ärger Luft machen …

Aber soooo einfach ist es nicht. Es gibt diesen Zustand aus einem guten Grund.

Was ist der sichtbare Fokus-Zustand?

Der sichtbare Fokus zeigt nämlich an, wo du dich auf der Webseite, die du gerade besuchst, befindest. „Ja da, wo der Mauszeiger ist natürlich“ wirst du jetzt denken. Stimmt, aber es gibt viele Fälle, in denen die Maus und ihr Zeiger gar keine Rolle spielen. Einer dieser Fälle ist die Tastaturbedienung. Was manche nicht wissen: Mit den Tasten der Tastatur können alle interaktiven Elemente einer Website erreicht werden. Du kannst also quasi damit von Link zu Link „hüpfen“. Probier es mal aus: Du musst dafür die Tab-Taste nutzen. Rückwärts gehst du mit der Kombination aus Shift- und Tab-Taste.

Wie kann ich den Fokus-Zustand meiner Website sehen?

Wenn du eine gute Seite vor dir hast, siehst du jedesmal, wenn du die Tab-Taste bedienst, wie das Element, das du gerade angesteuert hast, optisch hervorgehoben wird. Ähnlich wie beim Maus-Over-Effekt, wenn du den Mauszeiger über einen Link oder einen Button platzierst.

Du siehst keine Hervorhebung bei Buttons und Links, wenn du über eine Seite „tabst“? Dann hast du gerade eine richtige Barriere entdeckt. Sie hindert viele Menschen daran, Websites zu bedienen.

Warum ist ein visueller Fokus wichtig?

Viele Menschen navigieren eine Website gar nicht mit der Maus. Das kann unterschiedliche Gründe haben. Vielleicht sind sie mit der Tastatur einfach schneller, oder sie können ihre Hände nicht so gut kontrollieren, oder sie nutzen ein ganz anderes Eingabegerät, das wiederum auf die Tastaturbefehle zugreift. Und natürlich nutzen immer mehr Menschen auch einfach ein Touch-Device – also einen Bildschirm, der auf Berührung reagiert. Sie alle können mit dem Mauszeiger und auch mit einem Mouse-Over-Effekt nichts anfangen.

Was ist ein ausreichend sichtbarer Fokus?

Ein ausreichend sichtbarer Fokus ist zunächst einmal eins: sichtbar. Und Sichtbare Dinge fallen auf jeden Fall in deinen Aufgabenbereich als Designer*in. Also nimm dir ein wenig Zeit und gestalte einen Fokus-Zustand, genauso wie du einen Maus-Over-Zustand oder eine schicke Micro-Interaction gestaltest.

Dabei kannst du dem sichtbaren Fokus viele schöne und ansprechende Designs geben. Ja es gibt Regeln, aber die gibt es ja immer. Und diesmal hältst du dich einfach daran, statt sie zu brechen 🙂

Hier sind die Regeln, die du beachten solltest.

  • Verlasse dich beim Fokus-Design nie nur auf Farbe allein!
    Nimm immer auch ein anderes Merkmal hinzu. Dabei gilt die Umkehrung der Farben, also Hintergrund- wird Vordergrundfarbe und umgekehrt als zusätzliches Merkmal. Auch Helligkeitsunterschiede gelten als zusätzliches Merkmal. Dann sollte aber auch der folgende Punkt zutreffen:
  • Das Kontrastverhältnis von Vorder- und Hintergrund sollte immer mindestens 3:1 betragen.

Noch klarer wird dein Fokus-Zustand, wenn du auch folgende Regeln beachtest. Sie sind noch nicht im offiziellen Regelwerk für die Barrierefreiheit im Web (WCAG 2.1.) enthalten, werden aber bald im nächsten Update WCAG 2.2 gelten:

  • Die Fläche deines Fokus-Zustands sollte mindestens so groß sein, wie der Umfang der minimalen Box, die um dein auszuzeichnendes Element gelegt werden kann. Die Box muss dabei nicht sichtbar sein – es gilt die gedachte Box. Also zum Beispiel ist der Umfang deiner minimalen Box 110px+10px+110px +10px = 240px. Dann müsste die minimale Fläche deines Fokus-Zustands mindestens 240px betragen, also beispielsweise 2px x 120px, was einer etwas dickeren Linie am unteren Rand eines Links entsprechen könnte.
  • Der Fokus-Zustand muss nicht unbedingt ein Rahmen um dein Element sein. Falls es kein Rahmen ist, sollte die Fläche aber mindestens so groß sein, wie eine 4px breite Linie an der schmalsten Stelle deines Elementes. Im obigen Beispiel wäre das eine Mindestfläche von 10px x 4 = 40px.
  • Der Kontrast der Farben zwischen dem unfokussierten und dem fokussierten Zustand sollte 3:1 betragen.

Ok das klingt kompliziert. Aber es ist wie mit dem jeder anderen Formel: hast du es einmal kapiert, ist es ganz einfach. Und ja – du kannst auch ruhig deinen Augen trauen. Wenn du der Meinung bist, einen wirklich gut sichtbaren Fokus-Zustand gebaut zu heben, bestätigt sich das meist auch durch die Regeln. Hier einige anschauliche Beispiele:

Beispiele

Starte, indem du auf dem Desktop-PC deinen Tastatur-Fokus (Maus oder Tastatur) auf den kleinen Button links oben in der Box legst. Danach kannst du mit der Tab-Taste alle Buttons und Links ansteuern und den Focus-Effekt sehen. Mit Shift-Tab gehst du rückwärts.

Du möchtest mehr lernen? Kein Problem. In meinem Online Workshop zeige ich dir, wie du den Focus-State am Besten in dein Design integrierst und so anlegst, das Web-Developer*innen ihn gleich finden und einbauen können.

Zum Worskhop anmelden

Melde dich jetzt für meinen Online-Workshop „Barrierefreiheit für Designer“ an!

2023 durchstarten: Von Do. 26.01. bis Fr. 27.01 – jeweils von 09:00 bis 12:00 Uhr mache ich meinen ersten Online-Workshop zum Thema – Live, Online zum Mitmachen. 2 Einheiten von jeweils 3 Stunden geballtes Wissen + Übungen + Fragerunde und Feedback zur Barrierefreiheit im Web speziell für Designer.

Zum Einstiegspreis von 450€ netto.

Ein Tag vollgepackt mit wertvollen Infos und Erklärungen + Linksammlung + Fragerunde + wertvollen Tipps zur Weiterbildung und Zertifizierung. Geleitet von Oliver – einem WAS-zertifizierten Barrierefreiheits-Spezialisten und Dipl. Kommunikationsdesigner.

Fülle einfach das Formular aus. Alles weitere folgt 😉

loader
*Bitte alle Felder ausfüllen.

Du bekommst eine Mail mit einem Teilnahme-Button, den du noch betätigen musst.
Ich stimme der Bedingungen der Nutzung zu

Du möchtest erst mal weiter Tipps bekommen? Auch kein Problem, trage dich unverbindlich zu meinem Newsletter ein:

Barrierefreiheit für Designer*innen – Newsletter

Melde dich jetzt für meinen Newsletter „Barrierefreiheit für Designer“ an!

Du bekommst 10mal jede Woche einen Tipp zum Thema, den du sofort anwenden kannst.

Und erfährst von neuen Online-Workshops als erster!

loader

Deine E-Mailadresse wird nur dafür genutzt, dir unseren Newsletter und den Hinweis zum Webinar zu senden. Du kannst jederzeit kündigen über den Abbestellen-Link in jedem Newsletter
Ich stimme der Bedingungen der Nutzung zu

Kategorie: Allgemein

Leser-Interaktionen

Schreibe einen Kommentar Antworten abbrechen

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

netz-rebellen© 2023

  • Impressum
  • Datenschutzerklärung
  • Barrierefreiheit