ARIA: cell Rolle

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

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

Eine Zelle kann mehrere Eigenschaftsattributen 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, Gitterzellen, Spaltenüberschriften oder Zeilenüberschriften innerhalb eines grid, table oder treegrid und optional innerhalb einer rowgroup.

role="rowgroup"

Row ist ein erforderliches Zellen-Elternelement. Rowgroup ist ein optionales, kontextuelles Zeilen-Elternelement. Es stellt eine Beziehung zwischen Nachkommenzeilen her. Es ist ein strukturelles Äquivalent zu den Elementen thead, tfoot und tbody in einem HTML table-Element.

role="table"

Eines der drei möglichen Kontexte (zusammen mit grid und treegrid), in denen Sie eine Zeile mit Zellen finden werden. Table identifiziert die Zelle als Teil einer nicht-interaktiven tabellarischen Struktur, die Daten in Zeilen und Spalten anordnet, ähnlich dem nativen HTML <table>-Element.

role="grid"

Eine der drei möglichen Kontexte (zusammen mit 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 Zeilen und Spalten anordnet, ähnlich dem nativen <table> HTML-Element.

role="treegrid"

Ähnlich einem Gitter, aber mit Zeilen, die wie bei einem Baum erweitert und reduziert 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 Spaltenscope ist. Anders als eine einfache Zelle stellt die columnheader-Rolle eine Beziehung zu allen Zellen in der entsprechenden Spalte her.

role="rowheader"

Eine Kopfzelle, die das strukturelle Äquivalent des HTML <th>-Elements mit einer Zeilenscope ist. Anders als eine einfache Zelle stellt die rowheader-Rolle eine Beziehung zu 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 von der Zelle überspannten Spalten.

aria-rowspan

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

aria-colindex Attribut

Das aria-colindex-Attribut ist nur erforderlich, wenn Spalten aus dem DOM ausgeblendet sind. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Spalten innerhalb der table, grid oder treegrid. Das aria-colindex definiert den Spaltenindex oder die Position eines Elements in Bezug auf die Gesamtzahl der Spalten innerhalb einer Zeile. Wenn alle Spalten im DOM sind, ist dieses Attribut nicht erforderlich.

aria-rowindex Attribut

Das aria-rowindex-Attribut ist nur erforderlich, wenn Zeilen aus dem DOM ausgeblendet sind, um anzugeben, in welcher Zeile, in der Liste der Gesamtzeilen, sich die aktuelle Zelle befindet. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtzahl 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 der ersten Kopfzeile wahrscheinlich aria-rowindex="1" haben, und Zellen in Zeile 47 würden aria-rowindex="47" haben, wenn aria-rowindex benötigt würde, weil nicht alle Zeilen im DOM sind. Wenn die sichtbaren Zeilen zusammenhängend sind und es keine Zellen mit einem colspan oder rowspan größer als eins gibt, kann diese Eigenschaft den übergeordneten Zeilen anstelle der Zellen aller Zeilen hinzugefügt werden.

Keine

Die erste Regel der ARIA-Nutzung ist, wenn Sie eine native Funktion mit den benötigten Semantiken und Verhaltensweisen verwenden können, die bereits eingebaut sind, statt ein Element neu zu nutzen 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>

Oben sehen Sie eine nicht-semantische ARIA-Tabelle mit fünf von 81 Zeilen, die im DOM vorhanden sind: eine innerhalb eines Tabellenkopfes und vier Zeilen innerhalb des Tabellenkörpers. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex-Eigenschaft auf jede Zelle angewendet. Wenn keine Zellen mehr als eine Zeile oder Spalte überlappten, hätte aria-rowindex auf die Zeile und nicht auf die einzelnen Zellen der Zeile gesetzt werden können.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td>, usw., für die Daten-Tabellenstruktur. Sie können ARIA-Rollen hinzufügen, um die Zugänglichkeit sicherzustellen, sollte die native Semantik der Tabelle, z. B. durch CSS, entfernt werden. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn die native Semantik einer Tabelle durch die CSS display-Eigenschaft, wie etwa durch display: grid, überschrieben wird. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantik wiederherzustellen.

<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 sehen Sie die semantische Art, eine Tabelle zu schreiben. Die ARIA-Rollen sind nicht notwendig, wenn die native Semantik der Tabelle und damit der Tabellenzeilen nicht verändert wurde, wie etwa durch die Display-Eigenschaft.

Wenn auf eine <td> angewendet, stellt es die Zellsemantik für das Element wieder her, falls die Semantik entfernt wurde, wie bei display: grid;.

• role="row"
• role="gridcell"
• HTML <td> Element
• HTML <th> Element
• Lernen: HTML-Tabellenzugänglichkeit
• Lernen: HTML-Tabellengrundlagen