Fokus

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

Standardmäßig entspricht die Fokusreihenfolge der Navigation der visuellen Reihenfolge, d. h. der Reihenfolge des Quellcodes. Es gibt HTML- Attribute, die diese Reihenfolge ändern können, und CSS-Eigenschaften, die die visuelle Reihenfolge von Inhalten ändern können. Tabulatortaste ändern mit HTML oder visueller Rendering-Reihenfolge mit CSS kann sich negativ auf die Nutzererfahrung auswirken.

Ändern Sie nicht die wahrgenommene und tatsächliche TAB-Reihenfolge mit CSS und HTML. Wie die folgenden beiden Beispiele zeigen, die von der visuell erwarteten Reihenfolge abweichen, sind für die Nutzenden verwirrend und beeinträchtigen die Nutzererfahrung.

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

In diesem Beispiel hat CSS eine Abweichung zwischen der TAB-Reihenfolge und der visuellen Reihenfolge des Inhalts 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 der Text optisch in einem Wort. Bei der Tabulatortaste handelt es sich um die Reihenfolge des Codes, die nicht mehr mit der visuellen Reihenfolge übereinstimmt, wodurch eine Verbindungstrennung entsteht. für Tastaturnutzer.

Inaktive Elemente interaktiv machen

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

Das Attribut tabindex

Das globale Attribut tabindex, eingeführt in Attribute aktiviert Elemente, die andernfalls nicht hervorgehoben werden könnten, mit der Tabulatortaste, daher der Name.

Das Attribut tabindex verwendet als Wert eine Ganzzahl. Ein negativer Wert macht ein Element fokussierbar, aber nicht mit der Tabulatortaste möglich. A Durch den tabindex-Wert von 0 ist das Element fokussierbar und mit der Tabulatortaste möglich. Es wird das Element hinzugefügt, auf das es auf die sequenzielle Seite angewendet wird. Fokus-Navigationsreihenfolge in Quellcodereihenfolge festlegen. Bei einem Wert von 1 oder höher ist das Element fokussierbar und mit der Tabulatortaste möglich. fügt es jedoch einer priorisierten Tabulatortaste hinzu und sollte, wie wir oben gesehen haben, vermieden werden.

Auf dieser Seite ist die Freigabeschaltfläche (<share-action>) ein benutzerdefiniertes Element. Mit tabindex="0" wird dies nicht normal fokussierbar, -Element in die Standard-Tab-Reihenfolge der Tastatur ändern:

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

Es gibt ein weiteres benutzerdefiniertes Element auf dieser Seite: 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 mit der Tabulatortaste möglich. Das Element kann (z. B. über HTMLElement.focus()), aber er ist nicht Teil der sequenziellen Fokusnavigationsreihenfolge. Für nicht tabulierbare, fokussierbare Elemente wird normalerweise tabindex="-1" verwendet. Beachten Sie, dass Wenn Sie einem interaktiven Element tabindex="-1" hinzufügen, kann es nicht mehr mit der Tabulatortaste aufgerufen werden.

Mit der Methode element.focus() kann der Fokus auf fokussierbaren Elementen. Beachten Sie, dass die Browser fokussierte Elemente in den sichtbaren Bereich scrollen. Vermeiden Sie deshalb die Verwendung von element.focus({preventScroll:true}), da der Fokus auf ein nicht sichtbares Element zu einer schlechten Nutzererfahrung führt.

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 einem tabindex von 1 oder höher sind in einer separaten Tabsequenz enthalten. Wie Sie im Codepen sehen werden, Die Tabulatortaste beginnt in einer separaten Reihenfolge, in der Reihenfolge vom niedrigsten zum höchsten Wert, bevor sie die Elemente in der regulären Sequenz durchlaufen (kein tabindex festgelegt oder tabindex="0") in Quellenreihenfolge:

tabindex mit einem positiven Wert platziert das Element in eine priorisierte Fokussequenz, was zu Chaos der Fokusreihenfolge führen kann. Vermeiden Sie es, die DOM-Reihenfolge mit tabindex zu ändern. Eine geänderte Tabulatortaste kann nicht nur dazu führen, sind sie für Entwickelnde schwer zu verwalten und zu verwalten.

Das Attribut contenteditable

Das Attribut contenteditable wurde bereits besprochen. Wenn Sie contenteditable="true" für ein Element festlegen, ist es bearbeitbar. fokussierbar und Teil der TAB-Reihenfolge. Das Fokusverhalten ähnelt der Einstellung von tabindex="0", ist aber nicht dasselbe. Verschachtelte Daten contenteditable-Elemente sind fokussierbar, aber nicht mit der Tabulatortaste möglich. Wenn du ein verschachteltes contenteditable-Element als Tabulatortaste verwenden möchtest, füge tabindex="0", Dadurch wird sie der sequenziellen Fokusnavigationsreihenfolge hinzugefügt.

Interaktive Elemente im Fokus

Das Attribut autofocus

Der boolesche Wert autofocus ist ein globales Attribut der für ein beliebiges Element festgelegt werden kann, wird ein inaktives Element nicht interaktiv. Beim Laden der Seite wird das erste fokussierbare Element mit dem Attribut autofocus erhält den Fokus, solange dieses Element angezeigt und nicht in einem <dialog> verschachtelt ist.

Das automatische Festlegen des Fokus auf Inhalte kann verwirrend sein. Wenn Sie autofocus für ein Formularsteuerelement festlegen, scrollt beim Seitenaufbau in den sichtbaren Bereich. Alle Nutzer, einschließlich Screenreader-Nutzer und Nutzer mit kleinen Darstellungsbereichen, "sehen" die Anweisungen für das Formular durch, möglicherweise sogar durch Scrollen an dem normalerweise sichtbaren Label des Formularsteuerelements vorbei. Das autofocus ändert nichts an der sequenziellen Fokusnavigationsreihenfolge des Dokuments. Die Elemente in der Sequenz vor den automatisch fokussierte Elemente übersprungen. Aus diesen Gründen raten wir davon ab, das Attribut autofocus anzugeben.

Die Ausnahme von „autofocus nicht verwenden“ wird empfohlen, das Attribut autofocus in <dialog>-Elemente einzubinden. Wenn ein Dialogfeld geöffnet wird, fokussiert der Browser automatisch auf das erste fokussierbare interaktive Element in <dialog>. Das bedeutet, dass autofocus zu einem Element nicht erforderlich ist. Wenn Sie sicherstellen möchten, dass ein bestimmtes interaktives Element innerhalb des Dialogfelds 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 auf dem <button> zum Schließen festgelegt ist, sorgt dafür, dass es beim Öffnen des Dialogfelds hervorgehoben wird. Als erstes Element im Dialogfeld angezeigt wurde, wäre sie in jedem Fall im Fokus gewesen. Standardmäßig wird beim Öffnen eines Dialogfelds das erste fokussierbare Element innerhalb Das Dialogfeld wird fokussiert, es sei denn, für ein anderes Element innerhalb des Dialogfelds wurde 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. Einschließlich negativer tabindex auf fokussierbare Elemente, Hinzufügen des disabled-Attributs zu unterstützenden Formularsteuerelementen und Hinzufügen des globalen inert-Attributs zu einem Container alle Elemente nicht mehr mit Tabulatoren anzeigen. Diese drei Attribute sind NICHT austauschbar.

Negativer tabindex-Wert

Wie bereits erwähnt, kann ein Element mit einem tabindex-Attribut mit einem negativen Wert fokussierbar, aber nicht mit der Tabulatortaste aufgerufen werden. Beim Hinzufügen tabindex="0" auf ein standardmäßig fokussierbares Element, einschließlich Links, Schaltflächen, Formularsteuerelementen und contenteditable-Elementen ist nicht notwendig. Enthält ein tabindex einen negativen Wert, werden normalerweise mit der Tabulatortaste steuerbare Elemente aus dem sequenziellen Fokus entfernt. Navigationsreihenfolge angeben.

Ein negativer tabindex-Wert verhindert, dass Tastaturnutzer sich auf interaktive Elemente konzentrieren können. Das Element wird jedoch nicht deaktiviert. Pointer können die Nutzenden sich weiterhin auf das Element konzentrieren. Verwenden Sie das Attribut disabled, um ein Element zu deaktivieren.

Deaktiviert

Durch das boolesche Attribut deaktiviert werden die Formularsteuerelemente aktiviert. und ggf. die Nachfolgerelemente nicht fokussierbar. Deaktivierte Formularsteuerelemente können nicht hervorgehoben werden, erhalten keine Click-Events. und werden nicht direkt bei der Formulareinreichung eingereicht. Hinweis: disabled ist kein globales Attribut. Sie gilt für <button>, <input>, <optgroup>, <option>, <select>, <textarea>, benutzerdefinierte Elemente, die dem Formular zugeordnet sind, und <fieldset>. Wenn sie für <optgroup> oder <fieldset> festgelegt werden, werden mit Ausnahme des Inhalts der ersten <legend> der <fieldset> alle untergeordneten Formularsteuerelemente deaktiviert.

Dieselben Elemente, die disabled unterstützen, können auch mit dem :disabled für das Targeting verwendet werden. und :enabled-Pseudoklassen. Elemente, die mit der Funktion disabled-Attribute werden über das User-Agent-Stylesheet in der Regel hellgrau dargestellt, auch wenn ein accent-color festgelegt ist.

Da es sich um ein boolesches Attribut handelt, wird das ansonsten aktivierte Element deaktiviert, wenn das Attribut vorhanden ist. Sie können den Wert nicht auf false festlegen. Um ein deaktiviertes Element wieder zu aktivieren, muss das Attribut entfernt werden, in der Regel über Element.removeAttribute('disabled').

Mit der Eigenschaft HTMLInputElement.disabled können Sie prüfen, wenn eine Eingabe deaktiviert ist. Da disabled kein globales Attribut ist, wird es nicht aus dem HTMLElement übernommen, aber alle unterstützenden wie HTMLSelectElement, HTMLTextareaElement hat dasselbe schreibgeschützte Attribut.

Das Attribut disabled gilt nicht für normalerweise inert-Elemente, die über tabindex oder contenteditable fokussierbar gemacht werden. Er gilt auch nicht für das <form>-Element selbst. Sie können diese mit dem globalen Attribut inert deaktivieren.

Das Attribut inert

Wenn einem Element das globale boolesche Attribut inert hinzugefügt wird, werden dieses Element und der gesamte verschachtelte Inhalt deaktiviert – weder anklickbar oder per Tabulatortaste aufrufbar und aus dem Baum für Barrierefreiheit entfernt wurden. inert kann zwar auf jedes Element angewendet werden, ist im Allgemeinen aber wird für Inhaltsbereiche wie nicht sichtbare oder anderweitig ausgeblendete Inhalte verwendet.

Beim Anwenden von disabled auf Formularsteuerelemente stellt der Browser einen Standardstil bereit und kann mit der :disabled formatiert werden. Pseudoklasse. Das Attribut inert liefert keine visuellen Indikatoren und hat keine passende Pseudoklasse (aber die Attributauswahl [inert] stimmt überein).

Die Verwendung von inert für sichtbare Inhalte ohne Stile deutet darauf hin, dass die Inaktivität zu einer schlechten Nutzererfahrung führen kann. Als inaktiver Inhalt nicht für Nutzer von Screenreadern verfügbar ist, kann dies verwirrend sein, wenn sehende Screenreader-Nutzer Inhalte auf dem Bildschirm sehen. das für die Bedienungshilfen nicht verfügbar ist. Machen Sie Leerlauf über CSS deutlich.

Achten Sie darauf, dass der Fokus nie auf nicht sichtbare Inhalte bewegt wird. Alles, was außerhalb des Bildschirms gerendert wird und nicht automatisch im Fokus stehen, inert gesetzt werden. Wenn Inhalte ausgeblendet sind, erscheint aber im Fokus, z. B. über den Link Zum Inhalt springen auf dieser Seite, muss es nicht inaktiv werden.

Wissen testen

Wissen testen

Testen Sie Ihr Wissen über den Fokus.