ARIA: rowgroup-Rolle

Rowgroup stellt eine Beziehung zwischen den enthaltenen 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 Elementen mit entweder der table oder grid-Rolle enthalten oder von ihnen besessen sein. Die Verwendung der nativen <thead>, <tfoot> und <tbody>-HTML-Elemente wird nachdrücklich empfohlen, wann immer möglich.

Um einen ARIA-Tabellenkopf, Tabellenfuß oder Tabellenkörper zu erstellen, fügen Sie dem Element role="rowgroup" hinzu. Diese Zeilengruppe sollte innerhalb eines Gitters, einer Tabelle oder eines Baumgitters verschachtelt 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, je nachdem, ob es sich um Spalten- oder Reihenüberschriften oder einfache oder Rasterzellen handelt.

Kontextrollen

role="table"

Einer der drei möglichen Kontexte (neben grid und treegrid), in denen eine Zeile gefunden wird. Es 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 (neben table und treegrid), in denen eine Zeile gefunden wird. Es 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 wie ein Gitter, aber mit Zeilen, die auf die gleiche Weise wie bei einem Baum erweitert und reduziert werden können.

Nachkommenrollen

role="row"

Eine Reihe von Zellen innerhalb einer tabellarischen Struktur. Eine Zeile enthält eine oder mehrere cells, gridcell oder column headers und manchmal eine row header.

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 oben ist eine nicht-semantische ARIA-Tabelle mit einem Tabellenkopf und einem Tabellenkörper, wobei fünf von 81 Zeilen im DOM vorhanden sind: eine innerhalb eines Tabellenkopfes und vier Zeilen innerhalb des Tabellenkörpers. Die Kopfzeile, die allein im Header-Rowgroup ist, hat zwei Spaltenüberschriften. Die Spalten sind sortierbar, aber derzeit nicht sortiert, was durch die Eigenschaft aria-sort angezeigt wird. Der Tabellenkörper ist eine separate Zeilengruppe, mit vier derzeit im DOM vorhandenen Zeilen. Da nicht alle Zeilen im DOM sind, haben wir die Eigenschaft aria-rowindex in jeder Zeile aufgenommen.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für die Datenstruktur von Tabellen. Sie können diese ARIA-Rollen hinzufügen, um die Zugänglichkeit zu gewährleisten, falls die nativen Semantiken der Tabelle entfernt werden, zum Beispiel durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn die display-Eigenschaft von CSS die nativen Semantiken einer Tabelle überschreibt, etwa durch display: grid. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantik wieder 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 notwendig, wenn die nativen Semantiken der Tabelle und damit die Tabellenzeilen ausgelöscht werden, etwa durch Einstellen der display-Eigenschaft auf flex oder grid.

Keine

• HTML-Tabelle
• HTML-Tabellenkörper
• HTML-Tabellenfuß
• HTML-Tabellenüberschrift