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.
Wie wird ein Element beschrieben, das nicht fokussiert werden kann?
Was ist der Fall, wenn das Element ein disabled
-Attribut hat?