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