HTML Autofocus-Attribut
Informationen zum HTML autofocus-Attribut: Syntax, unterstützte Elemente, Anwendungsbeispiele und Hinweise zur Barrierefreiheit.
Das HTML-Attribut autofocus ist ein boolean-Attribut, das den Browser anweist, den Tastaturfokus beim Laden der Seite (oder des enthaltenden Dialogs) automatisch auf ein Element zu setzen. Der Benutzer kann sofort mit diesem Element interagieren, ohne es erst anklicken oder per Tab ansteuern zu müssen.
Das autofocus-Attribut wurde in HTML5 eingeführt und wird heute von allen modernen Browsern unterstützt (Chrome, Firefox, Safari und Edge unterstützen es umfassend seit etwa 2020).
Diese Seite behandelt die Syntax, die unterstützten Elemente, den häufigsten modernen Anwendungsfall (ein <dialog>-Element) sowie die Aspekte der Barrierefreiheit, die vor dem Einsatz abgewogen werden sollten.
Syntax
autofocus ist ein boolean-Attribut – allein seine Anwesenheit aktiviert es, es ist kein Wert erforderlich.
<input autofocus>| Gilt für | Jedes fokussierbare HTML-Element. Am häufigsten wird es bei Formularsteuerelementen wie <input>, <button>, <select> und <textarea> eingesetzt. Ein mit showModal() geöffnetes <dialog>-Element sowie ein geöffnetes <details>-Element nehmen ebenfalls an der Autofokus-Verarbeitung teil. |
|---|
Nur ein Autofokus pro Dokument
Das autofocus-Attribut darf nur einem Element pro Dokument zugewiesen werden. Wird es mehreren Elementen hinzugefügt, wenden Browser es auf das erste Element mit dem Attribut in der Dokumentreihenfolge an und ignorieren die übrigen. Es ist also nicht möglich, mit autofocus mehrere Felder gleichzeitig zu fokussieren – Fokus ist per Definition ein einzelner Punkt.
Grundlegendes Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>Example of the HTML "autofocus" attribute.</h1>
<form action="#">
Name: <input type="text" name="fname" autofocus /><br />
Surname: <input type="text" name="lname" /><br />
<input type="submit" />
</form>
</body>
</html>Beim Laden der Seite wird das Feld „Name" fokussiert und der Cursor blinkt dort, bereit zur Eingabe.
Autofokus bei anderen Elementen
autofocus ist nicht auf Texteingaben beschränkt. Es funktioniert bei jedem fokussierbaren Steuerelement. Der Browser fokussiert das Element; bei einem <select> oder <button> bedeutet das, dass es hervorgehoben und per Tastatur bedienbar wird, bei einer <textarea> wird der Cursor in sie gesetzt.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autofocus on different controls</title>
</head>
<body>
<!-- A button can receive autofocus -->
<button type="button" autofocus>Start here</button>
<!-- A select can receive autofocus -->
<label>Country:
<select name="country">
<option>United States</option>
<option>Germany</option>
<option>France</option>
</select>
</label>
<!-- A textarea can receive autofocus -->
<label>Message:
<textarea name="message" rows="4"></textarea>
</label>
</body>
</html>Die Einzel-Autofokus-Regel gilt: Nur der <button> oben wird fokussiert, da er das erste Element mit dem Attribut ist.
Autofokus in einem <dialog> (häufigster moderner Anwendungsfall)
Der eindeutigste und am besten vertretbare Einsatz von autofocus ist innerhalb eines modalen <dialog>-Elements. Wenn ein Benutzer bewusst einen Dialog öffnet, ist es ein erwartetes Verhalten, den Fokus auf das erste relevante Steuerelement darin zu setzen – dadurch bleibt der Tastaturbenutzer im Dialog und ist bereit zu handeln.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog with autofocus</title>
</head>
<body>
<button id="openBtn">Open dialog</button>
<dialog id="myDialog">
<form method="dialog">
<p>
<label>Your name:
<input type="text" name="name" autofocus />
</label>
</p>
<button value="ok">OK</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
const dialog = document.getElementById("myDialog");
document.getElementById("openBtn")
.addEventListener("click", () => dialog.showModal());
</script>
</body>
</html>Da der Dialog als Reaktion auf eine Benutzeraktion geöffnet wird, ist das Verschieben des Fokus dorthin nicht verwirrend – es entspricht genau dem, was der Benutzer angefordert hat. Deshalb ist autofocus bei einem Dialog-Steuerelement weit sicherer als autofocus bei einem Feld auf einer frisch geladenen Seite.
Wann (und wann nicht) Autofokus verwenden
Autofokus spart einen Klick und zeigt an, wo begonnen werden soll, übernimmt aber auch die Kontrolle über die Tastatur vom Benutzer. Verwenden Sie es, wenn:
- Die Seite oder Ansicht ausschließlich für diese eine Eingabe existiert – eine dedizierte Suchseite, ein Anmeldebildschirm oder ein Einzelfrageschritt.
- Der Fokus als Reaktion auf eine Benutzeraktion verschoben wird, etwa beim Öffnen eines modalen
<dialog>-Elements.
Vermeiden Sie es, wenn:
- Das Element unterhalb des sichtbaren Bereichs oder mitten auf einer inhaltsreichen Seite liegt. Das Fokussieren zwingt den Browser zum Scrollen, was störend ist und den darüber liegenden Inhalt überspringt.
- Die Seite relevante Inhalte enthält, die der Benutzer zuerst lesen sollte (z. B. ein Artikel mit einem Kommentarfeld). Das automatische Fokussieren des Kommentarfelds reißt den Leser am Artikel vorbei.
Barrierefreiheit
autofocus hat direkte Auswirkungen auf Benutzer von Hilfstechnologien – daher ist ein sorgfältiger Umgang erforderlich.
- Unterbrechung für Screenreader. Screenreader beginnen normalerweise, vom Anfang des Dokuments vorzulesen. Wird der Fokus auf ein Element mitten auf der Seite erzwungen, springt der Screenreader möglicherweise direkt zu diesem Steuerelement und überspringt stillschweigend Überschrift, Navigation und Einleitung – der Benutzer landet „mitten auf der Seite" ohne Kontext darüber, wo er sich befindet.
- WCAG 2.4.3 (Fokusreihenfolge). Dieses Erfolgskriterium verlangt, dass die Fokusreihenfolge Bedeutung und Bedienbarkeit erhält. Ein beim Laden auf ein beliebiges Steuerelement springender Fokus kann die erwartete Lese- und Tab-Reihenfolge des Benutzers verletzen. Behalten Sie Autofokus für Fälle vor, in denen das fokussierte Element tatsächlich der logische Ausgangspunkt ist.
- Unerwarteter Kontextwechsel. Ein plötzlicher Fokuswechsel mit Scrollen des viewport kann Benutzer mit kognitiven Einschränkungen oder Sehschwäche desorientieren, die möglicherweise nicht bemerken, dass sich die Seite bewegt hat.
Eine praktische Regel: Autofokus nur dann einsetzen, wenn das Fokussieren des Elements die Seite nicht scrollt und dieses Element zweifelsfrei das Erste ist, was der Benutzer tun möchte.
Besonderheit bei Mobilgeräten
Mehrere mobile Browser ignorieren autofocus beim Laden der Seite absichtlich. Unter iOS scrollt der mobile Safari nicht zur Seite und öffnet auch nicht automatisch die Bildschirmtastatur, und Chrome unter Android verhält sich ähnlich. Dies ist eine UX-Entscheidung auf Betriebssystemebene: Das automatische Öffnen der virtuellen Tastatur würde Inhalt verdecken, das Layout verschieben und den Benutzer überraschen, bevor er entschieden hat zu tippen.
Es gibt keine zuverlässige „Erzwingung" auf diesen Plattformen, und das Simulieren per JavaScript (element.focus() beim Laden) wird ebenfalls blockiert, es sei denn, es geschieht innerhalb eines Benutzeraktions-Handlers. Der akzeptierte Ansatz lautet, den Fokus als Reaktion auf ein Tippen zu setzen – beispielsweise durch Aufruf von .focus(), wenn der Benutzer einen Dialog öffnet oder auf eine Schaltfläche „Suchen" tippt – was genau dem oben gezeigten Dialog-Muster entspricht.
Browserkompatibilität
autofocus ist Teil des HTML Living Standard und wird weitgehend unterstützt: Chrome, Edge, Firefox und Safari haben es seit Jahren implementiert, wobei das moderne Verhalten (für beliebige Elemente) seit etwa 2020 in diesen Browsern verfügbar ist. Die oben beschriebene Einschränkung der mobilen Tastatur ist ein bewusstes Plattformverhalten und kein fehlender Support.