ARIA: rowgroup-Rolle

Rowgroup stellt eine Verbindung 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 Arten von Zeilengruppen. Ihre Elemente müssen in, oder von Elementen mit entweder der table oder grid Rolle enthalten oder besessen sein. 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 role="rowgroup" zu dem Element hinzu. Diese rowgroup sollte innerhalb eines Grid, einer Tabelle oder einer Baumstruktur (treegrid) geschachtelt sein und eine Gruppe von einer oder mehreren Zeilen umfassen. Jede Zeile enthält wiederum untergeordnete Zellen. Diese Zellen können von verschiedenen Typen sein, abhängig davon, ob sie Spalten- oder Zeilenüberschriften, oder einfache oder Gitterzellen sind.

Kontextrollen

role="table"

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

role="grid"

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

role="treegrid"

Ähnlich einem Gitter, jedoch mit Zeilen, die auf die gleiche Weise wie in einer Baumstruktur erweitert und reduziert werden können.

Nachfolgende Rollen

role="row"

Eine Zeile von Zellen innerhalb einer tabellarischen Struktur. Eine Zeile enthält eine oder mehrere Zellen, Gitterzellen oder Spaltenüberschriften und manchmal eine Zeilenüberschrift.

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>

Oben ist eine nicht-semantische ARIA-Tabelle mit einem Tabellenkopf- und Tabellenkörper, wobei fünf von 81 Zeilen im DOM vorhanden sind: eine innerhalb eines Tabellenkopfes und vier Zeilen im Tabellenkörper. Die Kopfzeile, alleine in einer Kopfzeilen-rowgroup, hat zwei Spaltenüberschriften. Die Spalten können sortiert werden, sind jedoch derzeit nicht sortiert, was durch die aria-sort-Eigenschaft angezeigt wird. Der Tabellenkörper ist eine separate rowgroup mit vier Zeilen, die derzeit im DOM sind. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex-Eigenschaft bei jeder Zeile hinzugefügt.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für die Daten-Struktur der Tabelle. Sie können diese ARIA-Rollen hinzufügen, um die Barrierefreiheit zu gewährleisten, sollte die native Semantik der Tabelle entfernt werden, z. B. durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn die display-Eigenschaft von CSS die native Semantik einer Tabelle überschreibt, z. B. durch display: grid. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantik 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 dann notwendig, wenn die native Semantik der Tabelle und damit der Tabellenzeilen vernichtet wird, z. B. durch das Setzen der display-Eigenschaft auf flex oder grid.

keine

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