Die ARIAtab Rolle zeigt ein interaktives Element innerhalb einertablist an, das, wenn es aktiviert wird, das zugehörigetabpanel anzeigt.

<button role="tab" aria-selected="true" aria-controls="tabpanel-id">  Tab label</button>

Beschreibung

Ein Element mit dertab Rolle steuert die Sichtbarkeit eines zugehörigen Elements mit dertabpanel Rolle. Das übliche Nutzererlebnismuster ist eine Gruppe von visuellen Tabs über oder neben einem Inhaltsbereich, und das Auswählen eines anderen Tabs ändert den Inhalt und macht den ausgewählten Tab deutlich prominenter als die anderen Tabs.

Elemente mit der Rolletabmüssen entweder ein Kind eines Elements mit dertablist Rolle sein oder ihreid als Teil deraria-owns Eigenschaft einertablist haben. Diese Kombination identifiziert für unterstützende Technologien, dass das Element Teil einer Gruppe von verwandten Elementen ist. Einige unterstützende Technologien geben eine Anzahl dertab Rolle Elemente innerhalb einertablist wieder und informieren die Nutzer darüber, welchentab sie gerade anvisiert haben. Weiterhinsollte ein Element mit dertab Rolle diearia-controls Eigenschaft enthalten, die ein entsprechendestabpanel (das einetabpanel Rolle hat) durch dieid dieses Elements identifiziert. Wenn ein Element mit dertabpanel Rolle den Fokus hat, oder ein Kind davon den Fokus hat, zeigt dies an, dass das verbundene Element mit dertab Rolle der aktive Tab in einertablist ist.

Wenn Elemente mit dertab Rolle ausgewählt oder aktiv sind, sollten sie ihraria-selected Attribut auftrue setzen. Andernfalls sollte ihraria-selected Attribut auffalse gesetzt werden. Wenn eine nur-einmal-auswählbaretablist ausgewählt oder aktiv ist, sollte dashidden Attribut der anderen Tabpanels auf true gesetzt werden, bis der Nutzer den Tab auswählt, der mit diesem Tabpanel verbunden ist. Wenn eine mehrfach-auswählbaretablist ausgewählt oder aktiv ist, sollte ihr entsprechendes gesteuertestabpanel seinaria-expanded Attribut auftrue und seinhidden Attribut auffalse gesetzt haben, andernfalls umgekehrt.

Alle Nachfahren sind präsentational

Es gibt einige Typen von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Zugänglichkeits-API dargestellt werden, nur Text enthalten können. Zugänglichkeits-APIs haben keine Möglichkeit, semantische Elemente in einemtab darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rollepresentation auf alle Nachfahren vontab Elementen an, da es eine Rolle ist, die keine semantischen Kinder unterstützt.

Betrachten Sie zum Beispiel das folgendetab Element, das eine Überschrift enthält.

<div role="tab"><h3>Title of my tab</h3></div>

Da Nachfahren vontab präsentational sind, ist der folgende Code äquivalent:

<div role="tab"><h3 role="presentation">Title of my tab</h3></div>

Aus der Perspektive von Nutzern unterstützender Technologien existiert die Überschrift nicht, da die vorherigen Codeausschnitte dem folgenden imZugänglichkeitsbaum gleichwertig sind:

<div role="tab">Title of my tab</div>

Zugehörige Rollen und Attribute

aria-selected

boolean

aria-controls

id des Elements mit dertabpanel Rolle

id

Inhalt

Tastaturinteraktionen

Erforderliche JavaScript-Funktionen

Beispiel

Dieses Beispiel kombiniert die Rolletab mittablist und Elementen mittabpanel, um eine interaktive Gruppe von Registerkarteninhalten zu erstellen. Hier umschließen wir unsere Inhaltsgruppe in einemdiv, wobei unseretablist einaria-label hat, das sie für unterstützende Technologien kennzeichnet. Jedertab ist einbutton mit den zuvor erwähnten Attributen. Der erstetab hat sowohltabindex="0" als aucharia-selected="true" zugewiesen. Diese beiden Attribute müssen immer so koordiniert werden — wenn ein anderer Tab ausgewählt wird, wird er danntabindex="0" undaria-selected="true" haben. Alle nicht ausgewählten Tabs müssenaria-selected="false" undtabindex="-1" haben.

Alletabpanel Elemente habentabindex="0", um sie tabbar zu machen, und alle außer dem aktuell aktiven haben dashidden Attribut. Dashidden Attribut wird entfernt, wenn eintabpanel mit JavaScript sichtbar wird.

<div>  <div role="tablist" aria-label="Select your operating system">    <button      role="tab"      aria-selected="true"      aria-controls="panel-1"           tabindex="0">      Windows    </button>    <button      role="tab"      aria-selected="false"      aria-controls="panel-2"           tabindex="-1">      macOS    </button>    <button      role="tab"      aria-selected="false"      aria-controls="panel-3"           tabindex="-1">      Linux    </button>  </div>  <div>    <div role="tabpanel" tabindex="0" aria-labelledby="tab-1">      <p>How to run this application on Windows</p>    </div>    <div           role="tabpanel"      tabindex="0"      aria-labelledby="tab-2"      hidden>      <p>How to run this application on macOS</p>    </div>    <div           role="tabpanel"      tabindex="0"      aria-labelledby="tab-3"      hidden>      <p>How to run this application on Linux</p>    </div>  </div></div>

Es wird ein grundlegendes Styling angewendet, das die Schaltflächen neu gestaltet und denz-index dertab Elemente ändert, um die Illusion zu erzeugen, dass sie mit demtabpanel für aktive Elemente verbunden sind, und die Illusion, dass inaktive Elemente hinter dem aktiventabpanel sind. Sie sollten den aktiven Tab deutlich von den inaktiven Tabs unterscheiden, z.B. durch dickere Ränder oder größere Größe.

.tabs {  padding: 1em;}[role="tablist"] {  margin-bottom: -1px;}[role="tab"] {  position: relative;  z-index: 1;  background: white;  border-radius: 5px 5px 0 0;  border: 1px solid grey;  border-bottom: 0;  padding: 0.2em;}[role="tab"][aria-selected="true"] {  z-index: 3;  border-top-width: 4px;}[role="tabpanel"] {  position: relative;  padding: 0 0.5em 0.5em 0.7em;  border: 1px solid grey;  border-radius: 0 0 5px 5px;  background: white;  z-index: 2;}[role="tabpanel"]:focus {  border-color: #356fb3;  outline: 1px solid #356fb3;}

Die Benutzerinteraktion wird mit JavaScript gehandhabt. Zuerst holen wir Verweise auf unseretablist, alletab Elemente darin, den Container unserertabpanel Elemente und alletabpanel Elemente in diesem Container. Dies basiert auf einigen Annahmen über die Struktur unseres HTML, daher müssen Sie, wenn Sie die Struktur ändern, auch diesen Code ändern. Wenn Sie mehrere Registerkartenschnittstellen auf einer Seite haben, können Sie diesen Code in eine Funktion einbetten undtabsContainer als Argument übergeben.

const tabsContainer = document.querySelector(".tabs");const tabList = tabsContainer.querySelector(':scope > [role="tablist"]');const tabs = Array.from(tabList.querySelectorAll(':scope > [role="tab"]'));const tabPanelsContainer = tabsContainer.querySelector(":scope > .tab-panels");const tabPanels = Array.from(  tabPanelsContainer.querySelectorAll(':scope > [role="tabpanel"]'),);

Für Tastaturinteraktionen hören wir auf daskeydown Ereignis imtablist. In dieser Demo haben wir uns entschieden, dentab nicht zu aktivieren, wenn der Benutzer mit den Pfeiltasten navigiert, sondern nur den Fokus zu verschieben. Wenn Sie dentab anzeigen möchten, wenn er den Fokus erhält, können Sie die FunktionshowTab() (später definiert) anstelle von nurfocus() auf dem neuen Tab aufrufen.

tabList.addEventListener("keydown", (e) => {  const currentTab = e.target;  const currentIndex = tabs.indexOf(currentTab);  if (currentIndex === -1) return; // Exit if the focused element is not a tab  let newIndex = 0;  switch (e.key) {    case "ArrowRight":      newIndex = (currentIndex + 1) % tabs.length;      break;    case "ArrowLeft":      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;      break;    case "Home":      newIndex = 0;      break;    case "End":      newIndex = tabs.length - 1;      break;    default:      return; // Exit if the key is not recognized  }  e.preventDefault();  e.stopPropagation();  tabs[newIndex].focus();});

Das Tab-Panel wird entweder durch das Drücken vonEnter oderSpace, während eintab den Fokus hat, oder durch Klicken auf eintab aktiviert. Zuerst definieren wir eine FunktionshowTab(), die das anzuzeigendetab Element übernimmt.

function showTab(targetTab) {  // Unselect other tabs and set this tab as selected  for (const tab of tabs) {    if (tab === targetTab) continue;    tab.setAttribute("aria-selected", false);    tab.tabIndex = -1;  }  targetTab.setAttribute("aria-selected", true);  targetTab.tabIndex = 0;  // Hide other tab panels and show the selected panel  const targetTabPanel = document.getElementById(    targetTab.getAttribute("aria-controls"),  );  for (const panel of tabPanels) {    if (panel === targetTabPanel) continue;    panel.hidden = true;  }  targetTabPanel.hidden = false;}

Jetzt können wir diese Funktion entweder bei einemclick Ereignis oder bei einemkeydown Ereignis aufrufen.

tabs.forEach((tab) => {  tab.addEventListener("click", (e) => {    showTab(e.target);  });  tab.addEventListener("keydown", (e) => {    if (e.key === "Enter" || e.key === " ") {      e.preventDefault();      e.stopPropagation();      showTab(e.target);    }  });});

Beste Praktiken

Es wird empfohlen, ein<button> Element mit der Rolletab für seine eingebauten funktionalen und zugänglichen Eigenschaften zu verwenden, anstatt sie selbst hinzufügen zu müssen. Für die Steuerung der Tabulatortastenfunktionalität für Elemente mit der Rolletab wird empfohlen, alle nicht-aktiven Elemente auftabindex="-1" zu setzen und das aktive Element auftabindex="0".

Vorgabeordnung

Welche verwandten Eigenschaften gibt es, in welcher Reihenfolge wird dieses Attribut oder diese Eigenschaft gelesen, welche Eigenschaft hat Vorrang vor dieser und welche Eigenschaft wird überschrieben.

Spezifikationen

Siehe auch

• HTML<button> Element
• KeyboardEvent.key
• ARIAtabpanel Rolle