ARIA: rowgroup Rolle

Rowgroup stellt eine Beziehung zwischen den zugehörigen Zeilenelementen her und ist ein strukturelles Äquivalent zu den <thead>, <tfoot> und <tbody> Elementen in HTML. Es gibt jedoch keine Unterscheidung zwischen verschiedenen Typen von Zeilengruppen. Ihre Elemente müssen in Elementen mit entweder der table oder grid Rolle enthalten sein oder von diesen Elementen übernommen werden. Die Verwendung der nativen <thead>, <tfoot> und <tbody> HTML-Elemente, wann immer möglich, wird dringend empfohlen.

Um einen ARIA Tabellenkopf, Tabellenfuß oder Tabellenkörper zu erstellen, fügen Sie dem Element role="rowgroup" hinzu. Dieses rowgroup sollte innerhalb eines Grids, einer Tabelle oder eines Treegrids verschachtelt sein und eine Gruppe von einer oder mehreren Zeilen umfassen. Jede Zeile enthält wiederum Kindzellen. Diese Zellen können von unterschiedlichen Typen sein, abhängig davon, ob sie Spalten- oder Zeilenköpfe, oder normale oder Gitterzellen sind.

Kontextrollen

role="table"

Eine der drei möglichen Kontexte (zusammen mit grid und treegrid), in denen Sie eine Zeile finden werden. Sie identifiziert die Zeile als Teil einer nicht interaktiven Tabellenstruktur, die Daten in Zeilen und Spalten anordnet, ähnlich dem nativen <table> HTML-Element.

role="grid"

Eine der drei möglichen Kontexte (zusammen mit table und treegrid), in denen Sie eine Zeile finden werden. Sie identifiziert die Zeile als Teil einer nicht interaktiven Tabellenstruktur, die Daten in Zeilen und Spalten anordnet, ähnlich dem nativen <table> HTML-Element.

role="treegrid"

Ähnlich einem Grid, jedoch mit Zeilen, die erweitert und reduziert werden können, wie bei einem Baum.

Nachfolgende Rollen

role="row"

Eine Zeile von Zellen innerhalb einer Tabellensstruktur. Eine Zeile enthält eine oder mehrere Zellen, gridcell, oder Spaltenköpfe und manchmal einen Zeilenkopf.

Keine

Keine.

<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 Zeilen im DOM vorhanden sind: eine im Tabellenkopf und vier Zeilen im Tabellenkörper. Die Kopfzeile, allein in einer Header-Rowgroup, hat zwei Spaltenköpfe. Die Spalten sind sortierbar, derzeit jedoch nicht sortiert, wie durch die aria-sort Eigenschaft angegeben. Der Tabellenkörper ist eine separate Rowgroup, mit vier derzeit im DOM befindlichen Zeilen. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex-Eigenschaft auf jeder Zeile hinzugefügt.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für die Datenstruktur der Tabelle. Sie können diese ARIA-Rollen hinzufügen, um die Barrierefreiheit sicherzustellen, falls die nativen Semantiken der Tabelle entfernt werden, z.B. durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabelle ist, wenn die Display-Eigenschaft des CSS die nativen Semantiken einer Tabelle außer Kraft setzt, wie z.B. durch display: grid. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantiken hinzuzufügen.

<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, eine Tabelle zu schreiben. Die ARIA-Rollen sind nur erforderlich, wenn die nativen Semantiken der Tabelle und damit der Tabellenzeilen zerstört werden, wie z.B. durch das Setzen der Display-Eigenschaft auf flex oder grid.

keine

• HTML-Tabelle
• HTML-Tabellenkörper
• HTML-Tabellenfuß
• HTML-Tabellenkopf