ARIA: row Rolle

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

Um eine ARIA-Zeile zu erstellen, fügen Sie role="row" zum Containerelement hinzu. Diese Zeile sollte innerhalb eines Gitters, einer Tabelle oder eines Baumgitters verschachtelt sein. Eine Gruppe von Zeilen kann direkt innerhalb eines Gitters, einer Tabelle oder eines Baumgitters oder innerhalb einer Zeilengruppe in einem dieser Container verschachtelt sein. Jede Zeile enthält Kinderzellen. Diese Zellen können je nach ihrer Funktion als Spalten- oder Zeilenüberschriften oder Raster- bzw. reguläre Zellen unterschiedliche Typen haben.

Eine Zeile kann eine Anzahl von Attributen enthalten, die die Rolle der Zeile klären, einschließlich aria-colindex, aria-level, aria-rowindex und aria-selected.

Wenn sich die Zeile innerhalb eines Baumgitters befindet, können Zeilen das Attribut aria-expanded enthalten, um den aktuellen Status anzuzeigen. Dies ist nicht der Fall bei einer gewöhnlichen Tabelle oder einem Gitter, in denen das aria-expanded Attribut nicht vorhanden ist.

Um ein interaktives Widget mit tablaturen Struktur zu erstellen, verwenden Sie stattdessen das Rastermuster. Wenn die Interaktion die Auswahl einzelner Zellen ermöglicht, die Navigation von links nach rechts und oben nach unten vorgesehen ist oder die Benutzeroberfläche das Umordnen der Zellreihenfolge oder eine andere Änderung der Zellreihenfolge durch Ziehen und Ablegen ermöglicht, verwenden Sie stattdessen grid oder treegrid.

Kontextrollen

role="rowgroup"

Ein optionales kontextuelles Zeilen-Elternelement, das eine Beziehung zwischen den nachgeordneten Zeilen herstellt. Es ist strukturell äquivalent zu den thead-, tfoot- und tbody-Elementen in einem HTML-Tabellenelement.

role="table"

Einer der drei möglichen Kontexte (zusammen mit grid und treegrid), in denen Sie eine Zeile finden, 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, 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 Grid, jedoch mit Zeilen, die in der gleichen Weise wie ein 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 Gitters oder Baumgitters.

role="columnheader"

Eine Kopfzelle, die strukturell dem HTML <th>-Element mit einer Spaltenrichtung (<tr scope="col">) entspricht. Im Gegensatz zu einer einfachen Zelle stellt die Rolle columnheader eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Spalte her.

role="rowheader"

Eine Kopfzelle, die strukturell dem HTML <th>-Element mit einer Zeilenrichtung (<tr scope="row">) entspricht. Im Gegensatz zu einer einfachen Zelle stellt die Rolle rowheader 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 Attribut aria-expanded die Expansion eines anderen Gruppierungscontainers steuert, der nicht "besessen" wird von diesem Element, sollte der Autor den Container mit dem Attribut aria-controls referenzieren.

aria-selected Zustand

Nur relevant, wenn die Zeile in einem interaktiven Container, wie einem Grid oder Treegrid, aber nicht relevant, wenn die Zeile in einer Tabelle ist. 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 sind. Es wird in der Regel auf Zeilen-Kindern platziert, anstatt auf der Zeile selbst. Wenn die angezeigten Spalten zusammenhängend sind, kann es auf die Zeile gesetzt werden.

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

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

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

aria-rowindex Attribut

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

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

Keine

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

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

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td>, etc., für die Datenstruktur einer Tabelle. Sie können diese ARIA-Rollen hinzufügen, um die Zugänglichkeit zu gewährleisten, sollte die native Semantik der Tabelle entfernt werden, zum Beispiel durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn die native Semantik einer Tabelle durch die Anzeigeeigenschaft von CSS überschrieben wird, zum Beispiel 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 notwendig, wenn die native Semantik der Tabelle und somit die Tabellenzeilen aufgehoben werden, wie durch das Setzen der Anzeigen-Eigenschaft auf flex oder grid.

keine

• 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