Dietreegrid-Rolle identifiziert ein Element als ein Raster, dessen Zeilen auf dieselbe Weise wie bei einemtree erweitert und eingeklappt werden können.

Beschreibung

Einetreegrid ist ein hierarchisches Datengitter oder eine Tabelle, die aus tabellarischen Informationen besteht, die bearbeitbar oder interaktiv sind. Einetreegrid ist eine Kombination der Rollentree undgrid. Wie eingrid besteht dietreegrid aus Zeilen, Spalten und Rasterzellen. Wie eintree sind Elternelemente in einertreegrid erweiterbar und einklappbar. Dastreegrid-Widget enthält ein oder mehrererow-Elemente, optional mitrowgroup-Elementen, die die Zeilen gruppieren. Jede Zeile enthält wiederum eine oder mehrere Zellen. Jede Zelle ist entweder ein DOM-Nachkomme oder im Besitz eines Zeilenelements und ist entweder eincolumnheader-,rowheader- odergridcell-Element, wobei diegridcell-Rolle für alle Zellen verwendet wird, die keine Spalten- oder Zeilenkopf-Informationen enthalten.

Einerow, die erweitert oder eingeklappt werden kann, um eine Reihe von untergeordneten Zeilen anzuzeigen oder zu verbergen, ist eineElternzeile. Jede Elternzeile hat den Zustandaria-expanded entweder auf dem Zeilenelement oder auf einer in der Zeile enthaltenen Zelle gesetzt.

Deraria-expanded-Zustand ist auftrue gesetzt, wenn die untergeordneten Zeilen angezeigt werden, und auffalse, wenn die untergeordneten Zeilen verborgen sind. Elemente, die die Anzeige von untergeordneten Zeilen nicht steuern, sollten dasaria-expanded-Attribut nicht haben, da die Präsenz des Attributs assistiven Technologien anzeigt, dass das Element ein Elternteil ist.

Wenn Ihre Raster-Benutzeroberfläche Zeilen mit Unterstützung füraria-expanded erfordert oder wenn Ihr Raster die Unterstützung vonaria-posinset,aria-setsize oderaria-level benötigt, verwenden Sietreegrid und nichtgrid.

Jederow odergridcell in einer Zeile sollte über die Tastatur fokussierbar sein, und die Tastaturfokussierung für alle diese Treegrid-Nachkommen muss verwaltet werden. Die Ausnahme von dieser Regel sind Spaltenkopfzeilen, die nicht fokussierbar sein müssen, wenn sie keine Funktionen wie Sortieren oder Filtern bieten. Jede Zeile und Zelle sollte entweder ein fokussierbares Element enthalten oder selbst fokussierbar sein, unabhängig davon, ob der individuelle Zellinhalt bearbeitbar oder interaktiv ist.

Einzel- und Mehrfachauswahl in Treegrids

Wenn dietreegrid dem Benutzer erlaubt, nur ein Element für eine Aktion auszuwählen, wird sie alsEinzel-Auswahl-Treegrid bezeichnet. In Einzel-Auswahl-Treegrids hat das fokussierte Element auch einen ausgewählten Zustand mitaria-selected.

Wenn die Treegrid die Auswahl von mehr als einer Zeile oder Zelle unterstützt, handelt es sich um eineMehrfach-Auswahl-Treegrid. In der Mehrfachauswahl-Treegrid ist der ausgewählte Zustand unabhängig vom Fokus. Das visuelle Design und assistive Technologien müssen zwischen ausgewählten Elementen und dem Element, das den Fokus hat, unterscheiden.

Für Mehrfachauswahl-Treegrids wird auf dem Element mit dertreegrid-Rollearia-multiselectable="true" gesetzt. Alle ausgewählten Zeilen oder Zellen habenaria-selected auftrue gesetzt. Alle Zeilen und Zellen, die auswählbar, aber derzeit nicht ausgewählt sind, habenaria-selected auffalse gesetzt. Setzen Sie dasaria-selected-Attribut nicht auf Zeilen und Zellen, die nicht individuell auswählbar sind, da das Vorhandensein des Attributs assistiven Technologien anzeigt, dass die Zeile oder Zelle auswählbar ist.

Verwaiste Zeilen

In Fällen, bei denen eine untergeordneterow oderrowgroup nicht imtreegrid im DOM verschachtelt ist, muss dasaria-owns-Attribut, das alle IDs der nicht-Nachkommen-Kinder referenziert, auf demtreegrid-Element gesetzt werden. Wenn Zeilen oder Zellen überaria-owns in eine Treegrid eingeschlossen werden, werden sie assistiven Technologien nach den DOM-Nachkommen destreegrid-Elements präsentiert, es sei denn, die tatsächlichen DOM-Nachkommen des Grids sind ebenfalls imaria-owns-Attribut enthalten.

Treegrids mit dynamisch geladenem Inhalt

Wenn einige Zeilen oder Spalten nicht im DOM sind und beim Scrollen dynamisch geladen werden, kommenaria-colcount,aria-rowcount,aria-colindex undaria-rowindex ins Spiel. Die Eigenschaftenaria-colcount undaria-rowcount werden auf dertreegrid gesetzt. Die Werte sind die Gesamtzahl der Spalten und Zeilen des vollständig geladenen Grids. Die Indizes für jede Zeile und Spalte werden auf individuellen Zellen und nicht auf demtreegrid-Element gesetzt.

Der zugängliche Name, die Beschreibung und der Fokus einer Treegrid

Das Element mit dertreegrid-Rolle muss einen zugänglichen Namen haben. Wenn ein geeigneter Beschriftungstext im Inhalt sichtbar ist, geben Sie den Namen überaria-labelledby an. Anders ausgedrückt, wenn es ein Element in der Benutzeroberfläche gibt, das als Beschriftung für die Treegrid dient, fügen Siearia-labelledby als Attribut an das Element mit dertreegrid-Rolle hinzu und setzen den Attributwert auf dieid des betitelnden Elements oder der Elemente. Wenn keine sichtbare Beschriftung vorhanden ist, verwenden Sie stattdessenaria-label. Nicht beide.

Wenn der Inhalt eine Beschriftung oder Beschreibung für dietreegrid enthält, fügen Siearia-describedby auf demtreegrid-Element hinzu, wobei der Attributwert dieid des Elements ist, das die Beschreibung enthält.

Wenn dertreegrid-Container selbst den Fokus erhält, sollte der Wert seineraria-activedescendant-Eigenschaft dieid der ausgewähltenrow,columnheader,rowheader odergridcell referenzieren, es sei denn, ein beweglicher Tabindex wird verwendet, um den Fokus zwischen diesen Rollen zu verwalten, in diesem Fall solltearia-activedescendant nicht verwendet werden.

Wenn dietreegrid deaktiviert ist, machen Sie diesen deaktivierten Zustand visuell erkennbar, programmatisch durchgesetzt und fügen Sie dasaria-disabled-Attribut auf dertreegrid selbst hinzu, um assistive Technologien über ihren deaktivierten Zustand zu informieren.

Sortierung in Treegrids

Wenn die Treegrid Sortierfunktionen bietet, wird dasaria-sort-Attribut auf den entsprechenden Kopfzeilen-Zellenelementen und nicht auf dem Raster selbst hinzugefügt.

Menüs in Treegrids

Wenn dietreegrid ein angehängtesmenu hat, das bei einem Rechtsklick geöffnet wird, fügen Siearia-haspopup="true" auf demtreegrid-Element hinzu. Dies informiert assistive Technologien darüber, dass dietreegrid ein zugeordnetes Pop-up hat. Die Möglichkeit, sowohl für Tastatur- als auch für Zeigereingabegeräte-Benutzer das Menü zu öffnen und den Fokus darauf zu setzen, muss mit JavaScript hinzugefügt werden.

Nur-Lese-Treegrids

Standardmäßig wird angenommen, dass Treegrids bearbeitbar sind. Wenn eine Treegrid nicht bearbeitbar ist, verwenden Sie dasaria-readonly-Attribut, um assistiven Technologien mitzuteilen, dass dietreegrid schreibgeschützt ist. Der Attributwert, wenn er auf dem Element mit dertreegrid-Rolle gesetzt ist, propagiert sich auf allecolumnheader,rowheader undgridcell-Elemente. Dieser globale Wert kann für einzelnegridcell-Elemente überschrieben werden, indemaria-readonly auf einzelne Nachkommen-Elemente der Treegrid gesetzt wird.

Wie bei allen ARIA-Attributen informiert die Hinzufügung vonaria-readonly nur assistive Technologien darüber, dass der Inhalt bearbeitbar ist oder nicht, tut aber nichts, um die Interaktivität zu ermöglichen oder zu deaktivieren. Das muss mit dem globalencontenteditable-Attribut von HTML oder mit JavaScript erfolgen.

Zugehörige WAI-ARIA Rollen, Zustände und Eigenschaften

row Rolle

Eine Zeile von Zellen innerhalb einer tabellarischen Struktur, optional innerhalb einerrowgroup. Enthält eine oder mehrere Reihen von Rasterzellen, Spaltenköpfen oder Zeilenköpfen.

rowgroup Rolle

Eine Gruppe vonZeilen innerhalb einer tabellarischen Struktur.

gridcell Rolle

Soll die Funktionalität des HTML-<td>-Elements nachahmen, ist ingrid undtreegrid-Rollen zu finden und muss das direkte Kind einerrow sein.

columnheader Rolle

Eine Zelle in einer Zeile, die Kopfzeileninformationen für eine Spalte enthält, ähnlich dem nativen<th>-Element mit Spaltenbereich.

rowheader Rolle

Eine Zelle, die Kopfzeileninformationen für einerow innerhalb einer tabellarischen Struktur enthält.

aria-expanded

Für erweiterbare Elemente ist der Werttrue oderfalse. Zeigt auch an, dass das Element erweiterbar ist, daher sollte es nicht vorhanden sein, wenn das Element nicht erweiterbar ist.

aria-owns

Identifiziert eine kontextuelle Beziehung zwischen einem Elternelement und seinen Kinderelementen, wenn die DOM-Hierarchie nicht verwendet werden kann, um die Beziehung darzustellen.

aria-labelledby

Verwenden Sie dieses Attribut, um dietreegrid zu kennzeichnen. Dasaria-labelledby-Attribut ist im Allgemeinen die ID des Elements, das verwendet wird, um die Treegrid zu betiteln.

aria-label

Ein menschenlesbarer Zeichenfolgenwert, der dietreegrid identifiziert. Wenn es eine sichtbare Beschriftung gibt, sollte stattdessenaria-labelledby verwendet werden.

Tastaturinteraktionen

Die Möglichkeit, den Fokus mit der Tastatur zwischen den Zeilen und Zellen des Rasters zu bewegen, muss implementiert werden, um eine zugängliche Treegrid zu erstellen. Das Bewegen des Fokus in das Raster kann dazu führen, dass die erste Zelle oder die erste Zeile fokussiert wird. Ob der Fokus auf die nächste angrenzende Zelle oder die Zeile geht, hängt von den Content-Anforderungen ab, wobei einige Treegrids keinen Fokus auf Zeilen bieten.

Die folgenden Tastaturinteraktionen müssen unterstützt werden, wenn ein Element im Raster den Fokus erhalten hat, z.B. nachdem ein Benutzer den Fokus mit Tab auf das Raster verschoben hat.

Enter

Wenn nur der Zellenfokus aktiviert ist und der Fokus auf der ersten Zelle mit deraria-expanded-Eigenschaft liegt, werden die untergeordneten Zeilen geöffnet oder geschlossen. Andernfalls wird die Standardaktion für die Zelle ausgeführt.

Tab

Wenn die Zeile mit dem Fokus fokussierbare Elemente wie ein<input>,<button> oder<a> enthält, bewegt sich der Fokus zum nächsten Eingabefeld in der Zeile. Wenn der Fokus auf dem letzten fokussierbaren Element in der Zeile liegt, bewegt sich der Fokus aus dem Treegrid-Widget zum nächsten fokussierbaren Element.

Rechte Pfeiltaste

Wenn der Fokus auf einer eingeklappten Zeile liegt, erweitern Sie die Zeile. Wenn der Fokus auf einer erweiterten Zeile oder einer Zeile ohne untergeordnete Zeilen liegt, bewegt sich der Fokus zur ersten Zelle in der Zeile. Wenn der Fokus auf der rechten Zelle in einer Zeile liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf einer anderen Zelle liegt, bewegt sich der Fokus eine Zelle nach rechts.

Linke Pfeiltaste

Wenn der Fokus auf einer erweiterten Zeile liegt, wird die Zeile eingeklappt. Wenn der Fokus auf einer eingeklappten Zeile oder einer Zeile ohne untergeordnete Zeilen liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf der ersten Zelle in einer Zeile liegt und der Zeilenfokus unterstützt wird, bewegt sich der Fokus zur Zeile. Wenn der Fokus auf der ersten Zelle in einer Zeile liegt und der Zeilenfokus nicht unterstützt wird, bewegt sich der Fokus nicht. Wenn der Fokus auf einer anderen Zelle liegt, bewegt sich der Fokus eine Zelle nach links.

Abwärtspfeil

Wenn der Fokus auf einer Zeile liegt, bewegt sich der Fokus eine Zeile nach unten. Wenn der Fokus auf der letzten Zeile liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf einer Zelle liegt, bewegt sich der Fokus eine Zelle nach unten. Wenn der Fokus auf der unteren Zelle in der Spalte liegt, bewegt sich der Fokus nicht.

Aufwärtspfeil

Wenn der Fokus auf einer Zeile liegt, bewegt sich der Fokus eine Zeile nach oben. Wenn der Fokus auf der ersten Zeile liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf einer Zelle liegt, bewegt sich der Fokus eine Zelle nach oben. Wenn der Fokus auf der oberen Zelle in der Spalte liegt, bewegt sich der Fokus nicht.

Bild-ab

Wenn der Fokus auf einer Zeile oder Zelle liegt, bewegt sich der Fokus eine vordefinierte Anzahl von Zeilen oder Zellen nach unten. Normalerweise bewegt es sich nach unten entsprechend der Höhe der Treegrid und scrollt so, dass die unterste Zeile im aktuell sichtbaren Zeilensatz zu einer der ersten sichtbaren Zeilen wird. Wenn der Fokus in der letzten Zeile liegt, bewegt sich der Fokus nicht.

Bild-auf

Wenn der Fokus auf einer Zeile oder Zelle liegt, bewegt sich der Fokus eine vordefinierte Anzahl von Zeilen nach oben. Normalerweise bewegt es sich nach oben entsprechend der Höhe der Treegrid und scrollt so, dass die oberste Zeile im aktuell sichtbaren Zeilensatz zu einer der letzten sichtbaren Zeilen wird. Wenn der Fokus in der ersten Zeile liegt, bewegt sich der Fokus nicht.

HomeStrg + Home

Wenn der Fokus auf einer Zeile liegt, bewegt sich der Fokus zur ersten Zeile. Wenn der Fokus in der ersten Zeile liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf einer Zelle liegt, bewegt sich der Fokus zur ersten Zelle in der Zeile. Wenn der Fokus in der ersten Zelle der Zeile liegt, bewegt sich der Fokus nicht.

EndeStrg + Ende

Wenn der Fokus auf einer Zeile liegt, bewegt sich der Fokus zur letzten Zeile. Wenn der Fokus in der letzten Zeile liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf einer Zelle liegt, bewegt sich der Fokus zur letzten Zelle in der Zeile. Wenn der Fokus in der letzten Zelle der Zeile liegt, bewegt sich der Fokus nicht. Wenn nicht alle Zeilen im DOM vorhanden sind, kann dies verwendet werden, um den Fokus auf die letzte im DOM präsente Zeile zu bewegen oder auf die letzte verfügbare Zeile, wenn die gesamte Datenbank im DOM vorhanden wäre.

Wenn eine Treegrid die Auswahl von Zellen, Zeilen oder Spalten unterstützt, werden die folgenden Tasten häufig für diese Funktionen verwendet.

Strg + Leertaste

Wenn der Fokus auf einer Zeile liegt, wählt er alle Zellen aus. Wenn der Fokus auf einer Zelle liegt, wählt er die Spalte aus, die den Fokus enthält.

Shift + Leertaste

Wenn der Fokus auf einer Zeile liegt, wählt er die Zeile aus. Wenn der Fokus auf einer Zelle liegt, wählt er die Zeile aus, die den Fokus enthält. Wenn die Treegrid eine Spalte mit Kontrollkästchen zum Auswählen von Zeilen enthält, kann diese Taste auch als Abkürzung zum Aktivieren des Kontrollkästchens verwendet werden, wenn der Fokus nicht auf dem Kontrollkästchen liegt.

Strg + A

Wählt alle Zellen aus.

Shift + Rechter Pfeil

Wenn der Fokus auf einer Zelle liegt, wird die Auswahl um eine Zelle nach rechts erweitert.

Shift + Linker Pfeil

Wenn der Fokus auf einer Zelle liegt, wird die Auswahl um eine Zelle nach links erweitert.

Shift + Abwärtspfeil

Wenn der Fokus auf einer Zeile liegt, erweitert sich die Auswahl auf alle Zellen in der nächsten Zeile. Wenn der Fokus auf einer Zelle liegt, wird die Auswahl um eine Zelle nach unten erweitert.

Shift + Aufwärtspfeil

Wenn der Fokus auf einer Zeile liegt, erweitert sich die Auswahl auf alle Zellen in der vorherigen Zeile. Wenn der Fokus auf einer Zelle liegt, wird die Auswahl um eine Zelle nach oben erweitert.

Wenn Navigationsfunktionen dynamisch weitere Zeilen oder Spalten zum DOM hinzufügen können, können Tastenereignisse, die den Fokus zum Anfang oder Ende des Grids verschieben, wie z.B.Strg + Ende, den Fokus möglicherweise auf die letzte Zeile im DOM verschieben, anstatt auf die letzte verfügbare Zeile in den Backend-Daten.

Während Navigationstasten, wie Pfeiltasten, den Fokus von Zelle zu Zelle verschieben, sind sie nicht verfügbar, um z.B. ein Kombinationsfeld zu bedienen oder einen Bearbeitungscursor innerhalb einer Zelle zu verschieben. Wenn diese Funktionalität benötigt wird, sieheBearbeiten und Navigieren innerhalb einer Zelle.

Zugänglichkeitshinweise

Es ist wichtig, dass alle Zellen den Tastaturfokus empfangen oder enthalten können, da Bildschirmlesegeräte sich generell im Anwendungslesemodus befinden, anstatt im Dokumentenlesemodus, wenn Benutzer mit dem Raster interagieren. Im Anwendungsmodus hört ein Benutzer eines Bildschirmlesegeräts nur fokussierbare Elemente und Inhalte, die fokussierbare Elemente beschriften. Wenn ein Inhalt keinen Fokus erhalten kann, können Benutzer von Bildschirmlesegeräten die in der Treegrid enthaltenen Elemente möglicherweise übersehen.

Spezifikationen