Fokus

Interaktive Elemente wie Formularsteuerelemente, Links und Schaltflächen sind standardmäßig fokussierbar und können mit der Tabulatortaste aufgerufen werden. Elemente mit Tabulatortaste sind Teil der sequenziellen Fokusnavigationsreihenfolge im Dokument. Andere Elemente sind inaktiv, d. h. sie sind nicht interaktiv. Mit HTML-Attributen können interaktive Elemente inaktiv und inerte Elemente interaktiv werden.

Standardmäßig entspricht die Fokusreihenfolge der Navigation der visuellen Reihenfolge im Quellcode. Es gibt HTML-Attribute, mit denen Sie diese Reihenfolge ändern können, und CSS-Eigenschaften, mit denen sich die visuelle Reihenfolge der Inhalte ändern lässt. Das Ändern der TAB-Reihenfolge mit HTML oder visuelles Rendering mit CSS kann die Nutzererfahrung beeinträchtigen.

Ändern Sie mit CSS und HTML nicht die wahrgenommene und tatsächliche TAB-Reihenfolge. Die folgenden beiden Beispiele zeigen, dass TAB-Reihenfolgen, die von der optisch erwarteten Reihenfolge abweichen, für Nutzer verwirrend und nutzerfreundlich sind.

In diesem Beispiel hat der Wert des Attributs tabindex die TAB-Reihenfolge chaotisch:

In diesem Beispiel hat CSS eine Divergenz zwischen der TAB-Reihenfolge und der visuellen Reihenfolge der Inhalte erzeugt:

Durch die Deklaration flex-flow: row-reverse; wurde die visuelle Reihenfolge umgekehrt. Außerdem wurde die CSS-Eigenschaft order auf das sechste Wort „This“ angewendet, wodurch dieses eine Wort visuell verschoben wurde. Die TAB-Reihenfolge entspricht der Reihenfolge des Codes, die nicht mehr der visuellen Reihenfolge entspricht. Für Tastaturnutzer wird also eine Verbindung getrennt.

Inerte Elemente interaktiv machen

Die Attribute contenteditable und tabindex sind globale Attribute und können jedem Element hinzugefügt werden, sodass sie während des Vorgangs fokussierbar werden. Fokussierbare Elemente können auch mit einer Maus oder einem Zeiger fokussiert werden, indem das Attribut autofocus festgelegt wird, oder per Skript, z. B. mit element.focus().

Das Attribut tabindex

Das globale tabindex-Attribut, das in Attribute eingeführt wird, ermöglicht es Elementen, die sonst nicht im Fokus wären, um den Fokus zu fokussieren. Dies geschieht normalerweise mit der Tabulatortaste, daher der Name.

Das Attribut tabindex verwendet als Wert eine Ganzzahl. Ein negativer Wert macht ein Element fokussierbar, aber nicht tabulierbar. Durch den tabindex-Wert 0 wird das Element fokussierbar und mit Tabulatortaste aufgerufen. Das Element, auf das es angewendet wird, wird in der Reihenfolge des Quellcodes der sequenziellen Fokusnavigation hinzugefügt. Bei einem Wert von 1 oder höher kann das Element fokussierbar und mit Tabulatortaste aufgerufen werden. Es wird jedoch einer priorisierten Abfolge der Tabulatortaste hinzugefügt. Wie oben gezeigt, sollte dies vermieden werden.

Die Schaltfläche „Teilen“ auf dieser Seite (<share-action>) ist ein benutzerdefiniertes Element. tabindex="0" fügt dieses nicht normalerweise fokussierbare Element der Standardreihenfolge der Tabulatortaste hinzu:

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Auf dieser Seite gibt es ein weiteres benutzerdefiniertes Element: Die lokale Navigation enthält ein benutzerdefiniertes Element mit einem negativen tabindex-Wert:

<web-navigation-drawer type="standard" tabindex="-1">

Ein tabindex-Attribut mit einem negativen Wert sorgt dafür, dass das Element fokussierbar, aber nicht mit der Tabulatortaste möglich ist. Das Element kann Fokus empfangen, z. B. über HTMLElement.focus(), ist jedoch nicht Teil der sequenziellen Fokusnavigationsreihenfolge. Konventionelle Regel für Elemente, die nicht über eine Tabulatortaste aufgerufen werden können und fokussierbar sind, lautet die Verwendung von tabindex="-1". Wenn Sie einem interaktiven Element tabindex="-1" hinzufügen, können Sie die Tabulatortaste nicht mehr verwenden.

Mit der Methode element.focus() kann der Fokus auf fokussierbare Elemente gesetzt werden. Beachten Sie, dass der Browser fokussierte Elemente scrollt, sodass er sichtbar wird. Vermeiden Sie deshalb die Verwendung von element.focus({preventScroll:true}), da sich der Fokus auf ein nicht sichtbares Element negativ auf die Nutzerfreundlichkeit auswirkt.

Wenn Sie das Dokument abfragen möchten, um herauszufinden, welches Element derzeit im Fokus ist, verwenden Sie das schreibgeschützte Attribut Document.activeElement.

Elemente mit einer tabindex von 1 oder höher sind in einer separaten Tabsequenz enthalten. Wie Sie im Codepen sehen, beginnt die Tabellenkalkulation in einer separaten Sequenz vom niedrigsten zum höchsten Wert, bevor die Elemente in der regulären Sequenz (kein tabindex oder tabindex="0") in der Quellreihenfolge durchgegangen werden:

tabindex mit einem positiven Wert platziert das Element in eine priorisierte Fokussequenz, was zu Chaos der Fokusreihenfolge führen kann. Ändern Sie die DOM-Reihenfolge nicht mit tabindex. veränderte TAB-Reihenfolgeen wirken sich nicht nur negativ auf die Nutzerfreundlichkeit aus, sondern sind für Entwickler auch schwer zu verwalten und zu pflegen.

Das Attribut contenteditable

Das Attribut contenteditable wurde bereits besprochen. Wenn Sie contenteditable="true" für ein Element festlegen, ist es bearbeitbar und fokussierbar und Teil der TAB-Reihenfolge. Das Fokusverhalten ähnelt der Einstellung „tabindex="0"“, ist aber nicht identisch. Verschachtelte contenteditable-Elemente sind fokussierbar, können aber nicht mit der Tabulatortaste aufgerufen werden. Um ein verschachteltes contenteditable-Element mit der Tabulatortaste anzusteuern, fügen Sie tabindex="0" hinzu. Dadurch wird es der sequenziellen Fokusnavigationsreihenfolge hinzugefügt.

Interaktive Elemente in den Mittelpunkt stellen

Das Attribut autofocus

Das boolesche autofocus-Element ist zwar ein globales Attribut, das für jedes Element festgelegt werden kann, macht ein inaktives Element jedoch nicht interaktiv. Wenn die Seite geladen wird, wird das erste fokussierbare Element mit dem Attribut autofocus im Fokus, solange dieses Element angezeigt wird und nicht in einem <dialog> verschachtelt ist.

Das automatische Festlegen des Fokus auf Inhalte kann verwirrend sein. Wenn für eine Formularsteuerung autofocus festgelegt ist, scrollt die Formularsteuerung beim Seitenaufbau in die Ansicht. Die Anleitung für das Formular wird für alle Nutzer, einschließlich Screenreader-Nutzer und Nutzer mit kleinen Darstellungsbereichen, möglicherweise nicht angezeigt. Sie scrollen vielleicht sogar über das normalerweise sichtbare Label der Formularsteuerung hinaus. Das Attribut autofocus ändert nicht die sequenzielle Reihenfolge der Fokusnavigation im Dokument. Die Elemente in der Sequenz vor dem automatisch fokussierten Element werden einfach übersprungen. Aus diesen Gründen wird das Attribut autofocus nicht empfohlen.

Die Ausnahme von der Empfehlung „autofocus nicht verwenden“ besteht darin, das Attribut autofocus in <dialog>-Elemente aufzunehmen. Wenn ein Dialogfeld geöffnet wird, fokussiert der Browser automatisch das erste fokussierbare interaktive Element innerhalb der <dialog>. Daher ist autofocus für ein Element nicht erforderlich. Wenn Sie möchten, dass ein bestimmtes interaktives Element im Dialogfeld beim Öffnen des Dialogfelds fokussiert wird, fügen Sie diesem Element das Attribut autofocus hinzu.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Das Attribut autofocus, das beim Schließen von <button> festgelegt wird, sorgt dafür, dass der Fokus beim Öffnen des Dialogfelds hervorgehoben wird. Als erstes Element im Dialogfeld hätte es auf jeden Fall im Fokus stehen. Wenn ein Dialogfeld geöffnet wird, wird standardmäßig das erste fokussierbare Element im Dialogfeld hervorgehoben, es sei denn, für ein anderes Element im Dialogfeld ist das Attribut autofocus festgelegt.

Interaktive Elemente inaktiv machen

Es gibt auch HTML-Attribute, mit denen interaktive Elemente aus der TAB-Reihenfolge entfernt werden können. Wenn Sie ein negatives tabindex in fokussierbare Elemente einfügen, das Attribut disabled zu unterstützenden Formularsteuerelementen hinzufügen und das globale Attribut inert zu einem Container hinzufügen, kann die Tabulatortaste nicht mehr auf die Elemente angewendet werden. Diese drei Attribute sind NICHT austauschbar.

Negativer tabindex-Wert

Wie wir oben gelernt haben, macht ein tabindex-Attribut mit einem negativen Wert ein Element fokussierbar, aber nicht durch Tabulatortaste aufrufbar. Das Hinzufügen von tabindex="0" zu einem standardmäßig fokussierbaren Element, einschließlich Links, Schaltflächen, Formularsteuerelementen und Elementen, die contenteditable sind, ist zwar nicht erforderlich. Wenn Sie einen tabindex mit einem negativen Wert einfügen, werden Elemente, die normalerweise mit der Tabulatortaste aufgerufen werden können, aus der sequenziellen Fokusnavigationsreihenfolge entfernt.

Ein negativer tabindex-Wert verhindert, dass sich Tastaturnutzer auf interaktive Elemente konzentrieren. Das Element wird jedoch nicht deaktiviert. Zeiger-Nutzende können den Fokus weiterhin auf das Element richten. Um ein Element zu deaktivieren, verwenden Sie das Attribut disabled.

Deaktiviert

Durch das boolesche Attribut disabled werden die Formularsteuerelemente, auf die es angewendet wird, und ihre Nachfolgerelemente, sofern vorhanden, nicht fokussierbar. Deaktivierte Formularsteuerelemente können nicht hervorgehoben werden, erhalten keine Klickereignisse und werden nicht beim Senden des Formulars gesendet. Hinweis: disabled ist kein globales Attribut. Sie gilt für <button>, <input>, <optgroup>, <option>, <select>, <textarea>, mit dem Formular verknüpfte benutzerdefinierte Elemente und <fieldset>. Wenn die Richtlinie für <optgroup> oder <fieldset> festgelegt ist, sind alle untergeordneten Formularsteuerelemente mit Ausnahme des Inhalts des ersten <legend> der <fieldset> deaktiviert.

Elemente, die disabled unterstützen, können auch mit den Pseudoklassen :disabled und :enabled für das Targeting verwendet werden. Elemente, die mit dem Attribut disabled deaktiviert sind, werden über das User-Agent-Stylesheet im Allgemeinen hellgrau dargestellt, selbst wenn ein accent-color festgelegt ist.

Da es sich um ein boolesches Attribut handelt, wird das ansonsten aktivierte Element durch das Vorhandensein des Attributs deaktiviert. Sie können es nicht auf false festlegen. Um ein deaktiviertes Element wieder zu aktivieren, muss das Attribut entfernt werden. Dies geschieht in der Regel über Element.removeAttribute('disabled').

Mit dem Attribut HTMLInputElement.disabled können Sie prüfen, ob eine Eingabe deaktiviert ist. Da disabled kein globales Attribut ist, wird es nicht vom HTMLElement übernommen. Allerdings hat jede Oberfläche von Elementen, die es unterstützen, wie HTMLSelectElement oder HTMLTextareaElement, dieselbe schreibgeschützte Eigenschaft.

Das Attribut disabled gilt nicht für inert-Elemente, die über tabindex oder contenteditable fokussierbar werden. Sie gilt auch nicht für das <form>-Element selbst. Um sie zu deaktivieren, kann das globale Attribut inert verwendet werden.

Das Attribut inert

Wenn das globale boolesche Attribut inert einem Element hinzugefügt wird, werden das Element und alle verschachtelten Inhalte deaktiviert – weder anklickbar noch tabulierbar – und aus der Barrierefreiheitsstruktur entfernt. inert kann zwar auf jedes Element angewendet werden, wird aber im Allgemeinen für Inhaltsabschnitte verwendet, z. B. für nicht sichtbare oder anderweitig versteckte Inhalte.

Wenn disabled auf Formularsteuerelemente angewendet wird, stellt der Browser einen Standardstil bereit und kann mithilfe der Pseudoklasse :disabled gestaltet werden. Das Attribut inert bietet keine visuellen Indikatoren und hat keine übereinstimmende Pseudoklasse (obwohl die Attributauswahl [inert] übereinstimmt).

Die Verwendung von inert für sichtbare Inhalte ohne Stile, die auf die Trägheit hinweisen, kann zu einer schlechten Nutzererfahrung führen. Da inerte Inhalte für Nutzer von Screenreadern nicht verfügbar sind, kann es verwirrend sein, wenn Nutzer von sehenden Screenreadern Inhalte auf dem Bildschirm sehen, die für die Bedienungshilfen nicht verfügbar sind. Machen Sie die Trägheit über CSS deutlich sichtbar.

Achten Sie darauf, dass sich der Fokus nie auf nicht sichtbare Inhalte bewegt. Alles, was außerhalb des Bildschirms gerendert wird und im Fokus nicht automatisch sichtbar ist, sollte inert werden. Wenn Inhalte ausgeblendet sind, aber im Fokus sichtbar sind, z. B. bei dem Link zum Überspringen zum Inhalt auf dieser Seite, müssen sie nicht deaktiviert werden.

Wissen testen

Wissen testen

Testen Sie Ihr Wissen über Fokussierung.