Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. Barrierefreiheit
  3. ARIA
  4. ARIA-Referenz
  5. Attributes
  6. aria-selected

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

ARIA: aria-selected Attribut

Dasaria-selected Attribut zeigt den aktuellen "ausgewählten" Zustand verschiedener Widgets an.

Beschreibung

Dasaria-selected Attribut zeigt den aktuellen "ausgewählten" Zustand für die Rollengridcell,option,row undtab an.

Dieses Attribut wird verwendet, um anzuzeigen, welche Elemente innerhalb von Einzel- und Mehrfachauswahl-Widgets ausgewählt sind. Wenn mehr als ein Element gleichzeitig auswählbar ist, fügen Siearia-multiselectable="true" auf dem Grid, der Listbox, der Tablist oder einer anderen übergeordneten Rolle hinzu, währendaria-selected nur auf den auswählbaren Zellen, Optionen und Tabs enthalten sein sollte.

Für andere Rollen wird der aktuell ausgewählte Zustand mitaria-current oder möglicherweisearia-checked oderaria-pressed festgelegt, abhängig von der Rolle.

Widgets, die sowohlaria-selected als aucharia-current gleichzeitig unterstützen, haben unterschiedliche Bedeutungen für jedes. Zum Beispiel kannaria-current="page" in einem Navigationsbaum verwendet werden, um anzuzeigen, welche Seite derzeit angezeigt wird, währendaria-selected="true" anzeigt, welche Seite angezeigt wird, wenn der Benutzer dastreeitem aktiviert.

Grid

Das Setzen vonaria-selected="false" auf einer fokussierbarengridcell zeigt an, dass die Zelle auswählbar ist. Wenn das Grid mehr als einegridcell gleichzeitig auswählen lässt, setzen Siearia-multiselectable="true" auf das Element mit der Rollegrid. Das Setzen vonaria-selected auf einer Spalten- oder Zeilenkopfzelle propagiert den Zustand nicht auf andere Zellen in der Spalte oder Zeile.

Option

Sowohlaria-selected als aucharia-checked sind füroption gültig. Einige Benutzeroberflächen zeigen die Auswahl mitaria-selected in Einzel-Auswahl-Listboxen und mitaria-checked in Mehrfach-Auswahl-Listboxen an.

Geben Sie nicht sowohlaria-selected als aucharia-checked aufoption Elementen an, die von derselbenlistbox enthalten sind, es sei denn, die Bedeutung und der Zweck vonaria-selected unterscheiden sich von der Bedeutung und dem Zweck vonaria-checked in der Benutzeroberfläche, die Bedeutung und der Zweck jedes Zustands ist offensichtlich, und die Benutzeroberfläche bietet separate Methoden zur Steuerung jedes Zustands an.

Zeile

Dasaria-selected Attribut wird aufrow unterstützt, aber nicht aufcolumn. Wenn ein Grid die Auswahl unterstützt, hat das ausgewählte Elementaria-selected="true" gesetzt, wenn eine Zelle oder Zeile ausgewählt ist.

Wenn das Grid Spaltenauswahl unterstützt und eine Spalte ausgewählt ist, haben alle Zellen in der Spaltearia-selected auftrue.

Tab

In einer Tablist wirdaria-selected auf einem Tab verwendet, um das aktuell angezeigtetabpanel anzuzeigen.

Der ausgewähltetab in einertablist sollte das Attributaria-selected="true" gesetzt haben. Alle inaktiven Tabs in der Tablist solltenaria-selected="false" gesetzt haben. Das Setzen des Zustands wirkt sich nur auf den Barrierefreiheit-Baum aus: Stellen Sie sicher, dass der aktive Tab so gestaltet ist, dass er visuell seinen ausgewählten Zustand anzeigt. Der Standardwert füraria-selected auf einertab Rolle istfalse.

Wenn mehr als ein Tab gleichzeitig auswählbar ist, fügen Siearia-multiselectable auf dertablist hinzu.

Beispiele

In diesem Tablist-Beispiel ist der erste Tab ausgewählt:

html
<div>  <div role="tablist" aria-label="Sample Tabs">    <span      role="tab"      aria-selected="true"      aria-controls="panel-1"           tabindex="0">      First Tab    </span>    <span      role="tab"      aria-selected="false"      aria-controls="panel-2"           tabindex="-1">      Second Tab    </span>    <span      role="tab"      aria-selected="false"      aria-controls="panel-3"           tabindex="-1">      Third Tab    </span>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-1">    <p>Content for the first panel</p>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>    <p>Content for the second panel</p>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>    <p>Content for the third panel</p>  </div></div>

Hinweis:ARIA ändert nur den Barrierefreiheit-Baum eines Elements und wie unterstützende Technologien den Inhalt für Benutzer darstellen. ARIA ändert nichts an der Funktion oder dem Verhalten eines Elements.

Werte

true

Das auswählbare Element ist ausgewählt.

false

Das auswählbare Element ist nicht ausgewählt. Impliziter Standard fürtab.

undefined (Standard)

Das Element ist nicht auswählbar.

Zugehörige Schnittstellen

Element.ariaSelected

DieariaSelected Eigenschaft, Teil derElement Schnittstelle, spiegelt den Wert desaria-selected Attributs wider.

ElementInternals.ariaSelected

DieariaSelected Eigenschaft, Teil derElementInternals Schnittstelle, spiegelt den Wert desaria-selected Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

Vererbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-selected

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

[8]ページ先頭

©2009-2026 Movatter.jp