ARIA: `rowgroup`-Rolle
Ein Element mit role="rowgroup"
ist eine Gruppe von Reihen innerhalb einer tabellarischen Struktur. Ein rowgroup
enthält eine oder mehrere Reihen von Zellen, Gitterzellen, Spaltenüberschriften oder Reihenüberschriften innerhalb eines grid
, table
oder treegrid
.
<div
role="table"
aria-label="Populations"
aria-describedby="country_population_desc">
<div id="country_population_desc">World Populations by Country</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">Country</span>
<span role="columnheader" aria-sort="none">Population</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">Finland</span>
<span role="cell">5.5 million</span>
</div>
<div role="row">
<span role="cell">France</span>
<span role="cell">67 million</span>
</div>
</div>
</div>
Beschreibung
Rowgroup
stellt eine Beziehung zwischen den zugehörigen Reihen-Elementen her und ist ein strukturelles Äquivalent zu den <thead>
, <tfoot>
und <tbody>
Elementen in HTML. Es gibt jedoch keine Unterscheidung zwischen verschiedenen Typen von Reihengruppen. Ihre Elemente müssen in, oder im Besitz von, Elementen mit entweder der table oder grid Rolle sein. Es wird dringend empfohlen, wann immer möglich die nativen <thead>
, <tfoot>
und <tbody>
HTML-Elemente zu verwenden.
Um einen ARIA-Tabellenkopf, Tabellenfuß oder Tabellenkörper zu erstellen, fügen Sie role="rowgroup"
zum Element hinzu. Diese Reihengruppe sollte innerhalb eines Grids, einer Tabelle oder eines Treegrids verschachtelt sein und eine Gruppe von einer oder mehreren Reihen umfassen. Jede Reihe enthält wiederum untergeordnete Zellen. Diese Zellen können je nach Typ unterschiedlich sein, abhängig davon, ob sie Spalten- oder Reihenüberschriften oder einfache oder Gitterzellen sind.
Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften
Kontextrollen
- role="table"
-
Eines der drei möglichen Kontexte (zusammen mit Grid und Treegrid), in denen Sie eine Reihe finden. Es identifiziert die Reihe als Teil einer nicht-interaktiven Tabellenstruktur, die Daten in Reihen und Spalten enthält, ähnlich dem nativen
<table>
HTML-Element. - role="grid"
-
Eines der drei möglichen Kontexte (zusammen mit Table und Treegrid), in denen Sie eine Reihe finden. Es identifiziert die Reihe als Teil einer nicht-interaktiven Tabellenstruktur, die Daten in Reihen und Spalten enthält, ähnlich dem nativen
<table>
HTML-Element. - role="treegrid"
-
Ähnlich wie ein Grid, jedoch mit Reihen, die auf die gleiche Weise wie bei einem Baum erweitert und reduziert werden können.
Nachfolge-Rollen
- role="row"
-
Eine Reihe von Zellen innerhalb einer tabellarischen Struktur. Eine Reihe enthält eine oder mehrere Zellen, Gitterzellen oder Spaltenüberschriften und manchmal eine Reihenüberschrift.
Tastaturinteraktionen
Keine.
Erforderliche JavaScript-Funktionen
Keine.
Hinweis:
Die erste Regel der ARIA-Nutzung ist es, wenn Sie ein natives Feature mit den bereits integrierten Semantiken und Verhaltensweisen verwenden können, anstatt ein Element umzunutzen und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie das. Verwenden Sie das HTML <table>
-Element anstelle der ARIA-Rolle der Tabelle, wann immer möglich.
Beispiele
<div
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<div id="semantic_elements_table_desc">
Semantic Elements to use instead of ARIA's roles
</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="none">ARIA Role</span>
<span role="columnheader" aria-sort="none">Semantic Element</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="11">
<span role="cell">header</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">header</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">rowgroup</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">term</span>
<span role="cell">dt</span>
</div>
</div>
</div>
Das obige ist eine nicht-semantische ARIA-Tabelle mit einem Tabellenkopf und einem Tabellenkörper, wobei fünf von 81 Reihen im DOM vorhanden sind: eine innerhalb eines Tabellenkopfs und vier Reihen innerhalb des Tabellenkörpers. Die Kopfzeile, allein in einer Kopfzeilengruppe, hat zwei Spaltenüberschriften. Die Spalten sind sortierbar, jedoch derzeit nicht sortiert, wie durch die aria-sort
Eigenschaft angegeben. Der Tabellenkörper ist eine separate Reihengruppe, mit vier Reihen, die derzeit im DOM sind. Da nicht alle Reihen im DOM sind, haben wir die aria-rowindex
Eigenschaft auf jede Reihe angewendet.
Best Practices
Verwenden Sie nur <table>
, <tbody>
, <thead>
, <tr>
, <th>
, <td>
und so weiter für die Struktur von Datentabellen. Sie können diese ARIA-Rollen hinzufügen, um die Zugänglichkeit zu gewährleisten, falls die nativen Semantiken der Tabelle entfernt werden, z.B. durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabel-Rolle ist, wenn die display
-Eigenschaft von CSS die nativen Semantiken einer Tabelle überschreibt, z.B. durch display: grid
. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantiken zu ergänzen.
<table
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<caption id="semantic_elements_table_desc">
Semantic Elements to use instead of ARIA's roles
</caption>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" aria-sort="none">ARIA Role</th>
<th role="columnheader" aria-sort="none">Semantic Element</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" aria-rowindex="11">
<td role="cell">header</td>
<td role="cell">h1</td>
</tr>
<tr role="row" aria-rowindex="16">
<td role="cell">header</td>
<td role="cell">h6</td>
</tr>
</tbody>
</table>
Oben ist die semantische Art und Weise, eine Tabelle zu schreiben. Die ARIA-Rollen sind nur dann notwendig, wenn die nativen Semantiken der Tabelle und daher der Tabellenreihen ausgelöscht werden, z.B. durch das Setzen der display-Eigenschaft auf Flex oder Grid.
Zusätzliche Vorteile
Keine
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # rowgroup |