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.

html
<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.

Hinweis: Es wird dringend empfohlen, das native HTML-Tabellenelement (<table>) zusammen mit den Tabellenelementen Kopf (<thead>), Fuß (<tfoot>) und Körper (<tbody>) wann immer möglich zu verwenden.

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

html
<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.

html
<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

Siehe auch