ARIA: cell Rolle

Das Element mit role="cell" ist eine Zelle innerhalb einer Reihe, optional innerhalb einer rowgroup, innerhalb einer table. Wenn sich die Zelle in einem grid oder treegrid befindet, nutzen Sie gridcell. 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 werden. Wenn eine Zelle Spalten- oder Zeilenkopfzeileninformationen enthält, verwenden Sie die columnheader oder rowheader Rollen. Wenn die Zelle keine Kopfzeileninformationen enthält und in einem grid oder treegrid verschachtelt ist, kann die Rolle gridcell angemessener sein.

Eine Zelle kann eine Reihe von Eigenschaften-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, Gitterzellen, Spaltenkopfzeilen oder Zeilenkopfzeilen innerhalb eines grid, table oder treegrid, und optional innerhalb einer rowgroup.

role="rowgroup"

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

role="table"

Eines der drei möglichen Kontexte (zusammen mit grid und treegrid), in dem Sie eine Zeile mit Zellen finden. Tabelle identifiziert die Zelle als Teil einer nicht-interaktiven Tabellenstruktur, die Daten enthält, die in Zeilen und Spalten angeordnet sind, ähnlich dem nativen HTML <table> Element.

role="grid"

Eines der drei möglichen Kontexte (zusammen mit table und treegrid), in dem Sie eine Zeile mit cells und gridcells finden. Grid kennzeichnet eine Zelle als Teil einer möglicherweise interaktiven Tabellenstruktur, die Daten enthält, die in Zeilen und Spalten angeordnet sind, ähnlich dem nativen <table> HTML Element.

role="treegrid"

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

Unterklassen Rollen

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 Spaltenscope ist. Anders als bei einer einfachen Zelle schafft die columnheader Rolle eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Spalte.

role="rowheader"

Eine Header-Zelle, die das strukturelle Äquivalent des HTML <th> Elements mit Zeilenscope ist. Anders als bei einer einfachen Zelle schafft die rowheader Rolle eine Beziehung zwischen ihr und allen Zellen in der entsprechenden Zeile.

Zustände und Eigenschaften

aria-colspan

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

aria-rowspan

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

aria-colindex Attribut

Das aria-colindex Attribut wird nur benötigt, wenn Spalten im DOM versteckt sind. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Spalten innerhalb der table, grid oder treegrid ein. 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 notwendig.

aria-rowindex Attribut

Das aria-rowindex Attribut wird nur benötigt, wenn Zeilen im DOM versteckt sind, um anzuzeigen, in welcher Zeile der Liste der Gesamtzeilen sich die aktuelle Zelle befindet. Das Attribut nimmt als Wert eine ganze Zahl zwischen 1 und der Gesamtanzahl der Zeilen in der Tabelle, dem Grid oder dem Treegrid ein, was die Position oder den Index der Zelle anzeigt. Zum Beispiel 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 notwendig wäre. Wenn die sichtbaren Zeilen zusammenhängend sind und es keine Zellen mit einer colspan oder rowspan größer als eins gibt, kann diese Eigenschaft den übergeordneten Zeilen statt allen Zellen der Zeilen hinzugefügt werden.

Keine.

Die erste Regel für die Verwendung von ARIA ist, dass Sie, wenn Sie eine native Funktion mit den bereits eingebauten Semantiken und Verhaltensweisen verwenden können, anstatt ein Element neu zu verwenden und eine ARIA Rolle, -Zustand oder -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>

Oben ist eine nicht-semantische ARIA-Tabelle mit fünf von 81 Zeilen, die im DOM vorhanden sind: eine in einem Tabellenkopf und vier Zeilen im Tabellenkörper. Da nicht alle Zeilen im DOM sind, haben wir die aria-rowindex Eigenschaft in jeder Zelle inkludiert. Wenn keine Zellen mehr als eine Zeile oder Spalte überspannen würden, könnte das aria-rowindex auf die Zeile anstatt auf die individuellen Zellen der Zeile gesetzt werden.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw., für die Datenstruktur der Tabelle. Sie können ARIA-Rollen hinzufügen, um die Zugänglichkeit sicherzustellen, falls die nativen Semantiken der Tabelle entfernt werden, wie z. B. durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabelle Rolle ist, wenn die nativen Semantik einer Tabelle durch CSS-Display-Eigenschaft, wie durch display: grid, überschrieben wird. 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 daher die Tabellenzeilen nicht verändert wurden, wie durch die Display-Eigenschaft.

Wenn auf eine <td> angewendet, stellt es die Zellsemantik dem Element zurück, falls die Semantik entfernt wurde, wie durch display: grid;.

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