Fokus

Interaktive Elemente wie Formularsteuerelemente, Links und Schaltflächen sind standardmäßig fokussierbar und können mit der Tabulatortaste angesteuert werden. Elemente, die mit der Tabulatortaste angesteuert werden können, sind Teil der sequenziellen Fokusnavigation des Dokuments. Andere Elemente sind inaktiv, d. h., sie sind nicht interaktiv. Mit HTML-Attributen können Sie interaktive Elemente inaktiv und inaktive Elemente interaktiv machen.

Standardmäßig ist die Reihenfolge des Navigationsfokus mit der visuellen Reihenfolge identisch, die der Reihenfolge im Quellcode entspricht. Es gibt HTML-Attribute, mit denen diese Reihenfolge geändert werden kann, und CSS-Eigenschaften, mit denen die visuelle Reihenfolge des Inhalts geändert werden kann. Wenn Sie die Reihenfolge der Tabulatortaste mit HTML oder die visuelle Reihenfolge mit CSS ändern, kann dies die Nutzerfreundlichkeit beeinträchtigen.

Ändern Sie die wahrgenommene und tatsächliche Reihenfolge der Tabulatortaste nicht mit CSS und HTML. Wie die folgenden beiden Beispiele zeigen, sind Tabulatoren, die von der visuell erwarteten Reihenfolge abweichen, für Nutzer verwirrend und schlecht für die Nutzerfreundlichkeit.

Im folgenden Beispiel hat der Wert des tabindex Attributs die Reihenfolge der Tabulatortaste chaotisch gemacht:

In diesem Beispiel hat CSS eine Abweichung zwischen der Reihenfolge der Tabulatortaste und der visuellen Reihenfolge des Inhalts verursacht:

Die flex-flow: row-reverse; Deklaration hat die visuelle Reihenfolge umgekehrt. Außerdem wurde die CSS Eigenschaft „order“ auf das sechste Wort „This“ angewendet , wodurch dieses Wort visuell verschoben wurde. Die Reihenfolge der Tabulatortaste entspricht der Reihenfolge des Codes, die nicht mehr mit der visuellen Reihenfolge übereinstimmt. Dies führt zu einer Unterbrechung für Tastaturnutzer.

Einige CSS-Funktionen, darunter Flexbox, Grid, Positionierung, Transformationen, und mehrspaltige Layouts, können die visuelle Reihenfolge des Inhalts ändern. Testen Sie Ihre Inhalte, indem Sie mit der Tastatur durch sie navigieren: Mit Umschalttaste + Tabulatortaste können Sie sich rückwärts durch den Inhalt bewegen. Verwenden Sie CSS, um anzugeben, welches Element den Fokus hat. Ordnen Sie fokussierbare Elemente nicht mit CSS neu an.

Es ist wichtig, dass Sie bei allen Viewport-Größen eine logische Reihenfolge der Tabulatortaste beibehalten.

Inaktive Elemente interaktiv machen

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

Das Attribut tabindex

Mit dem globalen tabindex Attribut, das in HTML5 eingeführt wurde, können Elemente, die sonst nicht fokussiert werden könnten, den Fokus erhalten, in der Regel mit der Tabulatortaste, daher der Name.

Das Attribut tabindex verwendet eine Ganzzahl als Wert. Ein negativer Wert macht ein Element fokussierbar, aber nicht mit der Tabulatortaste ansteuerbar. Ein tabindex-Wert von 0 macht das Element fokussierbar und mit der Tabulatortaste ansteuerbar. Das Element, auf das es angewendet wird, wird in der Reihenfolge des Quellcodes zur sequenziellen Fokusnavigation hinzugefügt. Ein Wert von 1 oder höher macht das Element fokussierbar und mit der Tabulatortaste ansteuerbar, fügt es aber einer priorisierten Reihenfolge der Tabulatortaste hinzu und sollte vermieden werden.

Auf dieser Seite ist die Schaltfläche „Teilen“ <share-action> ein benutzerdefiniertes Element. Das tabindex="0" fügt dieses Element in die Standardreihenfolge der Tabulatortaste der Tastatur ein:

<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>

Außerdem hat die lokale Navigation ein benutzerdefiniertes Element mit einem negativen tabindex Wert:

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

Ein tabindex-Attribut mit einem negativen Wert macht das Element fokussierbar, aber nicht mit der Tabulatortaste ansteuerbar. Das Element kann den Fokus erhalten, z. B. mit HTMLElement.focus(), ist aber nicht Teil der sequenziellen Fokusnavigation. Die Konvention für nicht mit der Tabulatortaste ansteuerbare, fokussierbare Elemente ist tabindex="-1". Wenn Sie tabindex="-1" zu einem interaktiven Element hinzufügen, kann es nicht mehr mit der Tabulatortaste angesteuert werden.

Die element.focus() Methode kann verwendet werden, um den Fokus auf fokussierbare Elemente zu setzen. Browser scrollen fokussierte Elemente in die Ansicht. Vermeiden Sie daher die Verwendung von element.focus({preventScroll:true}), da das Fokussieren auf ein nicht sichtbares Element eine schlechte Nutzererfahrung ist.

Wenn Sie das Dokument abfragen möchten, um herauszufinden, welches Element den Fokus hat, verwenden Sie die schreibgeschützte Document.activeElement Eigenschaft.

Elemente mit einem tabindex von 1 oder höher sind in einer separaten Reihenfolge der Tabulatortaste enthalten. Wie im folgenden Codepen beginnt die Tabulatortaste in einer separaten Reihenfolge, in der Reihenfolge vom niedrigsten zum höchsten Wert, bevor sie die Elemente in der regulären Reihenfolge (kein tabindex festgelegt oder tabindex="0") in der Quellreihenfolge durchläuft:

tabindex mit einem positiven Wert fügt das Element in eine priorisierte Fokusreihenfolge ein, was zu Chaos in der Fokusreihenfolge führen kann. Ändern Sie die DOM-Reihenfolge nicht mit tabindex. Eine geänderte Reihenfolge der Tabulatortaste kann zu einer schlechten Nutzererfahrung führen und ist schwer zu verwalten.

Das Attribut contenteditable

Das contenteditable Attribut wurde bereits behandelt. Wenn Sie contenteditable="true" für ein Element festlegen, kann es bearbeitet werden, ist fokussierbar und Teil der Reihenfolge der Tabulatortaste. Das Fokusverhalten ähnelt der Einstellung tabindex="0", ist aber nicht identisch. Verschachtelte contenteditable-Elemente sind fokussierbar, aber nicht mit der Tabulatortaste ansteuerbar. Wenn ein verschachteltes contenteditable Element mit der Tabulatortaste angesteuert werden soll, fügen Sie tabindex="0" hinzu, wodurch es zur sequenziellen Fokusnavigation hinzugefügt wird.

Interaktiven Elementen autofocus zuweisen

Das boolesche autofocus ist ein globales Attribut, das für jedes Element festgelegt werden kann. Es macht ein inaktives Element jedoch nicht interaktiv. Wenn die Seite geladen wird, erhält das erste fokussierbare Element mit dem autofocus Attributen den Fokus, sofern es angezeigt wird und nicht in einem <dialog> verschachtelt ist.

Das automatische Fokussieren auf Inhalte kann für Nutzer verwirrend sein. Wenn Sie autofocus für ein Formularsteuerelement festlegen, wird dieses Formularsteuerelement beim Seitenaufbau in die Ansicht gescrollt. Ihre Nutzer, einschließlich Screenreader-Nutzer und Nutzer mit kleinen Viewports, übersehen möglicherweise die Anweisungen des Formulars oder sogar das Label des Formularsteuerelements. Außerdem ändert das Attribut autofocus die sequenzielle Fokusnavigation des Dokuments nicht. Die Elemente in der Reihenfolge, die vor dem automatisch fokussierten Element stehen, werden übersprungen. Aus diesen Gründen sollten Sie das Attribut autofocus nicht verwenden.

Die Ausnahme von der Empfehlung, "autofocus nicht zu verwenden", ist das Attribut autofocus in <dialog> Elementen. Wenn ein Dialogfeld geöffnet wird, fokussiert der Browser automatisch das erste fokussierbare interaktive Element im <dialog>, sodass es nicht erforderlich ist, einem Element autofocus hinzuzufügen. Wenn Sie sicher sein möchten, dass ein bestimmtes interaktives Element im Dialogfeld den Fokus erhält, wenn das Dialogfeld geöffnet 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 für die Schaltfläche „Schließen“ <button> ermöglicht es, dass sie den Fokus erhält wenn das Dialogfeld geöffnet wird. Als erstes Element im Dialogfeld hätte es ohnehin den Fokus erhalten. Standardmäßig erhält das erste fokussierbare Element im Dialogfeld den Fokus, wenn ein Dialogfeld geöffnet wird, 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 Reihenfolge der Tabulatortaste entfernt werden können. Wenn Sie fokussierbaren Elementen ein negatives tabindex hinzufügen, das Attribut disabled zu unterstützenden Formularsteuerelementen hinzufügen und das globale Attribut inert zu einem Container hinzufügen, können Elemente nicht mehr mit der Tabulatortaste angesteuert werden. Diese drei Attribute sind völlig getrennt und nicht austauschbar.

Negativer tabindex-Wert

Ein tabindex-Attribut mit einem negativen Wert macht ein Element fokussierbar, aber nicht mit der Tabulatortaste ansteuerbar. Es ist nicht erforderlich, einem Element, das standardmäßig fokussierbar ist, tabindex="0" hinzuzufügen, einschließlich Links, Schaltflächen, Formularsteuerelementen und Elementen, die contenteditable sind. Wenn Sie ein tabindex mit einem negativen Wert hinzufügen, werden normalerweise mit der Tabulatortaste ansteuerbare Elemente aus der sequenziellen Fokusnavigation entfernt.

Ein negativer tabindex-Wert verhindert, dass Tastaturnutzer den Fokus auf interaktive Elemente setzen, deaktiviert das Element aber nicht. Nutzer mit Zeigegeräten können den Fokus weiterhin auf das Element setzen. Verwenden Sie das Attribut disabled, um ein Element zu deaktivieren.

Deaktiviert

Das boolesche Attribut „disabled“ macht die Formularsteuerelemente, auf die es angewendet wird, und ihre Nachfolgerelemente, falls vorhanden, nicht fokussierbar. Deaktivierte Formularsteuerelemente können nicht fokussiert werden, erhalten keine Klickereignisse und werden beim Senden des Formulars nicht gesendet.

disabled ist kein globales Attribut. Es gilt für <button>, <input>, <optgroup>, <option>, <select>, <textarea>, formbezogene benutzerdefinierte Elemente und <fieldset>. Wenn es für <optgroup> oder <fieldset> festgelegt ist, werden alle untergeordneten Formularsteuerelemente deaktiviert, mit Ausnahme des Inhalts der ersten <fieldset>'s ersten <legend>.

Dieselben Elemente, die disabled unterstützen, können auch mit den :disabled und :enabled Pseudoklassen angesprochen werden. Elemente, die mit dem Attribut disabled deaktiviert sind, werden in der Regel mit dem User-Agent-Stylesheet hellgrau formatiert, auch wenn eine 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 setzen. Um ein deaktiviertes Element wieder zu aktivieren, muss das Attribut entfernt werden, in der Regel mit Element.removeAttribute('disabled').

Die HTMLInputElement.disabled Eigenschaft können Sie prüfen, ob eine Eingabe deaktiviert ist. Da disabled kein globales Attribut ist, wird es nicht vom HTMLElement geerbt, aber jede unterstützende Elementoberfläche wie HTMLSelectElement, HTMLTextareaElement, hat dieselbe schreibgeschützte Eigenschaft.

Das disabled Attribut gilt nicht für normalerweise inert Elemente, die mit tabindex oder contenteditable fokussierbar gemacht werden, und auch nicht für das <form> Element. Um diese Elemente zu deaktivieren, kann das globale Attribut inert verwendet werden.

Das Attribut inert

Wenn das globale boolesche Attribut inert einem Element hinzugefügt wird, werden dieses Element und alle verschachtelten Inhalte deaktiviert. Das bedeutet, dass sie nicht angeklickt oder mit der Tabulatortaste angesteuert werden können. Sie werden auch aus der Baumansicht für Barrierefreiheit entfernt. inert kann auf jedes Element angewendet werden, wird aber in der Regel für Inhaltsabschnitte verwendet, z. B. für Inhalte, die nicht auf dem Bildschirm angezeigt werden oder anderweitig ausgeblendet sind.

Wenn Sie disabled auf Formularsteuerelemente anwenden, stellt der Browser eine Standardformatierung bereit und kann mit der :disabled Pseudoklasse formatiert werden. Das inert Attribut bietet keine visuellen Hinweise und hat keine entsprechende Pseudoklasse (obwohl der [inert] Attributselektor übereinstimmt).

Wenn Sie inert für sichtbare Inhalte verwenden, ohne dass Stile die Inaktivität anzeigen, kann dies zu einer schlechten Nutzererfahrung führen. Da inaktive Inhalte für Screenreader-Nutzer nicht verfügbar sind, kann es zu Verwirrung führen, wenn sehende Screenreader-Nutzer Inhalte auf dem Bildschirm sehen, die für die Tools für Barrierefreiheit nicht verfügbar sind. Machen Sie die Inaktivität mit CSS sehr deutlich.

Achten Sie darauf, dass der Fokus niemals auf nicht sichtbare Inhalte verschoben wird. Alles, was außerhalb des Bildschirms gerendert wird und nicht automatisch in die Ansicht kommt, wenn es fokussiert wird, sollte inaktivgemacht werden. Wenn Inhalte ausgeblendet sind aber in die Ansicht kommen, wenn sie fokussiert werden, z. B. ein Link zum Überspringen von Inhalten, müssen sie nicht inaktiv gemacht werden.

Ihr Wissen wird getestet

Testen Sie Ihr Wissen zum Fokus.