Zum Inhalt springen
44 Barrierefreiheit Dokumentation

3.2.1 - Bei Focus

A 2.0 Umsetzung

Ziel

Die Navigation durch Inhalte ist vorhersehbar und es werden keine unerwarteten Kontextwechsel ausgelöst.

Beschreibung

  • Ein Kontextwechsel wird nicht durch das Erhalten des Fokus eines Elements ausgelöst.
  • Beispiele für Kontextwechsel sind das automatische Absenden von Formularen, das Öffnen neuer Fenster oder das Springen des Fokus zu einem anderen Element.
  • Der Fokus darf nur durch Benutzeraktionen wie das Drücken der Eingabe- oder Leertaste einen Kontextwechsel auslösen, nicht durch das bloße Verschieben des Fokus.
  • Dieses Erfolgskriterium gilt sowohl für die Navigation mit der Tastatur als auch mit der Maus.

Anforderungen

  • Sicherstellen, dass Fokusereignisse onfocus keinen automatischen Kontextwechsel auslösen.
  • Verwenden von Ereignissen wie onchange oder onclick statt onfocus für Kontextwechsel.
  • Bei Verwendung von JavaScript Dropdowns oder dynamischen Inhalten sicherstellen, dass ein Kontextwechsel erst nach einer Benutzerbestätigung erfolgt.
  • Warnungen einfügen, wenn ein neues Fenster oder Tab geöffnet wird.

Code-Beispiele

<select id="menu">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
<script>
    document.getElementById("menu").addEventListener("change", function() {
        window.location.href = this.value; // Kontextwechsel nur bei Benutzeraktion
    });
</script>
Formular mit bestätigtem Absenden:
<form id="exampleForm" onsubmit="return confirm('Sind Sie sicher, dass Sie das Formular absenden möchten?');">
    <input type="text" name="name" placeholder="Name">
    <input type="submit" value="Absenden">
</form>