Tabindex verwenden

DOM-Reihenfolge mit tabindex ändern

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Die standardmäßige TAB-Reihenfolge, die sich aus der DOM-Position nativer Elemente ergibt, ist praktisch, aber es kann vorkommen, dass Sie die TAB-Reihenfolge ändern möchten, und physisch verschobene Elemente im HTML-Code sind nicht immer eine optimale oder gar praktikable Lösung. In diesen Fällen können Sie mit dem HTML-Attribut tabindex die Tabposition eines Elements explizit festlegen.

Unterstützte Browser

  • 1
  • 12
  • 1,5
  • ≤4

Quelle

tabindex kann auf jedes Element angewendet werden, ist aber nicht unbedingt für jedes Element nützlich. Es verwendet einen Bereich von Ganzzahlwerten. Mit tabindex können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente festlegen, ein ansonsten nicht fokussierbares Element in die TAB-Reihenfolge einfügen und Elemente aus der TAB-Reihenfolge entfernen. Beispiel:

tabindex="0": Fügt ein Element in die natürliche TAB-Reihenfolge ein. Der Fokus des Elements kann durch Drücken der Tab-Taste und durch Aufrufen der focus()-Methode der Fokus erfolgen

<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>

Drücke die Tabulatortaste, um mich zu konzentrieren!

tabindex="-1": Entfernt ein Element aus der natürlichen TAB-Reihenfolge, kann aber weiterhin durch Aufrufen seiner focus()-Methode fokussiert werden

// TODO: DevSite - Code sample removed as it used inline event handlers

// AUFGABE: DevSite - Codebeispiel entfernt, da Inline-Event-Handler verwendet wurden

tabindex="5": Bei einem Tabindex größer als 0 wird das Element an den Anfang der natürlichen TAB-Reihenfolge verschoben. Wenn es mehrere Elemente mit einem Tabindex größer als 0 gibt, beginnt die TAB-Reihenfolge mit dem niedrigsten Wert, der größer als null ist, und arbeitet weiter nach oben. Die Verwendung eines Tabindex größer als 0 wird als Anti-Muster betrachtet.

<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>

Dies gilt insbesondere für Elemente ohne Eingabe wie Überschriften, Bilder oder Artikeltitel. Das Hinzufügen von tabindex zu diesen Arten von Elementen ist kontraproduktiv. Nach Möglichkeit empfiehlt es sich, den Quellcode so anzuordnen, dass die DOM-Sequenz eine logische TAB-Reihenfolge aufweist. Wenn Sie tabindex verwenden, sollten Sie es auf benutzerdefinierte interaktive Steuerelemente wie Schaltflächen, Tabs, Drop-down-Menüs und Textfelder beschränken, d. h. Elemente, für die der Nutzer eine Eingabe erwarten kann.

Es besteht keine Sorge, dass Nutzer von Screenreadern wichtige Inhalte übersehen, da sie kein tabindex haben. Auch wenn der Inhalt sehr wichtig ist, wie z. B. ein Bild, gibt es keinen Grund, ihn fokussierbar zu machen, wenn der Nutzer damit nicht interagieren kann. Nutzer von Screenreadern können den Inhalt eines Bildes trotzdem verstehen, solange du die alt-Attribute richtig unterstützt, auf die wir gleich noch eingehen werden.

Fokus auf Seitenebene verwalten

In diesem Szenario ist tabindex nicht nur nützlich, sondern notwendig. Vielleicht erstellen Sie eine einzelne Seite mit verschiedenen Inhaltsbereichen, die nicht alle gleichzeitig sichtbar sind. Bei dieser Art von Seite ändert sich durch Klicken auf einen Navigationslink der Inhalt, ohne die Seite zu aktualisieren.

In diesem Fall würden Sie den ausgewählten Inhaltsbereich wahrscheinlich identifizieren, ihm einen tabindex von -1 zuweisen, damit er nicht in der natürlichen TAB-Reihenfolge erscheint, und dann seine focus-Methode aufrufen. Diese Technik wird als Verwaltungsfokus bezeichnet und sorgt dafür, dass der wahrgenommene Kontext des Nutzers mit den visuellen Inhalten der Website synchron bleibt.

Fokus auf Komponenten managen

Es ist wichtig, den Fokus zu verwalten, wenn Sie etwas auf der Seite ändern. Manchmal muss der Fokus jedoch auf Steuerelementebene verwaltet werden, z. B. wenn Sie eine benutzerdefinierte Komponente erstellen.

Betrachten Sie das native select-Element. Sie kann einen grundlegenden Fokus erhalten, aber anschließend können Sie mit den Pfeiltasten zusätzliche Funktionen (auswählbare Optionen) einblenden. Wenn Sie ein benutzerdefiniertes select-Element erstellen, sollten Sie die gleichen Verhaltensweisen anbieten, damit Nutzer, die hauptsächlich die Tastatur verwenden, trotzdem mit Ihrem Steuerelement interagieren können.

<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
    <option>Aisle seat</option>
    <option>Window seat</option>
    <option>No preference</option>
</select>

Es ist nicht immer einfach zu wissen, welche Tastaturfunktionen zu implementieren sind. Es gibt jedoch ein hilfreiches Dokument, auf das Sie zurückgreifen können. Im Leitfaden Accessible Rich Internet Applications (ARIA) Authoring Practices finden Sie eine Liste der Komponententypen und der unterstützten Tastaturaktionen. Wir werden später noch ausführlicher auf ARIA eingehen, aber zunächst verwenden wir die Anleitung, um einer neuen Komponente die Tastaturunterstützung hinzuzufügen.

Vielleicht arbeiten Sie an einigen neuen benutzerdefinierten Elementen, die einer Reihe von Optionsfeldern ähneln, aber auf Ihre ganz eigene Weise in Bezug auf Aussehen und Verhalten aussehen.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Informationen zur erforderlichen Tastaturunterstützung finden Sie im ARIA Authoring Practices Guide (in englischer Sprache). Abschnitt 2 enthält eine Liste von Designmustern. Darin befindet sich auch eine Merkmalstabelle für Optionsfeldgruppen. Dies ist die vorhandene Komponente, die dem neuen Element am ehesten entspricht.

Wie Sie der Tabelle entnehmen können, sollten häufig die Pfeiltasten auf der Tastatur unterstützt werden: Aufwärts-, Abwärtspfeil, Links- und Rechtspfeil. Um dieses Verhalten der neuen Komponente hinzuzufügen, verwenden wir eine Technik namens roving tabindex.

W3C-Spezifikations-Auszug für Optionsfelder.

Beim Roving-Tabindex wird tabindex für alle untergeordneten Elemente außer dem aktuell aktiven auf -1 gesetzt.

<radio-group>
    <radio-button tabindex="0">Water</radio-button>
    <radio-button tabindex="-1">Coffee</radio-button>
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Die Komponente verwendet dann einen Tastatur-Event-Listener, um zu bestimmen, auf welche Taste der Nutzer drückt. Wenn dies geschieht, wird der tabindex des zuvor fokussierten untergeordneten Elements auf -1 gesetzt, das tabindex des untergeordneten Elements, auf das der Fokus liegt, auf 0 gesetzt und die Fokus-Methode dafür aufgerufen.

<radio-group>
    // Assuming the user pressed the down arrow, we'll focus the next available child
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Wenn der Nutzer das letzte (oder das erste, je nach Richtung bewegt, in das der Fokus verschoben wird) erreicht, schwenken Sie um und fokussieren das erste (oder letzte) untergeordnete Element noch einmal.

Sie können das fertige Beispiel unten ausprobieren. Untersuchen Sie das Element in den Entwicklertools, um zu beobachten, wie sich der Tabindex von einem Optionsfeld zum nächsten bewegt.

Wasser Kaffee Tee Cola Ingwer-Ale

// AUFGABE: DevSite - Codebeispiel entfernt, da Inline-Event-Handler verwendet wurden

Die vollständige Quelle für dieses Element finden Sie auf GitHub.

Modale und Tastaturfallen

Wenn Sie den Fokus managen, können Sie manchmal in eine Situation geraten, aus der Sie nicht mehr herauskommen können. Nehmen wir ein Autocomplete-Widget, das versucht, den Fokus zu verwalten und das Tabverhalten zu erfassen, aber verhindert, dass der Nutzer es verlässt, bis der Vorgang abgeschlossen ist. Dies wird als Tastaturfalle bezeichnet und kann für Nutzer sehr frustrierend sein. In Abschnitt 2.1.2 der Web AIM-Checkliste wird dieses Problem behandelt. Darin wird festgelegt, dass der Tastaturfokus niemals auf ein bestimmtes Seitenelement beschränkt oder festgehalten sein sollte. Der Nutzer sollte alle Seitenelemente nur über die Tastatur aufrufen und verlassen können.

Seltsamerweise gibt es Situationen, in denen dies sinnvoll ist, z. B. in einem modalen Fenster. Normalerweise möchten Sie nicht, dass Nutzer bei der Anzeige des Dialogfensters auf den dahinter liegenden Inhalt zugreifen. Sie können ein Overlay hinzufügen, um die Seite visuell zu bedecken. Der Tastaturfokus wird dadurch nicht versehentlich außerhalb des modalen Fensters verschoben.

Ein modales Fenster, in dem die Nutzenden aufgefordert werden, ihre Arbeit zu speichern.

In solchen Fällen können Sie eine temporäre Tastatur-Trap implementieren, damit der Fokus nur dann abgefangen wird, wenn das Dialogfenster angezeigt wird, und den Fokus auf das zuvor hervorgehobene Element wiederherstellen, wenn das Dialogfenster geschlossen wird.

Es gibt einige Vorschläge, wie dies für Entwickler vereinfacht werden kann, einschließlich des <dialog>-Elements. Die Browser unterstützen jedoch noch nicht in großem Umfang.

In diesem MDN-Artikel finden Sie weitere Informationen zu <dialog> und in diesem modalen Beispiel finden Sie weitere Informationen zu modalen Fenstern.

Angenommen, ein modales Dialogfeld wird durch ein div-Element dargestellt, das einige Elemente enthält, und ein weiteres div-Element, das ein Hintergrund-Overlay repräsentiert. Gehen wir die grundlegenden Schritte durch, um eine temporäre Tastatur-Trap zu implementieren.

  1. Wählen Sie mit document.querySelector die modalen und Overlay-divs aus und speichern Sie deren Verweise.
  2. Speichern Sie beim Öffnen des Modales einen Verweis auf das Element, das beim Öffnen des Modales im Fokus war, damit Sie dieses Element wieder fokussieren können.
  3. Verwenden Sie einen Keydown-Listener, um Tasten beim Drücken zu erfassen, während das Dialogfenster geöffnet ist. Sie können auch einen Klick auf das Hintergrund-Overlay erfassen und das Dialogfenster schließen, wenn der Nutzer darauf klickt.
  4. Rufen Sie als Nächstes die Sammlung der fokussierbaren Elemente im Modaldialogfeld ab. Das erste und letzte fokussierbare Element fungieren als „Sentinels“, die Sie darüber informieren, wann der Fokus in einer Schleife vorwärts oder rückwärts erfolgen soll, um im Dialogfenster zu bleiben.
  5. Modales Fenster anzeigen und das erste fokussierbare Element fokussieren
  6. Wenn der Nutzer Tab oder Shift+Tab drückt, bewegen Sie den Fokus vor oder zurück, wobei Sie das letzte oder erste Element in einer Schleife wiedergeben.
  7. Schließen Sie das Dialogfenster, wenn der Nutzer Esc drückt. Das ist sehr hilfreich, da Nutzer das Dialogfenster schließen können, ohne nach einer bestimmten Schließen-Schaltfläche zu suchen. Es kommt auch Nutzern zugute, die eine Maus verwenden.
  8. Wenn das modale Fenster geschlossen ist, blenden Sie es und das Hintergrund-Overlay aus und stellen Sie den Fokus auf das zuvor hervorgehobene Element wieder.

Auf diese Weise erhalten Sie ein nutzungsfreundliches, nicht frustrierendes modales Fenster, das von allen effektiv genutzt werden kann.

Weitere Informationen finden Sie in diesem Beispielcode. Sie können sich auch ein Live-Beispiel auf einer ausgeschlossenen Seite ansehen.