ARIA: Rolle "cell"

Das Element mit role="cell" ist eine Zelle innerhalb einer Zeile, optional innerhalb einer rowgroup, innerhalb einer table. Befindet sich die Zelle in einem grid oder treegrid, sollte gridcell bevorzugt werden. Wann immer möglich, wird dringend empfohlen, native HTML-<td>-Elemente zu verwenden.

Jedes Element mit role="cell" MUSS in einem Containerelement mit role="row" geschachtelt sein. Diese Zeile kann wiederum in einem Element mit role="rowgroup" geschachtelt sein und sollte in einem grid, table oder treegrid geschachtelt sein. Wenn eine Zelle Spalten- oder Zeilenheader-Informationen enthält, verwenden Sie die Rollen columnheader oder rowheader. Wenn die Zelle keine Header-Informationen enthält und in einem grid oder treegrid geschachtelt ist, könnte die Rolle gridcell passender sein.

Eine Zelle kann eine Reihe von Property-Attributen enthalten, die die Position der Zelle innerhalb der tabellarischen Datenstruktur klären, einschließlich aria-colindex, aria-colspan, aria-rowindex und aria-rowspan.

Kontextrollen

role="row"

Ein Element mit role="row" ist eine Zeile von Zellen innerhalb einer tabellarischen Struktur. Eine Zeile enthält eine oder mehrere Zellen, Grid Cells, Spaltenheader oder Zeilenheader innerhalb eines grid, einer table oder eines treegrid und optional innerhalb einer rowgroup.

role="rowgroup"

Row ist ein erforderliches Zellenelternelement. Rowgroup ist ein optionales kontextuelles Zeilenelternelement. Es stellt eine Beziehung zwischen nachfolgenden Zeilen her. Es ist das strukturelle Äquivalent zu den thead, tfoot und tbody-Elementen in einem HTML-table-Element.

role="table"

Eine von drei möglichen Kontexten (zusammen mit grid und treegrid), in denen man eine Zeile mit Zellen finden kann. Tabelle identifiziert die Zelle als Teil einer nicht-interaktiven Tabellenstruktur, die Daten in Zeilen und Spalten anordnet, ähnlich dem nativen HTML-<table>-Element.

role="grid"

Eine von drei möglichen Kontexten (zusammen mit table und treegrid), in denen man eine Zeile mit cells und gridcells finden kann. Grid identifiziert eine Zelle als Teil einer möglicherweise interaktiven Tabellenstruktur, die Daten in Zeilen und Spalten anordnet, ähnlich dem nativen <table>-HTML-Element.

role="treegrid"

Ähnlich einem Grid, aber mit Zeilen, die in derselben Weise erweitert und zusammengeklappt werden können wie in einem Baum.

Unterklassenrollen

role="gridcell"

Eine Zelle in einer Zeile innerhalb eines grid oder treegrid.

role="columnheader"

Eine Header-Zelle, die das strukturelle Äquivalent des HTML-<th>-Elements mit einer Spaltenreichweite darstellt. 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 Header-Zelle, die das strukturelle Äquivalent des HTML-<th>-Elements mit einer Zeilenreichweite darstellt. 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-colspan

Ähnlich wie das HTML-<th>- und das <td>-colspan-Attribut definiert es, wie viele Spalten von der Zelle überspannt werden.

aria-rowspan

Ähnlich wie das HTML-<th>- und das <td>-rowspan-Attribut definiert es, wie viele Zeilen von der Zelle überspannt werden.

aria-colindex-Attribut

Das aria-colindex-Attribut wird nur benötigt, wenn Spalten im DOM verborgen sind. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Spalten innerhalb der table, grid oder treegrid an. Das aria-colindex definiert den Spaltenindex oder die Position eines Elements relativ zur Gesamtanzahl der Spalten innerhalb einer Zeile. Wenn alle Spalten im DOM vorhanden 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, in welcher Zeile, in der Liste der gesamten Zeilen, sich die aktuelle Zelle befindet. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Zeilen innerhalb der Tabelle, des Gitters oder des Baumgitters an und gibt die Position oder den Index der Zelle an. Zum Beispiel würde eine Zelle in der ersten Zeile des ersten Headers wahrscheinlich aria-rowindex="1" haben, und Zellen in Zeile 47 würden aria-rowindex="47" haben, falls aria-rowindex aufgrund der Tatsache benötigt wird, dass nicht alle Zeilen im DOM sind. Wenn die sichtbaren Zeilen aneinandergrenzen und es keine Zellen mit einem colspan oder rowspan größer als eins gibt, kann diese Eigenschaft zu den übergeordneten Zeilen anstelle aller Zellen der Reihen hinzugefügt werden.

Keine.

Die erste Regel für die Verwendung von ARIA lautet: Wenn Sie eine native Funktion mit den bereits integrierten Semantiken und Verhaltensweisen verwenden können, anstatt ein Element umzufunktionieren und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies. Verwenden Sie das HTML-Element <td> anstelle der ARIA-Rolle cell wann immer möglich.

<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-rowindex="1"
        >ARIA Role</span
      >
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
        >Semantic Element</span
      >
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell" aria-rowindex="11">header</span>
      <span role="cell" aria-rowindex="11">h1</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="16">header</span>
      <span role="cell" aria-rowindex="16">h6</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="18">rowgroup</span>
      <span role="cell" aria-rowindex="18">thead</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="24">term</span>
      <span role="cell" aria-rowindex="24">dt</span>
    </div>
  </div>
</div>

Das oben stehende Beispiel ist eine nicht-semantische ARIA-Tabelle mit fünf von 81 Zeilen, die im DOM vorhanden sind: Eine innerhalb eines Tabellen-Headers und vier Zeilen innerhalb des Tabellenkörpers. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex-Eigenschaft auf jeder Zelle hinzugefügt. Wenn keine Zellen mehr als eine Zeile oder Spalte überspannten, könnte das aria-rowindex auf die Zeile anstatt auf die einzelnen Zellen der Zeile gesetzt werden.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für die Daten-Tabellenstruktur. Sie können ARIA-Rollen hinzufügen, um die Barrierefreiheit zu gewährleisten, falls die nativen Semantiken der Tabelle entfernt werden, zum Beispiel durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist gegeben, wenn die nativen Semantiken einer Tabelle durch die CSS-Display-Eigenschaft, wie etwa durch display: grid, überschrieben werden. 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-rowindex="1">ARIA Role</th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>

Oben ist die semantische Art, eine Tabelle zu schreiben. Die ARIA-Rollen sind nicht notwendig, wenn die nativen Semantiken der Tabelle und somit der Tabellenzeilen nicht verändert wurden, wie beispielsweise durch die Display-Eigenschaft.

Bei Anwendung auf ein <td> werden die Zellen-Semantiken dem Element zurückgegeben, falls die Semantiken entfernt wurden, etwa durch display: grid;.

• role="row"
• role="gridcell"
• HTML <td>-Element
• HTML <th>-Element
• Erlernen: Barrierefreiheit für HTML-Tabellen
• Erlernen: Grundlegendes zu HTML-Tabellen