Anfrage nach Entwicklerfeedback: Fokusgruppe

Jacques Newman

Veröffentlicht am 5. März 2026

Das HTML-Attribut focusgroup ist eine vorgeschlagene deklarative Methode, um zusammengesetzten Widgets wie Symbolleisten, Tablisten, Menüs und Listenfeldern die Navigation mit den Pfeiltasten der Tastatur hinzuzufügen, ohne dass JavaScript für roving-tabindex geschrieben werden muss. Ein Attribut ersetzt Hunderte von Zeilen Boilerplate-Code. Wir möchten Ihr Feedback, bevor diese Funktion eingeführt wird.

Probieren Sie es aus und geben Sie uns Feedback

Sie können focusgroup noch heute in Chrome, Edge und anderen Chromium-Browsern ausprobieren. Aktivieren Sie die Funktion dazu auf eine der folgenden Arten:

1. Lokale Tests:Öffnen Sie im Browser die Seite about://flags und aktivieren Sie das Flag Experimental Web Platform features (Experimentelle Webplattformfunktionen). Alternativ können Sie den Browser über die Befehlszeile mit dem Befehlszeilenparameter --enable-blink-features=Focusgroup starten.
2. Origin-Trial:Registrieren Sie sich für den Focusgroup-Origin-Trial, um ihn auf Ihrer Website mit echten Nutzern zu testen.

Sehen Sie sich dann die interaktiven Demos an, um jedes Muster in Aktion zu sehen.

Wir benötigen Ihre Unterstützung. Reichen Sie ein Problem für die Fokusgruppe ein, um uns Ihre Meinung mitzuteilen.

Dies ist ein browserübergreifendes Projekt:Der Vorschlag stammt von Microsoft über die OpenUI Community Group und wird von Google unterstützt. Die API-Form kann sich basierend auf Ihrem Feedback ändern. Sehen wir uns an, welches Problem mit der Fokusgruppe gelöst wird und wie die API funktioniert.

Das Problem: Manuelles Roving Tabindex

Wenn Sie schon einmal eine Symbolleiste, Tabliste, ein Menü oder eine Listbox erstellt haben, haben Sie eine Version dieses Codes geschrieben. Im ARIA Authoring Practices Guide (APG) wird empfohlen, dass zusammengesetzte Widgets einen einzelnen Tabstopp präsentieren und Nutzer mit den Pfeiltasten zwischen Elementen wechseln können. Dieses Muster wird als „roving tabindex“ bezeichnet. Viele UI-Frameworks implementieren dies von Grund auf neu:

<div role="toolbar" aria-label="Text formatting" id="toolbar">
  <button type="button" tabindex="0">Bold</button>
  <button type="button" tabindex="-1">Italic</button>
  <button type="button" tabindex="-1">Underline</button>
  <button type="button" tabindex="-1">Strikethrough</button>
</div>

Ab hier müssen Entwickler JavaScript verwenden, das auf Pfeiltasten reagiert, um den Fokus zu verschieben, und das tabindex-Attribut für alle Elemente anpassen. Dies ist die vereinfachte Version. Eine Produktionsimplementierung muss auch Folgendes berücksichtigen:

• Schreibmodus und RTL:Die Richtung der Pfeiltasten wird an die Richtung des Inhalts angepasst.
• Fokus auf das zuletzt fokussierte Element zurücksetzen:Wenn ein Nutzer mit der Tabulatortaste zurückkehrt, wird der Fokus auf das zuvor aktive Element zurückgesetzt.
• Deaktivierte und ausgeblendete Elemente:Sie werden bei der Navigation übersprungen.
• Dynamische Elemente:Aktualisieren Sie den gleitenden Index, wenn Elemente hinzugefügt oder entfernt werden.

Die meisten UI-Bibliotheken, darunter React, Angular CDK und Fluent UI, enthalten jeweils eine eigene Version dieser Logik. Das ist viel doppelter Aufwand für etwas, das ein Plattform-Primitive sein könnte.

Die Lösung: das Attribut focusgroup

Mit focusgroup sieht die Symbolleiste so aus:

<div focusgroup="toolbar" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
  <button type="button">Strikethrough</button>
</div>

Live ausprobieren: Toolbar Pattern > Basic Toolbar (Symbolleistenmuster > Einfache Symbolleiste). Das war's. Kein JavaScript für die Navigation mit den Pfeiltasten. Keine manuelle Verwaltung von tabindex erforderlich. Der Browser übernimmt jetzt Folgendes für Sie:

• Navigation mit Pfeiltasten:Sie können zwischen Elementen wechseln, wobei der Schreibmodus und die Richtung berücksichtigt werden.
• Ein einzelner Tabstopp:Der Browser fasst die beteiligten Elemente automatisch in einem Tabstopp zusammen. Entwickler müssen tabindex="-1" für nicht aktive Artikel nicht festlegen.
• Speicher des zuletzt fokussierten Elements:Wenn ein Nutzer die Fokusgruppe verlässt und zurückkehrt, wird der Fokus auf das Element zurückgesetzt, das er verlassen hat.
• ARIA-Semantik:Der Browser stellt geeignete Rollen (z. B. role="toolbar") basierend auf dem Verhalten bereit, das bei der Verwendung generischer Elemente ausgewählt wurde.

Entwickler behalten nur die Logik, die für ihre Funktionen eindeutig ist, z. B. das Umschalten des gedrückten Status, das Öffnen von Menüs, die Verwaltung der Auswahl oder benutzerdefinierte Befehle.

API-Übersicht

Das Attribut focusgroup akzeptiert eine durch Leerzeichen getrennte Liste von Tokens. Das erste Token ist immer ein Verhaltenstoken, das das Widget-Muster deklariert. Optionale Modifizierertokens folgen: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".

Verhaltenstokens

Das Verhaltenstoken ist erforderlich, sofern Sie nicht none verwenden, um eine Fokusgruppe auf einer übergeordneten Ebene zu deaktivieren. Es deklariert das zusammengesetzte Widget-Muster und sorgt dafür, dass die richtigen Rollen abgeleitet werden können, wenn sie nicht anderweitig angegeben sind. Die Tokens folgen den Mustern, die in der Anleitung zu Aria-Authoring-Praktiken beschrieben sind, und sind in der folgenden Tabelle aufgeführt:

Weitere Informationen zur Funktionsweise der Rollenzuordnung

Achsenbeschränkung (inline und block)

Wenn das ausgewählte Verhalten keine Standardmodifikatoren hat, können Sie den Fokus mit allen vier Pfeiltasten verschieben. Sie können die Navigation auf eine einzelne logische Achse beschränken, indem Sie den Modifikator inline oder block verwenden:

• inline: Die Fokusgruppe reagiert nur auf die Pfeiltasten auf der Inline-Achse, in den meisten englischsprachigen Kontexten links und rechts (horizontal, von oben nach unten).
• block: Die Fokusgruppe reagiert nur auf die Pfeiltasten auf der Blockachse, in den meisten englischsprachigen Kontexten auf die Auf- und Ab-Pfeiltasten (horizontal, von oben nach unten).

Die Achsenbeschränkung ist an die logischen CSS-Eigenschaften angepasst und wird automatisch an den Schreibmodus und die Richtung angepasst.

Wrap-around-Navigation

Standardmäßig stoppt die Navigation mit den Pfeiltasten an den Rändern der Fokusgruppe. Fügen Sie den Modifikator wrap hinzu, um vom letzten Element zurück zum ersten und vom ersten zurück zum letzten zu wechseln. Wenn ein Verhalten standardmäßig umbrochen wird, verwenden Sie den Modifikator nowrap, um dieses Verhalten zu deaktivieren.

Live ausprobieren: Tablist Pattern > Horizontal Tablist with Wrapping (Tabellenmuster > Horizontale Tabellenliste mit Umbruch). Wenn in diesem Beispiel der Fokus auf dem Tab Häufig gestellte Fragen liegt und der Nutzer die Rechtspfeiltaste drückt, wird der Fokus wieder auf den Tab Übersicht verschoben.

Das Attribut focusgroupstart

Mit dem Attribut focusgroupstart wird festgelegt, welches Element den Fokus erhält, wenn zum ersten Mal (oder jedes Mal, wenn der Speicher deaktiviert ist) mit der Tabulatortaste in eine Fokusgruppe gewechselt wird:

<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
  <button type="button">First</button>
  <button type="button" focusgroupstart>Middle (Entry)</button>
  <button type="button">Last</button>
</div>

Sowohl Tab als auch Umschalttaste + Tabulatortaste führen zu „Mitte (Eingabe)“, da focusgroupstart verwendet wird und der Speicher mit dem Modifikator nomemory deaktiviert ist. Live ausprobieren: Symbolleistenmuster > Einstiegspunkt mit focusgroupstart.

„Informationen merken“ deaktivieren (nomemory)

Standardmäßig merken sich Fokusgruppen das zuletzt fokussierte Element und stellen es beim erneuten Aufrufen mit der Tabulatortaste wieder her. Bei Mustern, bei denen der Fokus immer zu einem festen Einstiegspunkt zurückkehren soll (wie in der vorherigen Demo), verwenden Sie den Modifizierer nomemory im Attribut „focusgroup“, um ihn zu deaktivieren.

Dieser Modifikator kann auch mit der programmatischen Bewegung von focusgroupstart kombiniert werden, um die vollständige Kontrolle über das Element zu erhalten, das beim Aufrufen der Gruppe fokussiert wird. Der Speicher wird gelöscht, wenn das gespeicherte Element nicht mehr verfügbar ist, z. B. wenn es entfernt, ausgeblendet, deaktiviert, inaktiv oder aus der Fokusgruppe ausgeschlossen wird.

Deaktivieren (focusgroup="none")

Verwenden Sie focusgroup="none", um ein Element und seinen untergeordneten Baum aus der Pfeiltasten-Navigation einer übergeordneten Fokusgruppe auszuschließen. Das deaktivierte Element und sein Unterbaum bleiben über die Tabulatortaste erreichbar, werden aber mit den Pfeiltasten übersprungen:

<div focusgroup="toolbar" aria-label="Segmented toolbar">
  <button type="button">New</button>
  <button type="button">Open</button>
  <button type="button">Save</button>
  <span focusgroup="none">
    <button type="button">Help</button>
    <button type="button">Shortcuts</button>
  </span>
  <button type="button">Close</button>
  <button type="button">Exit</button>
</div>

Mit der Rechtspfeiltaste wird zu „Neu“, dann zu „Öffnen“, „Speichern“, „Schließen“ und „Beenden“ navigiert. Die Schaltflächen „Hilfe“ und „Tastenkombinationen“ werden dabei übersprungen. Nutzer können aber weiterhin mit der Tabulatortaste in den Hilfebereich wechseln, um auf diese Schaltflächen zuzugreifen. Live ausprobieren: Zusätzliche Konzepte > Opt-out-Segmente mit focusgroup="none".

Häufige Muster

Tablist

Eine Tab-Steuerung mit Pfeiltasten-Navigation zwischen den Tabs.

<div focusgroup="tablist nomemory" aria-label="Sections">
  <button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
  <button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
  <button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
  <button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>

Live ausprobieren: Tablist Pattern > Horizontal Tablist with Wrapping (Tabellenmuster > Horizontale Tabellenliste mit Umbruch).

Worauf zu achten ist:

• Das Attribut focusgroupstart befindet sich auf dem Tab Ausgewählt. Der Fokus wird also immer darauf gesetzt.
• Der Modifier nomemory sorgt dafür, dass der Nutzer immer auf dem ausgewählten Tab landet, auch wenn er zuvor einen anderen Tab im Fokus hatte.
• Der Modifikator inline schränkt die Pfeilnavigation auf die Tasten für links und rechts ein. Dies entspricht dem erwarteten Verhalten, das im APG-Tabmuster beschrieben wird.
• Mit dem Modifikator wrap können Nutzer die Pfeiltasten kontinuierlich auf allen Tabs verwenden.
• Der aus Gründen der Übersichtlichkeit ausgelassene Entwicklercode übernimmt die eigentliche Auswahl: Er aktualisiert aria-selected, ändert die Sichtbarkeit des Bereichs und verschiebt das Attribut focusgroupstart bei einer Änderung der Auswahl.

Menü und Menüleiste

Ein einfaches vertikales Menü mit Auf- und Abwärtspfeilen zur Navigation.

<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
    <button type="button" class="menu-item">New</button>
    <button type="button" class="menu-item">Open…</button>
    <button type="button" class="menu-item">Save</button>
    <button type="button" class="menu-item">Exit</button>
</div>

Live ausprobieren: Menu and Menubar Pattern > Simple Vertical Menu. Mit dem block-Modifikator kann nur mit den Auf- und Abwärtspfeiltasten zwischen Elementen gewechselt werden. Die Links- und Rechtspfeiltasten können für von Ihnen definiertes Verhalten verwendet werden, z. B. zum Öffnen von Untermenüs. Bei einer Menüleiste mit verschachtelten Untermenüs ist jede Ebene eine unabhängige Fokusgruppe. Live ausprobieren: Menu and Menubar pattern > Menubar with Popover Submenus

<ul role="menubar" focusgroup="menubar"
     aria-label="Application Menu" class="menubar">
    <li role="none">
        <button role="menuitem" type="button" class="menubar-item"
             aria-haspopup="menu" aria-expanded="false"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu"
             id="filemenu" popover aria-label="File submenu" class="submenu">
            <li role="none"><button type="button" class="submenu-item"
                 autofocus>New</button></li>
            <li role="none"><button type="button" class="submenu-item">Open</button></li>
            <li role="none"><button type="button" class="submenu-item">Save</button></li>
        </ul>
    </li>
    <!-- More menu items... -->
</ul>

Live ausprobieren: Menu and Menubar Pattern > Menubar with Popover Submenus. Während in der Menüleiste der inline-Modifikator für die Navigation nach links und rechts verwendet wird, wird in den Untermenüs der block-Modifikator für die Navigation nach oben und unten verwendet. Geschachtelte Fokusgruppen sind völlig unabhängig und beeinträchtigen sich nicht gegenseitig.

Optionsfeldgruppe

Eine benutzerdefinierte Optionsfeldgruppe mit Pfeiltastennavigation und vollständiger Styling-Kontrolle.

<div focusgroup="radiogroup" aria-label="Favorite color">
  <span aria-checked="false" tabindex="0">Red</span>
  <span aria-checked="false" tabindex="0">Green</span>
  <span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
  <span aria-checked="false" tabindex="0">Purple</span>
</div>

Live ausprobieren: Radio Group Pattern > Comparison: Native versus Focusgroup.

Das Attribut focusgroup übernimmt die Pfeiltastennavigation. Sie müssen jedoch den Auswahlcode implementieren. In dieser Demo wird der Status „checked“ (aktiviert) mit JavaScript-Code verwaltet (über das Attribut aria-checked).

Wichtige Konzepte

Teilnahme an Fokusgruppen

Alle sequenziell fokussierbaren untergeordneten Elemente des Elements, für das focusgroup auf ein gültiges Verhalten festgelegt ist, werden als Teil dieser Fokusgruppe betrachtet. Das bedeutet, dass Elemente mit einem negativen tabindex nicht berücksichtigt werden, aber nativ fokussierbare Elemente wie <button> sowie Elemente, für die Sie ein nicht negatives tabindex angegeben haben.

Tabstopp

Sie müssen keine tabindex-Werte verwalten. Auch wenn mehrere untergeordnete Elemente von Natur aus tabulierbar sind (z. B. mehrere <button>-Elemente), werden sie durch „focusgroup“ in einem einzigen Tabstopp zusammengefasst. Der Browser bestimmt, welches Element zu einem bestimmten Zeitpunkt per Tabulator erreichbar ist. Probieren Sie es live aus: Toolbar Pattern > No tabindex Management Needed.

Speicher für zuletzt fokussierte

Wenn ein Nutzer standardmäßig die Tabulatortaste drückt, um eine Fokusgruppe zu verlassen, und später wieder die Tabulatortaste drückt, wird der Fokus auf das zuletzt fokussierte Element zurückgesetzt. Das ist besonders wichtig bei großen Listen und Symbolleisten, damit Nutzer nicht den Überblick verlieren. Verwenden Sie den Modifikator nomemory, um dieses Verhalten zu deaktivieren, wenn der Fokus immer auf das erste Element zurückgesetzt werden soll oder wenn Sie focusgroupstart verwenden, um das Element zu steuern, das anfangs den Fokus erhält.

Verschachtelte Fokusgruppen

Mit jeder Fokusgruppendeklaration wird ein unabhängiger Bereich erstellt. Eine verschachtelte Fokusgruppe wird automatisch von der Pfeilnavigation des übergeordneten Elements ausgeschlossen. Verwenden Sie die Tabulatortaste, um zwischen Fokusgruppen zu wechseln, und die Pfeiltasten, um innerhalb der aktuellen Fokusgruppe zu navigieren. Live ausprobieren: Zusätzliche Konzepte > Geschachtelte Fokusgruppen.

Unterstützung von Shadow DOM

„Focusgroup“ wird standardmäßig über Shadow-DOM-Grenzen hinweg angewendet. Eine Fokusgruppe, die auf einem Shadow-Host deklariert wird, enthält fokussierbare Elemente im Shadow-Tree dieses Hosts. Wenn Sie die Funktion deaktivieren möchten, können Sie focusgroup="none" im Shadow-Baum Ihrer Komponente verwenden.

Konfliktbehandlung für Schlüssel

Einige Elemente in einer Fokusgruppe, z. B. <input>, <textarea> und andere Steuerelemente, verwenden die Pfeiltasten für eigene Zwecke. Wenn es einen Konflikt zwischen den Navigationstasten der Fokusgruppe und dem Verhalten der Pfeiltasten eines nativen Elements gibt:

• Pfeiltasten werden vom interaktiven Element verwendet (z. B. für die Bewegung des Textcursors) und die Focusgroup-Funktion greift nicht ein.
• Mit Tabulatortaste oder Umschalttaste + Tabulatortaste wird ein Standardmechanismus zum Beenden bereitgestellt, mit dem ein Nutzer die Tabulatortaste verwenden kann, um den Fokus wieder auf die Fokusgruppe zu richten.

Diese Escape-Verhaltensweisen gelten nur, wenn ein tatsächlicher Tastaturkonflikt vorliegt. Nicht in Konflikt stehende Achsen sind davon nicht betroffen. Sie können preventDefault() auch für keydown-Ereignisse aufrufen, um das Verhalten der Pfeiltasten der Fokusgruppe für bestimmte Elemente zu überschreiben. Das bedeutet, dass Sie Eingaben und Textbereiche in eine Focusgroup einfügen können, ohne dass das Verhalten beeinträchtigt wird.

Wenn Sie Ihren eigenen Elementen, die Teil einer Fokusgruppe sind, Key-Handler hinzufügen, sollten Sie einen ähnlichen Escape-Mechanismus bereitstellen, damit Nutzer auf den Rest der Gruppe zugreifen können.

Erkennung von Nachkommen in großer Tiefe

Fokusgruppen-Elemente müssen keine direkten untergeordneten Elemente des Fokusgruppen-Containers sein.

Der Browser berücksichtigt alle sequenziell fokussierbaren untergeordneten Elemente (nicht negative tabindex) in der Fokusgruppe, sofern sie sich nicht in einer verschachtelten Fokusgruppe befinden oder mit focusgroup="none" deaktiviert wurden.

<div focusgroup="toolbar" aria-label="Nested wrappers">
  <div>
    <span>
      <button type="button">Alpha</button>
    </span>
    <span>
      <button type="button">Beta</button>
    </span>
    <span>
      <button type="button">Gamma</button>
    </span>
  </div>
</div>

Die Navigation mit den Pfeiltasten funktioniert, obwohl die Schaltflächen in den Wrappern <div> und <span> verschachtelt sind. Es gibt keine Anforderung für eine flache Liste. Wrapper-Elemente für das Styling sind also in Ordnung.

Live ausprobieren: Zusätzliche Konzepte > Tiefe untergeordnete Elemente.

Einbindung in die Property reading-flow

Sowohl die sequenzielle (Tab) als auch die gerichtete (Pfeiltaste) Navigation berücksichtigen die CSS-Eigenschaft reading-flow, sofern vorhanden, und folgen der visuellen Leserichtung anstelle der DOM-Quellreihenfolge.

So wird sichergestellt, dass die Navigation mit den Pfeiltasten dem Layout entspricht, das Nutzer auf dem Bildschirm sehen.

<div focusgroup="toolbar" aria-label="Visual order"
     style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
  <button type="button">A (DOM first)</button>
  <button type="button">B (DOM second)</button>
  <button type="button">C (DOM third)</button>
</div>

Die DOM-Reihenfolge ist A, B, C, die visuelle Reihenfolge ist jedoch C, B, A, da im Layout flex-direction: row-reverse verwendet wird. Da im Code jedoch auch reading-flow: flex-visual verwendet wird, ist die Leseanordnung wieder A, B, C und die Fokusgruppe entspricht dieser Reihenfolge.

Wenn Sie die Tabulatortaste drücken, wird zuerst C fokussiert. Wenn Sie dann den Rechtspfeil drücken, wird B und dann A fokussiert. Live ausprobieren: Zusätzliche Konzepte > CSS-Leseflussintegration.

Bedienungshilfen

ARIA-Rolleninferenz

In einer Fokusgruppe wird das Verhaltenstoken vom Browser verwendet, um eine Mindestrolle für den Container und die zugehörigen Elemente abzuleiten. Wenn das Attribut focusgroup für ein Element mit einer generischen Rolle festgelegt ist, wird die richtige Rolle basierend auf dem ausgewählten Verhalten angewendet. Die Rollen der zugehörigen Elemente des Elements, die eine generische Rolle haben, oder der Schaltflächen, die keine von Ihnen angegebene Rolle haben, werden entsprechend abgeleitet. Beispiel:

<div focusgroup="tablist">
  <button>Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

Es wird die folgende Baumansicht für Barrierefreiheit erstellt, obwohl für die Schaltflächen keine Rollen definiert wurden:

+   tablist
  |
  +   tab
  |
  +   tab
  |
  +   tab

Sie können das Verhalten jederzeit steuern, indem Sie die Rolle direkt festlegen.

Berücksichtigung der Barrierefreiheit

Achten Sie darauf, das Verhalten zu berücksichtigen, das Sie beim Erstellen einer Fokusgruppe ausgewählt haben.

Die Verwendung der Fokusgruppe sollte so genau wie möglich dem von Ihnen angegebenen Verhalten entsprechen. Das ist wichtig, damit Nutzer, die auf Bedienungshilfen angewiesen sind, Inhalte aufrufen und benutzerdefinierte Steuerelemente verwenden können.

Die Rolleninferenz bietet zwar gute Standardeinstellungen, aber wenn Sie Elemente mit nicht generischen Rollen verwenden, müssen Sie darauf achten, dass die richtige Rolle für die von ihnen bereitgestellte Funktionalität festgelegt ist.

Wenn Sie focusgroup verwenden, denken Sie daran, dass Nutzer möglicherweise mit den Pfeiltasten scrollen müssen, um Ihre Inhalte zu sehen. Tastaturnutzer müssen immer in der Lage sein, die Inhalte auf Ihrer Seite zu lesen und darauf zuzugreifen.

Funktionserkennung

Wenn Sie focusgroup schon heute verwenden möchten, bevor es in allen Browsern vollständig unterstützt wird, können Sie die Unterstützung von focusgroup in JavaScript so erkennen:

if ('focusgroup' in HTMLElement.prototype) {
  // focusgroup is supported.
} else {
  // fall back to manual roving tabindex.
}

Fazit

Das Attribut focusgroup wird derzeit von Standardisierungsgremien geprüft. Wir arbeiten aktiv am Prototyp in Chromium und optimieren die API.

Probieren Sie es aus und melden Sie ein Problem in der Fokusgruppe im Open-UI GitHub-Issue-Tracker. Wir sind besonders an Ihrer Meinung zu den folgenden Themen interessiert:

• Passt die API-Oberfläche zu den Mustern, die Sie erstellen?
• Gibt es Muster oder Szenarien, die wir übersehen?
• Gibt es Elemente, für die das Attribut „focusgroup“ nicht zulässig sein sollte?
• Wie sieht es mit der Barrierefreiheit für Ihre Anwendungsfälle aus?

Vielen Dank, dass Sie uns helfen, die Tastaturnavigation im Web zu verbessern.

Weitere Informationen

• Fokusgruppen – Erläuterungen
• Interaktive Demos (Quelle)
• WHATWG HTML Issue
• Offene Probleme aus Fokusgruppen zur Benutzeroberfläche
• ARIA Authoring Practices Guide

Vielen Dank an Mason Freed, Sara Higley, Scott O'Hara und den Rest der Open-UI-Community für ihre Hilfe bei der Rückkehr von focusgroup.