ARIA: role="row"

Das Element mit role="row" ist eine Zeile innerhalb eines grid, table oder treegrid und optional innerhalb eines rowgroup, das ein oder mehrere cell, gridcell, columnheader oder rowheader Elemente in 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 Grids, einer Tabelle oder eines Treegrids verschachtelt sein. Eine Gruppe von Zeilen kann direkt innerhalb eines Grids, einer Tabelle oder eines Treegrids oder innerhalb einer Zeilengruppe in einem dieser Container verschachtelt sein. Jede Zeile enthält Kinderzellen. Diese Zellen können je nach Typ unterschiedliche Typen haben, abhängig davon, ob sie Spalten- oder Zeilenüberschriften oder Raster- oder reguläre Zellen sind.

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

Wenn sich die Zeile innerhalb eines Treegrids befindet, können Zeilen das aria-expanded Attribut einschließen, um den aktuellen Status anzuzeigen. Dies ist nicht der Fall in einer gewöhnlichen Tabelle oder einem Grid, in dem das aria-expanded Attribut nicht vorhanden ist.

Um ein interaktives Widget mit tabellarischer Struktur zu erstellen, verwenden Sie stattdessen das Grid-Muster. Wenn die Interaktion den Auswahlstatus einzelner Zellen ermöglicht, wenn von links nach rechts und von oben nach unten Navigation ermöglicht wird oder wenn die Benutzeroberfläche das Umordnen der Zellreihenfolge oder sonstiges Ändern der Reihenfolge einzelner Zellen wie durch Drag and Drop ermöglicht, verwenden Sie stattdessen grid oder treegrid.

Kontextrollen

role="rowgroup"

Ein optionales kontextuelles Elternelement einer Zeile, das eine Beziehung zwischen nachgeordneten Zeilen herstellt. Es ist ein strukturequivalentes Element 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 werden. Es identifiziert die Zeile als Teil einer nicht-interaktiven Tabellenstruktur, 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 (zusammen mit table und treegrid), in denen Sie eine Zeile finden werden. Es identifiziert die Zeile als Teil einer nicht-interaktiven Tabellenstruktur, die Daten enthält, die in Zeilen und Spalten angeordnet sind, ähnlich dem nativen <table> HTML-Element.

role="treegrid"

Ähnlich wie ein Grid, jedoch mit Zeilen, die erweitert und reduziert werden können, genauso wie bei einem Baum.

Nachgeordnete Rollen

role="cell"

Eine Zelle in einer Zeile innerhalb eines tabellarischen Containers.

role="gridcell"

Eine Zelle in einer Zeile innerhalb eines Grids oder Treegrids.

role="columnheader"

Eine Kopfzelle, die das strukturelle Äquivalent des HTML <th> Elements mit einem Spaltenbereich (<tr scope="col">) ist. Im Gegensatz zu einer normalen Zelle stellt die Rolle columnheader eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Spalte her.

role="rowheader"

Eine Kopfzelle, die das strukturelle Äquivalent des HTML <th> Elements mit einem Zeilenbereich (<tr scope="row">) ist. Im Gegensatz zu einer normalen 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 aria-expanded Attribut, das den Zustand der Zeile definiert, kann einen von drei Werten annehmen oder weggelassen werden:

• aria-expanded="true": Die Zeile ist derzeit erweitert.
• aria-expanded="false": Die 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 Gruppierungselements steuert, das nicht vom Element selbst "besessen" wird, sollte der Autor muss den Container durch Verwendung des aria-controls Attributs 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 aria-selected Attribut kann einen von drei Werten annehmen oder weggelassen werden:

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

aria-colindex Attribut

Das aria-colindex Attribut wird nur benötigt, wenn Spalten im DOM ausgeblendet sind. Es wird im Allgemeinen auf Kinder der Zeile und nicht auf die Zeile selbst gesetzt. Wenn die angezeigten Spalten zusammenhängend sind, kann es auf der Zeile platziert werden.

Das Attribut nimmt als Wert eine Ganzzahl zwischen 1 und der Gesamtanzahl der Spalten innerhalb der Tabelle, des Grids oder des Treegrids an. Wenn es auf der Zeile platziert ist, definiert das 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 die Spalten 4, 5 und 6 sind im DOM, könnte aria-colindex="4" auf jede Zeile gesetzt werden.

Wenn die Gruppe von Spalten, die im DOM vorhanden ist, nicht zusammenhängend ist oder wenn es Zellen gibt, die sich über mehr als eine Zeile oder Spalte erstrecken, setzen Sie das aria-colindex Attribut bei allen Kindern jeder Zeile anstelle der Zeile selbst.

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

aria-rowindex Attribut

Das aria-rowindex Attribut wird nur benötigt, wenn Zeilen im DOM ausgeblendet sind, um anzugeben, welche Zeile in der Liste der gesamten Zeilen gelesen wird. Das Attribut, platziert mit einem eindeutigen Wert auf jeder Zeile, nimmt als Wert eine Ganzzahl zwischen 1 und der Gesamtanzahl der Zeilen innerhalb der Tabelle, des Grids oder des Treegrids an, wobei die Position oder der Index jeder Zeile angezeigt wird. 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 der Kopfzeile gesetzt, und aria-rowindex="47" und aria-rowindex="52" würden auf der 47. und 52. Zeile gesetzt.

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

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>

Das obige ist eine nicht-semantische ARIA-Tabelle mit fünf von 81 Zeilen, die im DOM vorhanden sind: Eine innerhalb eines Tabellenkopfes und vier Zeilen im Tabellenkörper. Die Kopfzeile allein in einer Kopfzeilengruppe hat zwei Spaltenüberschriften. Die Spalten sind sortierbar, aber derzeit 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 sind. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex Eigenschaft auf jeder Zeile eingefügt.

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 Semantiken der Tabelle entfernt werden, etwa durch CSS. Ein relevanter Anwendungsfall für die Verwendung der ARIA-Tabellenrolle ist, wenn die nativen Semantiken einer Tabelle durch die Anzeigeeigenschaft von CSS überschrieben werden, wie 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 dann erforderlich, wenn die nativen Semantiken der Tabelle und damit die Tabellenzeilen aufgehoben wurden, etwa durch das Setzen der display-Eigenschaft auf flex oder grid.

Keine

• Das HTML <tr> Tabellenzeile 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