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 Containerelement mit role="row" eingebettet sein. Diese Zeile wiederum kann in einem Element mit role="rowgroup" eingebettet sein und sollte innerhalb eines grid, table oder treegrid eingebettet sein. Wenn eine Zelle Spalten- oder Zeilenüberschriften enthält, verwenden Sie die Rollen columnheader oder rowheader. Wenn die Zelle keine Überschrifteninformationen enthält und in einem grid oder treegrid eingebettet ist, kann die Rolle gridcell geeigneter sein.

Eine Zelle kann eine Reihe von 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, Gridzellen, Spaltenüberschriften oder Zeilenüberschriften innerhalb eines grid, table oder treegrid und optional innerhalb einer rowgroup.

role="rowgroup"

Row ist ein erforderlicher Elternteil einer Zelle. Rowgroup ist ein optionaler kontextueller Elternteil einer Zeile. Es stellt eine Beziehung zwischen den nachfolgenden Zeilen her. Es ist ein strukturelles Äquivalent zu den thead, tfoot und tbody Elementen 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. Tabelle identifiziert die Zelle als Teil einer nicht-interaktiven Tabellenstruktur, die Daten in Zeilen und Spalten enthält, ähnlich dem nativen 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 Zeilen und Spalten enthält, ähnlich dem nativen <table> HTML-Element.

role="treegrid"

Ähnlich wie ein Grid, aber mit Zeilen, die auf die gleiche Weise 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 Header-Zelle, die das strukturelle Äquivalent des HTML <th> Elements mit einer Spaltensicht ist. Anders als eine einfache 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 Zeilensicht ist. Anders als eine einfache Zelle stellt die Rolle rowheader eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Zeile her.

Zustände und Eigenschaften

aria-colspan

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

aria-rowspan

Ähnlich dem HTML <th> und <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 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 Gesamtanzahl der Spalten innerhalb einer Zeile. Wenn alle Spalten im DOM sind, ist dieses Attribut nicht erforderlich.

aria-rowindex Attribut

Das aria-rowindex Attribut wird nur benötigt, wenn Zeilen aus dem DOM ausgeblendet sind, um anzuzeigen, welche Zeile in der Liste der Gesamtzeilen die aktuelle Zelle sich befindet. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Zeilen innerhalb der Tabelle, des Grids oder des Treegrids an, die die Position oder den Index der Zelle angibt. Zum Beispiel hätte eine Zelle in der ersten Zeile der ersten Überschrift wahrscheinlich aria-rowindex="1" gesetzt, und Zellen in Zeile 47 hätten aria-rowindex="47", 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 Elternzeilen anstelle von allen Zellen der Zeilen hinzugefügt werden.

Keine

Die erste Regel für die Verwendung von ARIA ist, dass Sie, wenn Sie ein natives Feature mit den erforderlichen Semantiken und Verhaltensweisen, die bereits eingebaut sind, verwenden können, anstatt ein Element neu zu verwenden und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dies tun sollten. 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 im DOM: eine innerhalb eines Tabellenkopfs und vier Zeilen innerhalb des Tabellenkörpers. Da nicht alle Zeilen im DOM sind, haben wir für jede Zelle die aria-rowindex Eigenschaft eingefügt. Wenn keine Zellen mehr als eine Zeile oder Spalte überspannt hätten, hätte das aria-rowindex auf die Zeile anstelle der einzelnen Zellen der Zeile gesetzt werden können.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td>, usw., für die Tabellenstruktur. Sie können ARIA-Rollen hinzufügen, um die Zugänglichkeit zu gewährleisten, falls die nativen Semantiken der Tabelle entfernt wurden, z.B. mit CSS. Ein relevanter Anwendungsfall für die ARIA-Tabelle-Rolle ist, wenn die nativen Semantiken einer Tabelle durch CSS's display property, wie durch display: grid überschrieben werden. In diesem Fall können Sie die ARIA-Tabelle-Rollen verwenden, um die Semantiken wieder einzufü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 damit die Tabellenzeilen nicht verändert wurden, z.B. durch die display-Eigenschaft.

Wenn es auf ein <td> angewendet wird, stellt es die Zellsemantiken für das Element wieder her, falls die Semantiken entfernt wurden, z.B. mit display: grid;.

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