ARIA: rowgroup Rolle

Beschreibung

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

Um eine ARIA-Tabellenüberschrift, einen Tabellenfuß oder einen Tabellenkörper zu erstellen, fügen Sie dem Element role="rowgroup" hinzu. Dieses rowgroup sollte in einem Grid, einer Tabelle oder einem Treegrid verschachtelt sein, das eine Gruppe von einer oder mehreren Reihen umfasst. Jede Reihe enthält wiederum untergeordnete Zellen. Diese Zellen können je nach Art entweder Spalten- oder Reihenüberschriften sein oder normale oder Rasterzellen sein.

Zugehörige WAI-ARIA Rollen, Zustände und Eigenschaften

Kontextrollen

role="table"

Einer 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"

Einer der drei möglichen Kontexte (zusammen mit Tabelle 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 einem Grid, aber mit Reihen, die in der gleichen Weise wie bei einem Baum erweitert und reduziert werden können.

Nachfahrenrollen

role="row"

Eine Reihe von Zellen innerhalb einer Tabellenstruktur. Eine Reihe enthält eine oder mehrere Zellen, gridcell oder Spaltenüberschriften und manchmal eine Reihenüberschrift.

Tastaturinteraktionen

Keine.

Erforderliche JavaScript-Funktionen

Keine.

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>

Oben ist eine nicht semantische ARIA-Tabelle mit einer Tabellenüberschrift und einem Tabellenkörper dargestellt, wobei fünf von 81 Reihen im DOM vorhanden sind: eine innerhalb einer Tabellenüberschrift und vier Reihen im Tabellenkörper. Die Kopfzeile, alleine in einem header rowgroup, hat zwei Spaltenüberschriften. Die Spalten sind sortierbar, aber derzeit nicht sortiert, wie durch die aria-sort Eigenschaft angegeben. Der Tabellenkörper ist ein separates rowgroup, mit vier derzeit im DOM vorhandenen Reihen. Da nicht alle Reihen im DOM sind, haben wir die aria-rowindex Eigenschaft auf jeder Reihe eingefügt.

Beste Praktiken

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für Daten-Tabellenstrukturen. Sie können diese ARIA-Rollen hinzufügen, um die Zugänglichkeit sicherzustellen, falls die nativen Semantiken der Tabelle entfernt werden, zum Beispiel mit CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle 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 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 und Weise, eine Tabelle zu schreiben. Die ARIA-Rollen sind nur erforderlich, wenn die nativen Semantiken der Tabelle und damit der Tabellenreihen entfernt werden, zum Beispiel durch Setzen der display-Eigenschaft auf flex oder grid.

Zusatznutzen

Keine

Spezifikationen

Siehe auch

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