Fokus

Interaktive Elemente wie Formularsteuerelemente, Links und Schaltflächen sind standardmäßig fokussierbar und können mit der Tabulatortaste erreicht werden. Tabulierbare Elemente sind Teil der sequenziellen Fokusnavigationsreihenfolge des Dokuments. Andere Elemente sind inaktiv, d. h., sie sind nicht interaktiv. Mit HTML-Attributen ist es möglich, interaktive Elemente inaktiv und inaktive Elemente interaktiv zu machen.

Standardmäßig entspricht die Reihenfolge des Navigationsfokus der visuellen Reihenfolge, also der Reihenfolge im Quellcode. Es gibt HTML-Attribute, mit denen sich diese Reihenfolge ändern lässt, und CSS-Eigenschaften, mit denen sich die visuelle Reihenfolge von Inhalten ändern lässt. Wenn Sie die Tab-Reihenfolge mit HTML oder die visuelle Rendering-Reihenfolge mit CSS ändern, kann dies die Nutzerfreundlichkeit beeinträchtigen.

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

In diesem Beispiel hat der Wert des Attributs tabindex die Tab-Reihenfolge durcheinandergebracht:

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

Durch die flex-flow: row-reverse;-Deklaration wurde die visuelle Reihenfolge umgekehrt. Außerdem wurde die CSS-Eigenschaft order auf das sechste Wort „This“ angewendet, wodurch es visuell verschoben wurde. Die Tabulatorreihenfolge entspricht der Reihenfolge des Codes, die nicht mehr der visuellen Reihenfolge entspricht. Das führt zu Problemen für Tastaturnutzer.

Inerte Elemente interaktiv gestalten

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

Das Attribut tabindex

Das globale Attribut tabindex, das in Attributen eingeführt wurde, ermöglicht es Elementen, die sonst keinen Fokus erhalten könnten, den Fokus zu erhalten, in der Regel mit der Tabulatortaste, daher der Name.

Das Attribut tabindex hat als Wert eine Ganzzahl. Ein negativer Wert macht ein Element fokussierbar, aber nicht tabulierbar. Mit einem tabindex-Wert von 0 wird das Element fokussierbar und tabulierbar. Das Element, auf das es angewendet wird, wird in der Reihenfolge des Quellcodes in die sequenzielle Fokusnavigation aufgenommen. Ein Wert von 1 oder höher macht das Element fokussierbar und per Tabulatortaste erreichbar, fügt es aber einer priorisierten Tabulatorreihenfolge hinzu. Das sollte vermieden werden.

Auf dieser Seite ist die Schaltfläche „Teilen“ <share-action> ein benutzerdefiniertes Element. Mit tabindex="0" wird dieses normalerweise nicht fokussierbare Element in die standardmäßige Tab-Reihenfolge der Tastatur eingefügt:

<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 hat 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 tabulierbar. Das Element kann den Fokus erhalten, z. B. durch HTMLElement.focus(), ist aber nicht Teil der sequenziellen Fokusnavigation. Für nicht tabulierbare, fokussierbare Elemente wird tabindex="-1" verwendet. Wenn Sie einem interaktiven Element tabindex="-1" hinzufügen, kann es nicht mehr mit der Tabulatortaste ausgewählt werden.

Mit der Methode element.focus() können Sie den Fokus auf fokussierbare Elemente setzen. Browser scrollen fokussierte Elemente ins Blickfeld. Vermeiden Sie daher die Verwendung von element.focus({preventScroll:true}), da die Fokussierung auf ein nicht sichtbares Element die Nutzerfreundlichkeit beeinträchtigt.

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

Elemente mit einem tabindex von 1 oder höher werden in eine separate Tab-Reihenfolge aufgenommen. Wie Sie im Codepen sehen, beginnt die Tab-Reihenfolge in einer separaten Sequenz, in der Reihenfolge vom niedrigsten zum höchsten Wert, bevor die Elemente in der regulären Sequenz (kein tabindex festgelegt oder tabindex="0") in der Quellreihenfolge durchlaufen werden:

tabindex mit einem positiven Wert platziert das Element in einer priorisierten Fokusreihenfolge, was zu Chaos bei der Fokusreihenfolge führen kann. Vermeiden Sie es, die DOM-Reihenfolge mit tabindex zu ändern. Geänderte Tabulatorreihenfolgen können nicht nur zu einer schlechten Nutzererfahrung führen, sondern sind auch für Entwickler schwer zu verwalten und zu pflegen.

Das Attribut contenteditable

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

autofocus für interaktive Elemente angeben

Der boolesche Wert autofocus ist zwar ein globales Attribut, das für jedes Element festgelegt werden kann, aber er macht ein inertes Element nicht interaktiv. Wenn die Seite geladen wird, erhält das erste fokussierbare Element mit den autofocus-Attributen den Fokus, sofern es angezeigt wird und nicht in einem <dialog> verschachtelt ist.

Wenn der Fokus automatisch auf Inhalte gesetzt wird, kann das verwirrend sein. Wenn Sie autofocus für ein Formularsteuerelement festlegen, wird es beim Laden der Seite in den sichtbaren Bereich gescrollt. Alle Ihre Nutzer, einschließlich Screenreader-Nutzer und Nutzer mit kleinen Viewports, sehen die Anleitung für das Formular möglicherweise nicht und scrollen möglicherweise sogar am normalerweise sichtbaren Label des Formularsteuerelements vorbei. Das Attribut autofocus ändert die Reihenfolge der sequenziellen Fokusnavigation des Dokuments nicht. Die Elemente in der Sequenz, die vor dem automatisch fokussierten Element stehen, werden übersprungen. Aus diesen Gründen wird davon abgeraten, das Attribut autofocus anzugeben.

Die Empfehlung, autofocus nicht zu verwenden, gilt nicht für das Attribut autofocus innerhalb von <dialog>-Elementen. Wenn ein Dialogfeld geöffnet wird, wird der Fokus des Browsers automatisch auf das erste interaktive Element mit Fokus innerhalb von <dialog> gesetzt. Es ist also nicht erforderlich, einem Element autofocus hinzuzufügen. Wenn Sie sichergehen 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, das für das Schließen-Element <button> festgelegt ist, ermöglicht es, den Fokus zu erhalten, wenn das Dialogfeld geöffnet wird. Als erstes Element im Dialogfeld hätte es ohnehin den Fokus erhalten. Wenn ein Dialogfeld geöffnet wird, erhält standardmäßig das erste fokussierbare Element im Dialogfeld den Fokus, sofern kein anderes Element im Dialogfeld das Attribut autofocus hat.

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 für fokussierbare Elemente verwenden, das Attribut disabled zu unterstützenden Formularsteuerelementen hinzufügen und das globale Attribut inert zu einem Container hinzufügen, werden Elemente nicht mehr tabulierbar. Diese drei Attribute sind NICHT austauschbar.

Negativer tabindex-Wert

Ein tabindex-Attribut mit einem negativen Wert macht ein Element fokussierbar, aber nicht tabulierbar. Das Hinzufügen von tabindex="0" zu einem standardmäßig fokussierbaren Element, einschließlich Links, Schaltflächen, Formularsteuerelementen und Elementen, die contenteditable sind, ist nicht erforderlich. Wenn Sie ein tabindex mit einem negativen Wert hinzufügen, werden normalerweise tabulierbare Elemente aus der sequenziellen Fokusnavigation entfernt.

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

Deaktiviert

Das boolesche Attribut disabled bewirkt, dass die Formularsteuerelemente, auf die es angewendet wird, und ihre untergeordneten Elemente (falls vorhanden) nicht fokussierbar sind. Deaktivierte Formularsteuerelemente können nicht fokussiert werden, empfangen keine Klickereignisse und werden beim Senden des Formulars nicht übertragen.

disabled ist kein globales Attribut. Sie gilt für <button>, <input>, <optgroup>, <option>, <select>, <textarea>, benutzerdefinierte Elemente, die mit Formularen verknüpft sind, und <fieldset>. Wenn die Option auf <optgroup> oder <fieldset> festgelegt ist, werden alle untergeordneten Formularsteuerelemente deaktiviert, mit Ausnahme des Inhalts des ersten <legend> von <fieldset>.

Die Elemente, die disabled unterstützen, können auch mit den Pseudoklassen :disabled und :enabled ausgerichtet werden. Elemente, die mit dem Attribut disabled deaktiviert sind, werden in der Regel mit dem User-Agent-Stylesheet als hellgrau formatiert, auch 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. Es kann nicht auf false festgelegt werden. Wenn Sie ein deaktiviertes Element wieder aktivieren möchten, muss das Attribut entfernt werden, in der Regel mit Element.removeAttribute('disabled').

Mit der Eigenschaft HTMLInputElement.disabled können Sie prüfen, ob eine Eingabe deaktiviert ist. Da disabled kein globales Attribut ist, wird es nicht vom HTMLElement geerbt. Jede unterstützende Element-Schnittstelle, z. B. HTMLSelectElement, HTMLTextareaElement, hat dieselbe schreibgeschützte Eigenschaft.

Das Attribut disabled 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 aufgerufen werden können. Sie werden auch aus dem Bedienungshilfenbaum entfernt. inert kann auf jedes Element angewendet werden, wird aber in der Regel für Inhaltsabschnitte wie Offscreen- oder anderweitig verborgene Inhalte verwendet.

Wenn Sie disabled auf Formularsteuerelemente anwenden, stellt der Browser Standardformatierungen bereit, die mit der Pseudoklasse :disabled formatiert werden können. Das Attribut inert bietet keine visuellen Hinweise und hat keine entsprechende Pseudoklasse (obwohl die [inert]-Attributauswahl übereinstimmt).

Die Verwendung von inert für sichtbare Inhalte ohne Stile, die die Inaktivität angeben, kann zu einer schlechten Nutzererfahrung führen. Da inerte Inhalte für Screenreader-Nutzer nicht verfügbar sind, kann es zu Verwirrung kommen, wenn sehende Screenreader-Nutzer Inhalte auf dem Bildschirm sehen, die für die Bedienungshilfen nicht verfügbar sind. Inertheit mit CSS deutlich machen.

Achten Sie darauf, dass der Fokus niemals auf nicht sichtbare Inhalte verschoben wird. Alle Elemente, die außerhalb des Bildschirms gerendert werden und nicht automatisch in den Fokus geraten, sollten inert sein. Wenn Inhalte ausgeblendet sind, aber bei Fokussierung sichtbar werden, z. B. über einen Link zum Überspringen von Inhalten, müssen sie nicht inaktiv gemacht werden.

Wissen testen

Testen Sie Ihr Wissen zum Fokus.