ARIA: cell Rolle

Das Element mit role="cell" ist eine Zelle innerhalb einer Zeile, optional innerhalb einer rowgroup, innerhalb einer table. Wenn sich die Zelle in einem grid oder treegrid befindet, sollten Sie gridcell verwenden. Die Verwendung nativer HTML <td>-Elemente wird, wann immer möglich, dringend empfohlen.

Jedes Element mit role="cell" MUSS in einem Container-Element mit role="row" verschachtelt sein. Diese Zeile kann wiederum in einem Element mit role="rowgroup" verschachtelt sein und sollte innerhalb eines grid, table oder treegrid verschachtelt sein. Wenn eine Zelle Spalten- oder Zeilenkopf-Informationen enthält, verwenden Sie entsprechend die Rollen columnheader oder rowheader. Wenn die Zelle keine Kopf-Informationen enthält und in einem grid oder treegrid verschachtelt ist, könnte die Rolle gridcell angemessener sein.

Eine Zelle kann eine Reihe von Eigenschaftsattributen enthalten, die die Position der Zelle innerhalb der tabellarischen Datenstruktur verdeutlichen, einschließlich aria-colindex, aria-colspan, aria-rowindex und aria-rowspan.

Kontext-Rollen

role="row"

Ein Element mit role="row" ist eine Reihe von Zellen innerhalb einer tabellarischen Struktur. Eine Zeile enthält eine oder mehrere Zellen, Rasterzellen, Spaltenköpfe oder Zeilenköpfe innerhalb eines grid, table oder treegrid, und optional innerhalb einer rowgroup.

role="rowgroup"

Row ist ein erforderlicher Zellenelternteil. Rowgroup ist ein optionaler kontextbezogener Zeilenelternteil. Es stellt eine Beziehung zwischen untergeordneten Zeilen her. Es ist ein strukturelles Äquivalent zu den Elementen thead, tfoot und tbody in einem HTML table-Element.

role="table"

Einer der drei möglichen Kontexte (neben grid und treegrid), in denen Sie eine Zeile mit Zellen finden. Table identifiziert die Zelle als Teil einer nicht interaktiven Tabellenstruktur, die Daten in Reihen und Spalten enthält, ähnlich wie das native HTML <table>-Element.

role="grid"

Einer der drei möglichen Kontexte (neben table und treegrid), in denen Sie eine Zeile mit cells und gridcells finden. Grid identifiziert eine Zelle als Teil einer möglicherweise interaktiven Tabellenstruktur, die Daten in Reihen und Spalten enthält, ähnlich wie das native <table>-HTML-Element.

role="treegrid"

Ähnlich wie ein Grid, jedoch mit Zeilen, die auf die gleiche Weise wie ein Baum ein- und ausgeklappt werden können.

Unterklassenrollen

role="gridcell"

Eine Zelle in einer Zeile innerhalb eines grid oder treegrid.

role="columnheader"

Eine Kopfzelle, die das strukturelle Äquivalent des HTML <th>-Elements mit einer Spaltendimension ist. Anders als eine einfache Zelle stellt die columnheader-Rolle 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 einer Zeilendimension ist. Anders als eine einfache Zelle stellt die rowheader-Rolle eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Zeile her.

Zustände und Eigenschaften

aria-colspan

Ähnlich dem HTML <th> und dem <td> colspan Attribut, definiert es die Anzahl der Spalten, die von der Zelle überspannt werden.

aria-rowspan

Ähnlich dem HTML <th> und dem <td> rowspan Attribut, definiert es die Anzahl der Zeilen, die von der Zelle überspannt werden.

aria-colindex-Attribut

Das aria-colindex-Attribut wird nur benötigt, wenn Spalten aus dem DOM ausgeblendet sind. Das Attribut nimmt als Wert eine Ganzzahl 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 in Bezug auf die Gesamtanzahl der Spalten innerhalb einer Zeile. Wenn sich alle Spalten im DOM befinden, ist dieses Attribut nicht erforderlich.

aria-rowindex-Attribut

Das aria-rowindex-Attribut wird nur benötigt, wenn Zeilen aus dem DOM ausgeblendet sind, um anzugeben, in welcher Zeile der aktuellen Zelle innerhalb der Gesamtliste von Zeilen sie sich befindet. Das Attribut nimmt als Wert eine Ganzzahl zwischen 1 und der Gesamtanzahl der Zeilen innerhalb der Tabelle, des Grids oder des Baumrasters an, um die Position oder den Index der Zelle anzugeben. Beispielsweise hätte eine Zelle in der ersten Zeile des ersten Headers wahrscheinlich aria-rowindex="1" gesetzt, und Zellen in Zeile 47 hätten aria-rowindex="47", wenn aria-rowindex aufgrund nicht aller Zeilen im DOM benötigt wird. Wenn die sichtbaren Zeilen zusammenhängend sind und es keine Zellen mit einem colspan oder rowspan größer als eins gibt, kann diese Eigenschaft stattdessen zu den übergeordneten Zeilen anstatt zu allen Zeilenzellen hinzugefügt werden.

Keine

Die erste Regel der ARIA-Verwendung ist, wenn Sie ein natives Feature mit den erforderlichen Semantiken und Verhaltensweisen verwenden können, anstatt ein Element zu zweckentfremden 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 <td>-Element 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 Obige ist eine nicht-semantische ARIA-Tabelle mit fünf von 81 Zeilen, die im DOM präsent sind: eine innerhalb eines Tabellenkopfs 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 aria-rowindex auf der Zeile anstatt auf den individuellen Zellen der Zeile platziert werden.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für Datenstrukturen von Tabellen. Sie können ARIA-Rollen hinzufügen, um die Zugänglichkeit sicherzustellen, falls die nativen Semantiken der Tabelle entfernt werden, zum Beispiel durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn die nativen Semantiken einer Tabelle durch CSSs Anzeigeeigenschaft, wie 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 die Tabellenzeilen, nicht verändert wurden, zum Beispiel durch die Anzeigeeigenschaft.

Wenn auf ein <td> angewandt, stellt es die Zellensemantiken für das Element wieder her, falls die Semantiken entfernt wurden, wie z. B. durch display: grid;.

• role="row"
• role="gridcell"
• HTML <td> Element
• HTML <th> Element
• HTML Tabellen erweiterte Funktionen und Barrierefreiheit
• HTML Tabellen Grundlagen