ARIA: gridcell-Rolle

Jedem Element mit role="gridcell" sollte ARIA verwenden, um seine Position in der tabellenartigen Gruppierung zu beschreiben, sofern die Tabelle, das Grid oder Treegrid die Möglichkeit hat, Zeilen und/oder Spalten dynamisch hinzuzufügen, zu verbergen oder zu entfernen.

Verwenden Sie aria-colindex, um die Position einer gridcell in der Spaltenliste zu beschreiben, und aria-rowindex für die Position in der Zeilenliste. Verwenden Sie aria-colcount und aria-rowcount auf dem Elternelement mit role="grid", um die Gesamtanzahl der Spalten oder Zeilen festzulegen.

Dieser Beispielcode zeigt eine tabellenartige Gruppierung von Informationen, bei der die dritte und vierte Spalte entfernt wurden. aria-colindex wird verwendet, um die Position der Zeilen zu beschreiben und ermöglicht es einer Person, die unterstützende Technologie verwendet, zu schlussfolgern, dass bestimmte Zeilen entfernt wurden:

<div role="grid" aria-colcount="6">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader" aria-colindex="1">First name</div>
      <div role="columnheader" aria-colindex="2">Last name</div>
      <div role="columnheader" aria-colindex="5">City</div>
      <div role="columnheader" aria-colindex="6">Zip</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell" aria-colindex="1">Debra</div>
      <div role="gridcell" aria-colindex="2">Burks</div>
      <div role="gridcell" aria-colindex="5">New York</div>
      <div role="gridcell" aria-colindex="6">14127</div>
    </div>
  </div>
  …
</div>

In Situationen, in denen die tabellenartige Gruppierung von Inhalten keine Informationen über die Spalten und Zeilen bietet, muss die Position der Gridcells programmatisch mit aria-describedby beschrieben werden. Die für aria-describedby bereitgestellten ids sollten den beabsichtigten Elternteilen für die Reihen und Spalten entsprechen.

Durch die Referenzierung der Elternelemente mit den Rollen rowheader oder columnheader via aria-describedby kann unterstützende Technologie die Position und Beziehung des gridcell-Elements zum Rest der tabellenartigen Gruppierung von Inhalten verstehen.

Editierbare Zellen

Sowohl <td>-Elemente als auch Elemente mit der Rolle gridcell können editierbar gemacht werden, was eine Funktionalität ähnlich dem Bearbeiten einer Tabellenkalkulation nachahmt. Dies wird durch Anwendung des HTML-Attributs contenteditable erreicht.

<td contenteditable="true">Notes</td>

<div role="gridcell" contenteditable="true">Item cost</div>

contenteditable macht das Element, auf das es angewendet wird, über die Tab-Taste fokussierbar. Wenn eine Gridcell bedingt in einen Zustand versetzt wird, in dem Bearbeitung verboten ist, schalten Sie aria-readonly auf dem Gridcell-Element um.

Erweiterbare Zellen

In einem Treegrid können Gridcells erweiterbar gemacht werden, indem das Attribut aria-expanded umgeschaltet wird. Beachten Sie, dass, wenn dieses Attribut bereitgestellt wird, es nur für die einzelne Gridcell gilt.

grid

Kommuniziert, dass ein Elternelement eine Tabelle oder eine gruppierte Darstellung von Informationen darstellt.

row

Erforderlich, um zu kommunizieren, dass die gridcell Teil einer Reihe einer tabellenartigen Gruppierung von Informationen ist.

columnheader

Gibt an, welches Element der zugehörige Spaltenheader ist.

aria-colindex

Identifiziert die Position eines Elements in Bezug auf die restlichen Spalten der tabellenartigen Gruppierung von Informationen.

rowheader

Gibt an, welches Element der zugehörige Zeilenheader ist.

aria-rowindex

Identifiziert die Position eines Elements in Bezug auf die restlichen Zeilen der tabellenartigen Gruppierung von Informationen.

Das folgende Beispiel erstellt eine tabellenartige Gruppierung von Informationen:

<h3 id="table-title">Jovian gas giant planets</h3>
<div role="grid" aria-describedby="table-title">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Name</div>
      <div role="columnheader">Diameter (km)</div>
      <div role="columnheader">Length of day (hours)</div>
      <div role="columnheader">Distance from Sun (10<sup>6</sup>km)</div>
      <div role="columnheader">Number of moons</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Jupiter</div>
      <div role="gridcell">142,984</div>
      <div role="gridcell">9.9</div>
      <div role="gridcell">778.6</div>
      <div role="gridcell">67</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Saturn</div>
      <div role="gridcell">120,536</div>
      <div role="gridcell">10.7</div>
      <div role="gridcell">1433.5</div>
      <div role="gridcell">62</div>
    </div>
  </div>
</div>

Die Unterstützung für gridcell und bestimmte mit gridcell verbundene ARIA-Rollen und -Eigenschaften ist bei unterstützenden Technologien schlecht. Wenn möglich, verwenden Sie HTML-Tabellen-Markup stattdessen.

Die erste Regel von ARIA lautet: Wenn ein nativer HTML-Element oder -Attribut die benötigten Semantiken und das Verhalten bietet, verwenden Sie es anstatt ein Element zu repurposieren und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen. Daher wird empfohlen, natürliches HTML-Tabellen-Markup zu verwenden, anstatt das Formular und die Funktionalität einer Tabelle mit ARIA und JavaScript nachzubilden.

• Das Table-Element
• ARIA: Grid-Rolle
• Grid Rolle - Maxability
• Das Table Row-Element
• ARIA: row Rolle
• Row Rolle - Maxability
• aria-rowcount - Maxability
• ARIA: rowgroup Rolle
• Rowgroup Rolle - Maxability
• Das Table Header-Element
• Columnheader - Maxability
• aria-colcount - Maxability
• Das Table Data Cell-Element
• gridcell: Accessible Rich Internet Applications (WAI-ARIA) 1.1
• Gridcell Rolle - Maxability