HTML5 – Das Autofocus-Attribut

Das HTML5-Attribut „autofocus“ stellt ein nettes Feature für Formulare bereit, das sich bisher nur mit Javascript umsetzen ließ:

Verwendung

<input name=“q“ value=““ autofocus>

Funktion

Setzt den Focus beim Laden einer Seite in das Formularfeld, dem das Attribut mitgegeben wurde.

Browserunterstützung

  • ab FF 4, Opera 10.63, Safari 5, Chrome 6, Opera 11, IE10
  • Kann bereits eingesetzt werden, da keine unerwünschten Nebenwirkungen auftreten in Browsern, die das Attribut nicht kennen
  • Auf den mobilen Betriebssystem iOS und Android wird dieses Feature nicht unterstützt – es würde wohl auch mehr Verwirrung stiften, als nutzen, wenn beim Besuch einer Webseite sofort die virtuelle Tastatur angezeigt würde und der Bedienung mit Fingern wird autofocus auch nicht wirklich gerecht.

Anwendung

  • Auf Seiten einzusetzen, deren eigentlicher Zweck das Ausfüllen eines Formulares ist.
  • Links auf solche Seiten sollten dem Nutzer den Zweck klar machen.
  • Nur einmal je Seite verwenden!

Diskussion

Da der Focus in ein Formularfeld gesetzt wird, steigen SR-Nutzer und Tastatur-Nutzer nicht am Beginn einer Seite ein, sondern bei dem autofocussierten Formularfeld. Die Navigation zurück zur
Sprungnavigation ist recht aufwändig. Deswegen nicht standardmäßig z. B. in das Suchfeld einsetzen, das wir auf fast allen Seiten bereit stellen, deren eigentlicher Zweck die Präsentation eines Artikels ist.

Muss ein Formular ausgefüllt werden, profitieren natürlich SR- und Tastaturnutzer in besonderem Maße von diesem Attribut.

Gegenüber dem Einsatz von Javascript zur Fokussierung gibt es zwei entscheidende Vorteile:

  1. Das Attribut autofocus wird sich browserübergreifend identisch Verhalten
  2. Es ist Browserherstellern oder Autoren von Erweiterungen möglich, eine Deaktivierung bereit zu stellen, für Menschen, die das Setzen des Fokus als Bevormundung empfinden. So kann es den Arbeitsfluss stören, wenn jemand viel mit der Tastatur surft und es gwöhnt ist, mit der Leertaste eine Seite runter zu scrollen (beim Einsatz von autofocus würde ein Leerzeichen in das entsprechende Formularfeld gesetzt).

Wenn man unbedingt in jedem Fall den Focus in ein bestimmtes Feld setzen möchte (nicht empfohlen), kann man Javascript als Fallback-Methode für ältere Browser verwenden. Siehe hierzu <http://diveintohtml5.org/detect.html#input-autofocus>

Viel Spaß beim Ausprobieren!

Schreibe einen Kommentar

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