ARIA: row Rolle

Ein Element mit role="row" ist eine Zeile von Zellen innerhalb einer tabellarischen Struktur. Eine Zeile enthält eine oder mehrere Zellen, Rasterzellen oder Spaltenüberschriften und möglicherweise eine Zeilenüberschrift innerhalb eines grid, table oder treegrid und optional innerhalb einer rowgroup.

<div
  role="table"
  aria-label="Populations"
  aria-describedby="country_population_desc">
  <div id="country_population_desc">World Populations by Country</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">Country</span>
      <span role="columnheader" aria-sort="none">Population</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Finland</span>
      <span role="cell">5.5 million</span>
    </div>
    <div role="row">
      <span role="cell">France</span>
      <span role="cell">67 million</span>
    </div>
  </div>
</div>

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 nativer HTML <tr> Elemente wird, wann immer möglich, dringend empfohlen.

Um eine ARIA-Zeile zu erstellen, fügen Sie role="row" zum Container-Element 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 Rowgroup in einem dieser Container verschachtelt werden. Jede Zeile enthält untergeordnete Zellen. Diese Zellen können je nach ihrer Funktion als Spalten- oder Zeilenüberschriften, Rasters oder reguläre Zellen unterschiedliche Typen haben.

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

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

Um ein interaktives Widget zu erstellen, das eine tabellarische Struktur hat, verwenden Sie stattdessen das Rastermuster. Wenn die Interaktion den Auswahlsstatus einzelner Zellen ermöglicht, wenn die Navigation von links nach rechts und von oben nach unten bereitgestellt wird oder wenn die Benutzeroberfläche das Umordnen der Zellreihenfolge oder das Ändern der Reihenfolge einzelner Zellen wie durch Drag-and-Drop ermöglicht, verwenden Sie stattdessen Grid oder Treegrid.

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

Kontextrollen

role="rowgroup"

Ein optionales kontextuelles Zeilen-Elternelement, es etabliert eine Beziehung zwischen nachfolgenden Zeilen. Es ist ein strukturelles Ä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, aber mit Zeilen, die auf die gleiche Weise wie bei einem Baum erweitert und reduziert werden können.

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

• aria-expanded="true": Zeile ist aktuell erweitert.
• aria-expanded="false": Zeile ist aktuell 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 kontrolliert, der nicht "im Besitz" des Elements ist, sollte der Autor auf den Container mit dem aria-controls Attribut verweisen.

aria-selected Zustand

Nur relevant, wenn die Zeile in einem interaktiven Container ist, 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": Zeile ist aktuell ausgewählt.
• aria-selected="false": Zeile ist nicht aktuell ausgewählt.
• aria-selected="undefined" oder das Attribut fehlt: Die Zeile ist nicht auswählbar.

aria-colindex Attribut

Das aria-colindex Attribut ist nur erforderlich, wenn Spalten im DOM verborgen sind. Es wird generell auf die Zeilenkinder platziert, anstatt auf die 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 Grids oder des Treegrids. Wenn es auf die Zeile gesetzt wird, definiert das aria-colindex den Spaltenindex eines Elements oder die Position in Bezug auf die Gesamtanzahl der Spalten innerhalb einer Zeile. Zum Beispiel, in einer Tabelle mit 15 Spalten, und Spalte 4, 5 und 6 sind im DOM, könnte aria-colindex="4" auf jede Zeile gesetzt werden.

Wenn die Reihe von Spalten, die im DOM vorhanden ist, nicht zusammenhängend ist oder wenn Zellen mehr als eine Zeile oder Spalte überspannen, 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 notwendig.

aria-rowindex Attribut

Das aria-rowindex Attribut wird nur benötigt, wenn Zeilen im DOM verborgen sind, um anzugeben, welche Zeile in der Liste der Gesamtzeilen 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 innerhalb der Tabelle, des Grids oder des Treegrids, die die Position oder den Index jeder Zeile anzeigt. 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 werden, und aria-rowindex="47" und aria-rowindex="52" würden auf die 47. und 52. Zeile 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>

Das obige ist eine nicht-semantische ARIA-Tabelle mit fünf von 81 im DOM vorhandenen Zeilen: Eine innerhalb eines Tabellenkopfes und vier Zeilen im Tabellenkörper. Die Kopfzeile, allein in einem Kopfzeilen-Rowgroup, hat zwei Spaltenüberschriften. Die Spalten sind sortierbar, aber derzeit nicht sortiert, wie durch die aria-sort Eigenschaft angezeigt wird. Der Tabellenkörper ist in einem separaten Rowgroup, mit vier derzeit im DOM vorhandenen Zeilen. Da nicht alle Zeilen im DOM vorhanden sind, haben wir das aria-rowindex Attribut auf jede Zeile eingefügt.

Beste Praktiken

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td>, usw., für die Datenstruktur der Tabelle. Sie können diese ARIA-Rollen hinzufügen, um die Barrierefreiheit sicherzustellen, falls die nativen Semantiken der Tabelle entfernt werden, z. B. durch CSS. Ein relevanter Anwendungsfall für die 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 Weise, eine Tabelle zu schreiben. Die ARIA-Rollen sind nur notwendig, wenn die nativen Semantiken der Tabelle und daher die Tabellenzeilen gelöscht werden, wie über die Einstellung der Display-Eigenschaft auf Flex oder Grid.

Zusätzliche 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