ARIA: treegrid-Rolle

Ein treegrid ist ein hierarchisches Datenraster oder eine Tabelle, die sich aus tabellarischen Informationen zusammensetzt, die bearbeitbar oder interaktiv sind. Ein treegrid ist eine Kombination der Rollen tree und grid. Wie ein grid besteht das treegrid aus Zeilen, Spalten und Gitterzellen. Wie ein tree sind übergeordnete Knoten in einem treegrid erweiterbar und zusammenklappbar. Das treegrid-Widget enthält ein oder mehrere row-Elemente, optional mit rowgroup-Elementen, die die Zeilen gruppieren. Jede Zeile enthält wiederum eine oder mehrere Zellen. Jede Zelle ist entweder ein DOM-Nachfahre von oder gehört einem Zeilenelement und ist entweder ein columnheader, rowheader oder gridcell Element, wobei die gridcell-Rolle für alle Zellen verwendet wird, die keine Spalten- oder Zeilenkopf-Informationen enthalten.

Eine row, die erweitert oder reduziert werden kann, um eine Gruppe von untergeordneten Zeilen anzuzeigen oder zu verbergen, ist eine übergeordnete Zeile. Jede übergeordnete Zeile hat den aria-expanded-Zustand, der entweder auf dem Zeilenelement oder auf einer in der Zeile enthaltenen Zelle festgelegt ist.

Der aria-expanded-Zustand ist auf true gesetzt, wenn die untergeordneten Zeilen angezeigt werden, und auf false, wenn die untergeordneten Zeilen ausgeblendet werden. Elemente, die das Anzeigen von untergeordneten Zeilen nicht steuern, sollten das aria-expanded-Attribut nicht haben, da das Vorhandensein des Attributs assistiven Technologien signalisiert, dass das Element mit dem Attribut ein Elternteil ist.

Wenn Ihre Grid-Benutzeroberfläche Zeilen erfordert, die aria-expanded unterstützen, oder wenn Ihr Grid die Unterstützung von aria-posinset, aria-setsize oder aria-level erfordert, verwenden Sie treegrid und nicht grid.

Jede row oder gridcell in einer Zeile sollte über die Tastatur fokussierbar sein, und der Tastaturfokus für alle diese Treegrid-Nachfahren muss verwaltet werden. Die Ausnahme dieser Regel sind Spaltenkopfzellen, die nicht fokussierbar sein müssen, wenn sie keine Funktionalität wie Sortieren oder Filtern bieten. Jede Zeile und Zelle sollte entweder ein fokussierbares Element enthalten oder selbst fokussierbar sein, unabhängig davon, ob der Inhalt individueller Zellen bearbeitbar oder interaktiv ist.

Wenn das treegrid dem Benutzer erlaubt, nur ein Element für eine Aktion auszuwählen, bezeichnet man es als Einzelauswahl-Treegrid. In Einzelauswahl-Treegrids hat das fokussierte Element auch einen ausgewählten Zustand, der mit aria-selected gesetzt ist.

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

Für Mehrfachauswahl-Treegrids geben Sie aria-multiselectable="true" auf dem Element mit der treegrid-Rolle an. Alle ausgewählten Zeilen oder Zellen haben aria-selected auf true gesetzt. Alle Zeilen und Zellen, die auswählbar, aber derzeit nicht ausgewählt sind, haben aria-selected auf false gesetzt. Fügen Sie das aria-selected-Attribut nicht für Reihen und Zellen ein, die nicht einzeln auswählbar sind, da das Vorhandensein des Attributs signalisiert, dass die Zeile oder Zelle auswählbar ist.

In Fällen, in denen eine untergeordnete row oder rowgroup nicht im treegrid im DOM verschachtelt ist, muss das aria-owns-Attribut, das alle IDs der nicht-nachfahrenden Kinder referenziert, auf dem treegrid-Element gesetzt werden. Wenn Zeilen oder Zellen über aria-owns in ein Treegrid aufgenommen werden, werden sie assistiven Technologien nach den DOM-Nachfahren des treegrid-Elements präsentiert, es sei denn, die tatsächlichen DOM-Nachfahren des Grids sind ebenfalls im aria-owns-Attribut enthalten.

Wenn einige Zeilen oder Spalten nicht im DOM sind und beim Scrollen dynamisch geladen werden, kommen aria-colcount, aria-rowcount, aria-colindex und aria-rowindex ins Spiel. Die Eigenschaften aria-colcount und aria-rowcount werden auf dem treegrid gesetzt. Die Werte sind die Gesamtzahl der Spalten und Reihen des vollständig geladenen Grids. Die Indizes für jede Zeile und Spalte werden auf einzelnen Zellen und nicht auf dem treegrid-Element festgelegt.

Das Element mit der treegrid-Rolle muss einen zugänglichen Namen haben. Wenn ein geeigneter sichtbarer Titel im Inhalt vorhanden ist, geben Sie den Namen über aria-labelledby an. Mit anderen Worten, wenn es ein Element in der Benutzeroberfläche gibt, das als Titel für das Treegrid dient, fügen Sie aria-labelledby als Attribut auf dem Element mit der treegrid-Rolle hinzu und setzen Sie den Wert des Attributs auf das id des titelgebenden Elements oder der Elemente. Wenn kein sichtbares Etikett vorhanden ist, verwenden Sie stattdessen aria-label. Nicht beides.

Wenn der Inhalt eine Überschrift oder Beschreibung für das treegrid enthält, schließen Sie aria-describedby auf dem treegrid-Element ein, wobei der Attributwert die id des Elements ist, das die Beschreibung enthält.

Wenn das treegrid-Container selbst den Fokus erhält, sollte der Wert seiner aria-activedescendant-Eigenschaft auf die id der ausgewählten row, columnheader, rowheader oder gridcell verweisen, es sei denn, ein umherwandernder Tabindex wird verwendet, um den Fokus zwischen diesen Rollen zu verwalten, in welchem Fall aria-activedescendant nicht verwendet werden sollte.

Wenn das treegrid deaktiviert ist, machen Sie diesen deaktivierten Zustand visuell erkennbar, programmatisch durchgesetzt, und fügen Sie das aria-disabled-Attribut auf dem treegrid selbst hinzu, um assistiven Technologien seinen deaktivierten Zustand mitzuteilen.

Wenn das Treegrid Sortierfunktionen bietet, wird das aria-sort-Attribut auf relevanten Kopfzellen-Elementen eingeschlossen, nicht auf dem Grid selbst.

Wenn das treegrid ein angeschlossenes menu hat, das beim Rechtsklick geöffnet wird, fügen Sie aria-haspopup="true" auf dem treegrid-Element hinzu. Dies informiert assistive Technologien, dass das treegrid ein zugehöriges Popup hat. Die Fähigkeit, das Menü sowohl für Tastatur- als auch Zeigegerätbenutzer zu öffnen und den Fokus zu setzen, muss mit JavaScript hinzugefügt werden.

Standardmäßig wird angenommen, dass Treegrids bearbeitbar sind. Wenn ein Treegrid nicht bearbeitbar ist, verwenden Sie das aria-readonly-Attribut, um assistiven Technologien mitzuteilen, dass das treegrid schreibgeschützt ist. Der Attributwert propagiert sich, wenn er auf dem Element mit der treegrid-Rolle gesetzt ist, nach unten zu allen columnheader, rowheader und gridcell-Elementen. Dieser globale Wert kann für einzelne gridcell-Elemente überschrieben werden, indem aria-readonly auf einzelnen Treegrid-Elementnachfahren eingeschlossen wird.

Wie alle ARIA-Attribute informiert das Hinzufügen von aria-readonly nur assistive Technologien darüber, dass der Inhalt entweder bearbeitbar oder nicht bearbeitbar ist, tut jedoch nichts, um Interaktivität zu aktivieren oder zu deaktivieren. Dies muss mit dem globalen HTML-Attribut contenteditable oder mit JavaScript durchgeführt werden.

row-Rolle

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

rowgroup-Rolle

Eine Gruppe von Reihen innerhalb einer tabellarischen Struktur.

gridcell-Rolle

Soll die Funktionalität des HTML <td>-Elements nachahmen, befindet sich in grid- und treegrid-Rollen und muss das direkte Kind einer row sein.

columnheader-Rolle

Eine Zelle in einer Reihe, die Überschrifteninformationen für eine Spalte enthält, ähnlich dem nativen <th>-Element mit Spaltenscope.

rowheader-Rolle

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

aria-expanded

Für erweiterbare Elemente ist der Wert true oder false. Zeigt auch an, dass das Element erweiterbar ist, sollte also nicht vorhanden sein, wenn das Element nicht erweitert werden kann.

aria-owns

Identifiziert eine kontextuelle Beziehung zwischen einem Elternteil und seinen Kindelementen, wenn die DOM-Hierarchie nicht zur Darstellung der Beziehung verwendet werden kann.

aria-labelledby

Verwenden Sie dieses Attribut, um das treegrid zu benennen. Das aria-labelledby-Attribut ist in der Regel die Id des Elements, das verwendet wird, um das Treegrid zu betiteln.

aria-label

Ein menschenlesbarer Zeichenfolgenwert, der das treegrid identifiziert. Wenn ein sichtbares Etikett vorhanden ist, sollte aria-labelledby stattdessen verwendet werden.

Um ein zugängliches Treegrid zu erstellen, muss die Möglichkeit implementiert werden, mit der Tastatur den Fokus zwischen Reihen und Zellen des Rasters zu verschieben. Das Bewegen des Fokus in das Raster kann dazu führen, dass die erste Zelle oder die erste Reihe fokussiert wird. Ob der Fokus zur nächsten angrenzenden Zelle oder zur Zeile geht, hängt von den Inhaltsanforderungen ab, wobei einige Treegrids keinen Fokus auf Zeilen bieten.

Die folgenden Tastatur-Interaktionen müssen unterstützt werden, wenn ein Element im Raster den Fokus erhalten hat, z. B. nachdem ein Benutzer den Fokus mit Tab zum Raster verschoben hat.

Enter

Wenn nur Zellenfokus aktiviert ist und der Fokus auf der ersten Zelle mit der aria-expanded-Eigenschaft liegt, öffnet oder schließt es die untergeordneten Zeilen. Andernfalls wird die Standardaktion für die Zelle ausgeführt.

Tab

Wenn die Zeile, die den Fokus enthält, fokussierbare Elemente wie ein <input>, <button> oder <a> enthält, verschiebt sich der Fokus auf die nächste Eingabe in der Zeile. Wenn der Fokus auf dem letzten fokussierbaren Element in der Zeile liegt, verschiebt sich der Fokus vom Treegrid-Widget zum nächsten fokussierbaren Element.

Rechte Pfeiltaste

Wenn der Fokus auf einer zusammengeklappten Zeile liegt, erweitern Sie die Zeile. Wenn der Fokus auf einer erweiterten Zeile oder auf einer Zeile liegt, die keine untergeordneten Zeilen hat, verschiebt sich der Fokus auf die erste Zelle in der Zeile. Wenn der Fokus auf der rechten äußersten Zelle in einer Zeile liegt, bewegt sich der Fokus nicht. Wenn der Fokus auf einer anderen Zelle liegt, verschiebt 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 zusammengeklappten Zeile oder auf einer Zeile liegt, die keine untergeordneten Zeilen hat, bewegt sich der Fokus nicht. Wenn der Fokus auf der ersten Zelle in einer Zeile liegt und der Zeilenfokus unterstützt wird, verschiebt sich der Fokus auf die 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, verschiebt sich der Fokus eine Zelle nach links.

Nach unten

Wenn der Fokus auf einer Zeile liegt, verschiebt 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, verschiebt sich der Fokus eine Zelle nach unten. Wenn der Fokus auf der unteren Zelle in der Spalte liegt, bewegt sich der Fokus nicht.

Nach oben

Wenn der Fokus auf einer Zeile liegt, verschiebt 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, verschiebt 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, verschiebt sich der Fokus um eine vorher festgelegte Anzahl von Zeilen oder Zellen nach unten. Normalerweise wird so weit nach unten geschoben, dass die unterste Zeile der aktuell sichtbaren Reihe zu einer der ersten sichtbaren Reihen 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 um eine vorher festgelegte Anzahl von Zeilen nach oben. Normalerweise bewegt es sich nach oben, um so weit nach oben zu scrollen, dass die oberste Zeile der aktuell sichtbaren Reihe zu einer der letzten sichtbaren Reihen wird. Wenn der Fokus in der ersten Zeile liegt, bewegt sich der Fokus nicht.

Home Strg + Home

Wenn der Fokus auf einer Zeile liegt, verschiebt sich der Fokus auf die erste Zeile. Wenn der Fokus in der ersten Zeile liegt, bewegen sich der Fokus nicht. Wenn der Fokus auf einer Zelle liegt, bewegt sich der Fokus auf die erste Zelle in der Zeile. Wenn der Fokus in der ersten Zelle der Zeile liegt, bewegt sich der Fokus nicht.

Ende Strg + Ende

Wenn der Fokus auf einer Zeile liegt, verschiebt sich der Fokus auf die letzte 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 auf die letzte im DOM vorhandene Zeile oder auf die letzte verfügbare Zeile zu fokussieren, wenn die gesamte Datenbank im DOM vorhanden wäre.

Wenn ein Treegrid die Auswahl von Zellen, Zeilen oder Spalten unterstützt, werden die folgenden Tasten üblicherweise 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.

Umschalt + Leertaste

Wenn der Fokus auf einer Zeile liegt, wählen Sie die Zeile aus. Wenn der Fokus auf einer Zelle liegt, wählen Sie die Zeile aus, die den Fokus enthält. Wenn das Treegrid eine Spalte mit Kontrollkästchen zum Auswählen von Zeilen enthält, kann diese Taste auch als Verknüpfung verwendet werden, um das Kästchen zu markieren, wenn der Fokus nicht auf dem Kontrollkästchen liegt.

Strg + A

Wählt alle Zellen aus.

Umschalt + Pfeil nach rechts

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

Umschalt + Pfeil nach links

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

Umschalt + Pfeil nach unten

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

Umschalt + Pfeil nach oben

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

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

Während die Navigationstasten, wie Pfeiltasten, den Fokus von Zelle zu Zelle verschieben, stehen sie nicht zur Verfügung, um beispielsweise ein Combobox zu bedienen oder einen Bearbeitungscursor in einer Zelle zu bewegen. Wenn diese Funktionalität benötigt wird, siehe Editing and Navigating Inside a Cell.

Es ist wichtig, dass alle Zellen Tastaturfokus erhalten oder enthalten können, da Bildschirmleseprogramme im Allgemeinen im Anwendungslesemodus und nicht im Dokumentenlesemodus sind, wenn Benutzer mit dem Raster interagieren. Während des Anwendungsmodus hört ein Benutzer eines Bildschirmleseprogramms nur fokussierbare Elemente und Inhalte, die fokussierbare Elemente beschriften. Wenn der Inhalt keinen Fokus erhalten kann, könnten Benutzer von Bildschirmleseprogrammen unbewusst Elemente im Treegrid übersehen.