Fokus setzen

Wenn wir auf einen Button klicken, passiert meistens irgendetwas. (Achtung, hier ist nicht der als Button gestaltete Link mitgemeint!) Wenn der Button die Aufmerksamkeit des Users zu diesem irgendetwas lenkt, wollen wir üblicherweise auch den Fokus dorthin setzen.

Beispielsweise öffen wir ein Off-Canvas-Menü. Wenn ein User auf den Button klickt, wird das Menü eingeblendet. Das Menü fährt mit einer Animation herein und hat damit unsere Aufmerksamket. Für Keyboard-User sollte diese “Aufmerksamkeit” auch auf das Menü gelegt werden, und zwar in Form eines Fokus-States. Wir wollen dann bei Tab das erste Item im Menü fokussieren.

Wir setzen den Focus auf ein Element mit Element.focus().

Element.focus()

Element.focus()

Mit Element.focus können wir den Fokus auf fokussierbare Elemente legen, wie z.B.

Links
Buttons
Formularelemente

<button>Button</button>
<button>Go to previous button</button>

const buttons = document.querySelectorAll('button');
const firstButton = buttons[0];
const secondButton = buttons[1];

secondButton.addEventListener('click', e => {
  firstButton.focus();
});

Directing focus to non-focusable elements

Wenn wir focus() auf nicht-fokussierbare Elemente anwenden (wie z.B. ein <div>) passiert erst einmal gar nichts. Wir müssen dem Element zuerst ein tabindex mitgeben, damit es fokussiert werden kann.

<p>The quick brown fox jumps over the lazy dog.</p>
<button>Go to paragraph</button>

const button = document.querySelector('button');
const paragraph = document.querySelector('p');

button.addEventListener(click, e => {
  paragraph.focus();
});

Das wird nicht funktionieren. Wir geben dem paragraph einen tabindex mit, dann wird der Absatz beim Klick auf den Button fokussiert:

<p tabindex="-1">The quick brown fox jumps over the lazy dog.</p>
<button>Go to paragraph</button>

Directing focus with links

Mit Links können wir einen Fokus setzen wenn

die href mit einem # beginnt (Ankerlink)
die href auf eine id oder ein anderes Element auf derselben Seite verweist.

Der Fokus kann auf fokussierbare Elemente gesetzt werden:

<a href="#button">Jump to button</a>
<button id="button">Button</button>

Mit Links – und nur mit Links – kann man den Fokus auch auf nicht-fokussierbare Elemente setzen. Wenn wir das tun, passieren vier Dinge:

Der Fokus geht zum <body>
Weitere Tastendrücke gehen von <body> aus
Aber wir können zum nächsten fokussierbaren Element tabben
Wir können auch mit Shift und Tab zum vorhergehenden fokussierbaren Element tabben

Beispiel Artikelnavigation:

<button>First Button</button>

<article id="article">
  <h1>The quick brown fox jumps over the lazy dog</h1>
  <p>But the lazy dog refuses to move. It continues sleeping.</p>
  <button>Second Button</button>
  <button>Third Button</button>
</article>

<a href="#article">Jump to article</a>

Der Link zeigt auf den Artikel, aber der Artikel ist nicht fokussierbar.

Wenn wir auf den Link klicken, wird der Fokus auf <body> gesetzt. Wir können das feststellen, indem wir das document.activeElement abfragen.

Jeder weitere Tastendruck geht von <body> aus. Das können wir wiederum mit einem EventListener testen:

document.addEventListener('keydown', event => {
  console.log(event.target);
});

Focus and scroll

Wenn wir ein Element fokussieren, springt der Browser zu diesem Element. Das gilt sowohl für Element.focus als auch für Links.

Dieses Auto-Scroll könnte man verhindern:

mit preventScroll: true bei Element.focus
mit preventDefault() bei Links

Macht zwar keinen Sinn, trotzdem das How-to:

// Element.focus
Element.focus({ preventScroll: true });

// Links
const a = document.querySelector('a');

// Don't do this unless necessary
a.addEventListener('click', event => {
  e.preventDefault();
});