--- title: "Bei Fokus" url: "https://barrierefreihochzwei.de/de/wcag/3-2-1-bei-fokus" language: "de" description: "WCAG 3.2.1 verbietet Kontextänderungen beim bloßen Fokussieren – hier lernst du, was erlaubt ist, was nicht und wie du es sauber umsetzt." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:42:00+02:00" --- # Bei Fokus Wenn der Fokus zu früh zum Sprung ansetzt. - **Erfolgskriterium:** 3.2.1 - **Prinzip:** Verständlich - **Konformitätsstufe:** Level A - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/on-f...](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html) Erfolgskriterium 3.2.1 # 3.2.1 Bei Fokus Level AVerständlich Wenn der Fokus zu früh zum Sprung ansetzt. ## 1. Was ist das Ziel dieses Kriteriums? Websites verhalten sich manchmal wie ein übereifriger Concierge in einem Luxushotel: Kaum berührst du etwas, passiert schon etwas anderes. Du springst mit der Tabulatortaste in ein Eingabefeld und plötzlich öffnet sich ein neues Fenster, oder du navigierst durch ein Formular und wirst ungewollt auf eine andere Seite geschleudert. Menschen, die mit der Tastatur oder assistiven Technologien navigieren, sind von solchen unvorhersehbaren Sprüngen besonders betroffen. Sie verlieren die Orientierung, wissen nicht, wo sie gelandet sind, oder müssen mühsam den Weg zurück finden. Das Ziel von Erfolgskriterium 3.2.1 der WCAG ist daher klar: Wenn ein Element den Fokus erhält, darf das keine Kontextänderung auslösen. Navigation soll vorhersehbar und kontrollierbar bleiben. ## 2. Was fordert das Erfolgskriterium genau? Ganz konkret: Wenn eine Bedienkomponente den Fokus bekommt – etwa per Tabulatortaste oder durch Antippen eines Eingabefelds –, darf dadurch keine Kontextänderung starten. Verboten beim Fokussieren: - Formulare werden automatisch abgeschickt - Neue Fenster oder Tabs öffnen sich - Modale Dialoge öffnen sich und ziehen den Fokus auf sich - Der Fokus wird automatisch zu einem anderen Element verschoben - Die Seite wechselt automatisch Erlaubt beim Fokussieren: - Inhalte klappen auf (z. B. ein Untermenü in der Navigation) - Hilfetexte oder Tooltips werden eingeblendet - Visuelle Änderungen wie Fokusrahmen oder Hervorhebungen Wichtig: Es geht um das Fokussieren, nicht um das Aktivieren. Wenn du ein Element anklickst oder per Enter aktivierst, darf durchaus etwas passieren – aber nicht schon beim bloßen Fokussieren. Ein praktisches Beispiel: Ein Untermenü klappt auf, sobald der Hauptmenüpunkt den Fokus erhält – das ist okay. Es darf aber weder den Fokus selbstständig in die Unterpunkte ziehen noch dich direkt auf die verlinkte Seite schicken, während du mit der Tabulatortaste durchnavigierst. ## 3. Warum ist das wichtig für Barrierefreiheit? Stell dir vor, du navigierst blind durch eine Website und plötzlich ändert sich alles – ohne dass du weißt, warum oder wo du jetzt bist. Oder du hast motorische Einschränkungen und kämpfst dich mühsam durch ein Formular, nur um ungewollt auf einer anderen Seite zu landen. Vorhersehbare Navigation schafft Barrierefreiheit, weil sie: - Menschen mit Sehbehinderungen hilft, die Orientierung zu behalten und zu verstehen, was passiert - Menschen mit kognitiven Einschränkungen entlastet, die auf gleichbleibende, vorhersehbare Abläufe angewiesen sind - Menschen mit motorischen Beeinträchtigungen schützt, die nicht schnell reagieren können, wenn sich unerwartet etwas ändert - Tastaturnutzer:innen die Kontrolle über ihre Navigation gibt - Screenreader-Nutzer:innen vor verwirrenden Sprüngen bewahrt Und nicht zuletzt: Vorhersehbarkeit macht Websites für alle angenehmer – auch für Menschen ohne Einschränkungen, die sich einfach auf eine verlässliche Bedienung verlassen wollen. ## 4. So setzt du das Kriterium erfolgreich um Die gute Nachricht: Dieses Kriterium umzusetzen ist oft eine Frage des Weglassens – nämlich unerwünschter automatischer Aktionen. Hier ein paar bewährte Tipps: **Was du vermeiden solltest:** - Automatisches Absenden eines Formulars, sobald du ein Feld verlässt und das nächste den Fokus bekommt - Automatische Weiterleitungen beim Fokussieren von Links oder Buttons - Neue Fenster oder modale Dialoge, die sich beim Fokussieren öffnen - Skripte, die den Fokus beim Erhalt sofort wieder wegnehmen oder woandershin verschieben **Was du stattdessen machen kannst:** - Löse Kontextänderungen nur durch eine bewusste Aktivierung aus: Klick, Enter, Leertaste oder einen Absende-Button - Bei Navigationsmenüs: Untermenüs dürfen beim Fokus aufklappen, die Seite wechselt aber erst bei Aktivierung - Biete Hilfetexte an, die beim Fokussieren erscheinen, aber den Fokus nicht wegnehmen – und die sich nach den Regeln von [Inhalte bei Hover oder Fokus](https://barrierefreihochzwei.de/de/wcag/1-4-13-inhalte-bei-hover-oder-fokus) verhalten - Kennzeichne klar, wenn eine Aktion eine Kontextänderung zur Folge hat **Technische Umsetzung:** - Hänge keine Kontextänderungen an `focus`- oder `focusin`-Ereignisse; nutze dafür `click` bzw. das `submit`-Ereignis des Formulars - Vorsicht auch bei `change`-Ereignissen: Lösen sie einen Seitenwechsel aus, verletzt das schnell [Bei Eingabe](https://barrierefreihochzwei.de/de/wcag/3-2-2-bei-eingabe) - Verknüpfe Hilfetexte mit `aria-describedby`, statt sie als Dialog zu öffnen, der den Fokus abzieht - Baue Autovervollständigungen so, dass der Fokus im Eingabefeld bleibt, bis jemand bewusst einen Vorschlag auswählt **Tools und Tests:** - Navigiere deine Website komplett per Tastatur durch – Tab und Umschalt+Tab durch alle Bedienelemente - Teste mit Screenreadern wie NVDA oder VoiceOver - Achte darauf, dass beim reinen Fokussieren nie die Seite, das Fenster oder der Fokus wechselt ## 5. Warum dieses Erfolgskriterium für Unternehmen relevant ist Auch bei Erfolgskriterium 3.2.1 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business. **1. Benutzerfreundlichkeit für alle verbessern** Vorhersehbare Navigation reduziert Frust – nicht nur bei Menschen mit Behinderungen. Wenn sich deine Website kontrollierbar anfühlt, bleiben Nutzer:innen eher bei der Sache und kommen gerne wieder. **2. Weniger Abbrüche in Formularen und Checkouts** Unerwartete Aktionen beim Fokussieren reißen Menschen aus Formularen und Kaufprozessen. Vorhersehbare Interaktionen erhöhen die Chance, dass sie ihre Aufgabe erfolgreich abschließen. **3. Vertrauen und Markenimage stärken** Barrierefreie Navigation zeigt, dass du deine Nutzer:innen respektierst und an alle denkst. Das stärkt das Vertrauen in deine Marke. Und nicht zuletzt die rechtliche Seite: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Angebote für Verbraucher:innen, etwa Online-Shops und Bankdienstleistungen. Technischer Maßstab ist die EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist – 3.2.1 gehört dazu. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht ohnehin verpflichtet. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung. ## 6. Das Erfolgskriterium im Wortlaut des W3C > **Success Criterion 3.2.1 On Focus (Level A)** > > When any user interface component receives focus, it does not initiate a change of context. Kurz gesagt: Sobald ein Bedienelement den Fokus erhält, darf das allein keine Kontextänderung wie einen Seiten-, Fenster- oder Fokuswechsel auslösen. **Offizielle Erklärung beim W3C** Das W3C erklärt jedes Erfolgskriterium ausführlich – mit Absicht, Beispielen und Techniken (auf Englisch). [Understanding 3.2.1](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html) ## Weitere Kriterien aus „Verständlich“ [ 3.1.1 Level A ### Sprache der Seite Damit Screenreader die richtige Stimme finden. ](https://barrierefreihochzwei.de/de/wcag/3-1-1-sprache-der-seite) [ 3.1.2 Level AA ### Sprache von Teilen Wenn Websites polyglott werden. ](https://barrierefreihochzwei.de/de/wcag/3-1-2-sprache-von-teilen) [ 3.1.3 Level AAA ### Ungewöhnliche Wörter Wenn Fachsprache Barrieren schafft. ](https://barrierefreihochzwei.de/de/wcag/3-1-3-ungewoehnliche-woerter)