Umsetzung

• 

  Sichtbarer Fokusindikator

  Bei allen interaktiven Elementen wie Buttons, Links oder Formularen muss der Tastaturfokus sichtbar sein. Der Fokusindikator bzw. die Hervorhebung sollte so lange sichtbar sein, wie das Element fokussiert ist, ohne zeitliche Begrenzung.

  Mögliche Hervorhebungen sind:

  • Unterstreichung
  • Fettung
  • Farbwechsel (solange der Kontrast der Farbe vom fokussierten zum nicht-fokussierten Zustand größer als 3:1 ist)
  • Die blinkende Linie, nach dem Klick in ein Inputfeld
  • Fokusrahmen

  Wir empfehlen, einen Fokusrahmen zu nutzen. Dieser ist auf allen Elementen einheitlich und gut zu erkennen. Mehr dazu in dem Blogeintrag von Sara Soueidan über Fokusindikatoren (englisch).

   

  WCAG-Technik(en) in Englisch:

  • G149: Hervorgehoben bei Fokus

• 

  Browserfokus überschreiben

  Achte auch auf die Standard-Fokusindikatoren von Browsern oder Betriebssystemen: Diese erfüllen manchmal nicht die Kontrastanforderungen.

  Auch wenn viele Browser mittlerweile einen doppelten Fokusrahmen nutzen, ist der Kontrast zu manchen farbigen Hintergründen nicht groß genug (3:1). Das liegt daran, dass Browser manchmal Farben wie Blau oder Pink für den Fokusrahmen nutzen.

  Wenn der Kontrast zu gering ist, musst du selbst einen Fokusindikator bereitstellen, der die Kontrastanforderungen erfüllt.

  WCAG-Technik(en) in Englisch:

  • G195: Nutzen einen vom Autor bereitgestellten, sichtbaren Fokusindikator