ARIA: row-Rolle

Beschreibung

Das Element mit role="row" ist eine Zeile innerhalb eines grid, table oder treegrid und optional innerhalb einer rowgroup, die ein oder mehrere cell, gridcell, columnheader oder rowheader Elemente innerhalb einer statischen tabellarischen Struktur enthält. Die Verwendung von nativen HTML <tr>-Elementen wird nachdrücklich empfohlen, wann immer dies möglich ist.

Um eine ARIA-Zeile zu erstellen, fügen Sie role="row" zu dem Container-Element hinzu. Diese Zeile sollte in einem Raster, einer Tabelle oder einem Baumraster verschachtelt sein. Eine Gruppe von Zeilen kann direkt in einem Raster, einer Tabelle oder einem Baumraster oder innerhalb einer Zeilengruppe in einem dieser Container verschachtelt werden. Jede Zeile enthält untergeordnete Zellen. Diese Zellen können je nach Funktion unterschiedlich sein, sei es als Spalten- oder Zeilenüberschriften oder als Raster- oder reguläre Zellen.

Eine Zeile kann eine Reihe von Attributen enthalten, die die Rolle der Zeile klarstellen, einschließlich aria-colindex, aria-level, aria-rowindex und aria-selected.

Wenn sich die Zeile in einem Baumraster befindet, können Zeilen das Attribut aria-expanded einschließen, um den aktuellen Status anzuzeigen. Dies gilt nicht für eine gewöhnliche Tabelle oder ein Raster, in denen das Attribut aria-expanded nicht vorhanden ist.

Um ein interaktives Widget mit einer tabellarischen Struktur zu erstellen, verwenden Sie stattdessen das Rastermuster. Wenn die Interaktion den Auswahllstatus einzelner Zellen bietet, von links nach rechts und von oben nach unten Navigation zulässt oder die Benutzeroberfläche das Umordnen der Zellreihenfolge oder das Ändern der Reihenfolge einzelner Zellen, wie z.B. durch Drag & Drop, ermöglicht, verwenden Sie stattdessen grid oder treegrid.

Zugeordnete WAI-ARIA-Rollen, Zustände und Eigenschaften

Kontextrollen

role="rowgroup"

Ein optional übergeordneter Zeilen-Kontext, der eine Beziehung zwischen nachgeordneten Zeilen herstellt. Es ist das strukturelle Äquivalent zu den Elementen thead, tfoot und tbody in einem HTML-Tabellenelement.

role="table"

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

role="grid"

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

role="treegrid"

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

Nachgeordnete Rollen

role="cell"

Eine Zelle in einer Zeile innerhalb eines tabellarischen Containers.

role="gridcell"

Eine Zelle in einer Zeile innerhalb eines Rasters oder Baumrasters.

role="columnheader"

Eine Kopfzeilen-Zelle, die das strukturelle Äquivalent des HTML-<th>-Elements mit Spaltenbereich (<tr scope="col">) darstellt. Im Gegensatz zu einer einfachen Zelle stellt die Spaltenkopfzeilenrolle eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Spalte her.

role="rowheader"

Eine Kopfzeilen-Zelle, die das strukturelle Äquivalent des HTML-<th>-Elements mit Zeilenbereich (<tr scope="row">) darstellt. Im Gegensatz zu einer einfachen Zelle stellt die Zeilenkopfzeilenrolle eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Zeile her.

Zustände und Eigenschaften

aria-expanded Zustand

Das Attribut aria-expanded, das den Zustand der Zeile definiert, kann einen von drei Werten annehmen oder weggelassen werden:

• aria-expanded="true": Zeile ist derzeit erweitert.
• aria-expanded="false": Zeile ist derzeit reduziert.
• aria-expanded="undefined" oder das Attribut fehlt: Die Zeile ist weder erweiterbar noch reduzierbar.

Wenn das Element mit dem aria-expanded-Attribut die Erweiterung eines anderen Gruppierungscontainers steuert, der nicht "im Besitz" des Elements ist, sollte der Autor den Container unter Verwendung des aria-controls-Attributs referenzieren.

aria-selected Zustand

Nur relevant, wenn sich die Zeile in einem interaktiven Container, wie einem Raster oder Baumraster, befindet, aber nicht relevant, wenn sich die Zeile in einer Tabelle befindet. Das Attribut aria-selected kann einen von drei Werten annehmen oder weggelassen werden:

• aria-selected="true": Zeile ist derzeit ausgewählt.
• aria-selected="false": Zeile ist derzeit nicht ausgewählt.
• aria-selected="undefined" oder das Attribut fehlt: Die Zeile ist nicht auswählbar.

aria-colindex Attribut

Das Attribut aria-colindex wird nur benötigt, wenn Spalten aus dem DOM ausgeblendet werden. Es wird im Allgemeinen auf untergeordneten Zeilen platziert, anstatt auf der Zeile selbst. Wenn die angezeigten Spalten zusammenhängend sind, kann es auf der Zeile platziert werden.

Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Spalten in der Tabelle, dem Raster oder dem Baumraster an. Wenn es auf der Zeile platziert wird, definiert aria-colindex den Spaltenindex oder die Position eines Elements in Bezug auf die Gesamtanzahl der Spalten innerhalb einer Zeile. Zum Beispiel in einer Tabelle mit 15 Spalten und den Spalten 4, 5 und 6 im DOM könnte aria-colindex="4" auf jede Zeile gesetzt werden.

Wenn die im DOM vorhandenen Spalten nicht zusammenhängend sind oder es Zellen gibt, die sich über mehr als eine Zeile oder Spalte erstrecken, setzen Sie aria-colindex auf alle Kinder jeder Zeile, anstatt auf die Zeile selbst.

Wenn alle Spalten im DOM vorhanden sind, ist dieses Attribut nicht notwendig.

aria-rowindex Attribut

Das Attribut aria-rowindex wird nur benötigt, wenn Zeilen aus dem DOM ausgeblendet werden, um anzuzeigen, welche Zeile in der Liste der gesamten Zeilen gelesen wird. Das Attribut, das mit einem eindeutigen Wert auf jeder Zeile platziert wird, nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Zeilen in der Tabelle, dem Raster oder dem Baumraster an und zeigt die Position oder den Index jeder Zeile an. Zum Beispiel, wenn eine Tabelle 1.500 Zeilen hat, aber nur die Kopfzeile und die Zeilen 47 und 52 im DOM sind, würde aria-rowindex="1" auf die Kopfzeile gesetzt und aria-rowindex="47" und aria-rowindex="52" auf die 47. und 52. Zeile entsprechend gesetzt.

Wenn alle Zeilen im DOM vorhanden sind, ist dieses Attribut nicht notwendig.

Tastaturinteraktionen

Keine.

Erforderliche JavaScript-Funktionen

Keine. Für sortierbare Spalten siehe die columnheader aria-Rolle.

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 fünf der 81 Zeilen, die im DOM vorhanden sind: Eine innerhalb eines Tabellenkopfes und vier Zeilen innerhalb des Tabellenkörpers. Die Kopfzeile, allein in einer Kopfzeilengruppe, hat zwei Spaltenüberschriften. Die Spalten sind sortierbar, derzeit aber nicht sortiert, wie durch die aria-sort Eigenschaft angezeigt. Der Tabellenkörper befindet sich in einer separaten Zeilengruppe mit vier Zeilen, die derzeit im DOM vorhanden sind. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex Eigenschaft auf jeder Zeile aufgenommen.

Best Practices

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für die Datenstrukturtabelle. Sie können diese ARIA-Rollen hinzufügen, um die Zugänglichkeit sicherzustellen, falls die nativen Sementiken der Tabelle entfernt werden, beispielsweise durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn die nativen Semantiken einer Tabelle durch die display-Eigenschaft von CSS überschrieben werden, z.B. durch display: grid. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantiken 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>
    <tr role="row" aria-rowindex="18">
      <td role="cell">rowgroup</td>
      <td role="cell">thead</td>
    </tr>
    <tr role="row" aria-rowindex="24">
      <td role="cell">term</td>
      <td role="cell">dt</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 die Tabellenzeilen beseitigt werden, z.B. durch das Setzen der display-Eigenschaft auf flex oder grid.

Zugefügte Vorteile

Keine

Spezifikationen

Siehe auch

• Das HTML-<tr> table row-Element
• <table>
• Die rowgroup Rolle
• Die table Rolle
• Die grid Rolle
• Die treegrid Rolle
• Die cell Rolle
• Die gridcell Rolle
• Die columnheader Rolle
• Die rowheader Rolle