ARIA: table-Rolle

Ein Element mit role="table" ist eine statische tabellarische Struktur mit Zeilen, die Zellen enthalten. Die Zellen sind nicht fokussierbar oder auswählbar, obwohl Widgets in einzelnen Zellen der Tabelle interaktiv sein können. Die Verwendung eines nativen HTML-<table>-Elements ist wann immer möglich dringend empfohlen.

Um eine ARIA-Tabelle zu erstellen, fügen Sie dem Containerelement role="table" hinzu. Innerhalb dieses Containers hat jede Zeile role="row" eingestellt und enthält Kindzellen. Jede Zelle hat eine Rolle von entweder columnheader, rowheader oder cell. Zeilen können Kinder der Tabelle oder innerhalb einer rowgroup sein.

Die Tabellenbeschriftung kann über aria-labelledby oder aria-label definiert werden. Alle anderen semantischen Tabellenelemente wie <tbody>, <thead>, <tr>, <th> und <td> müssen über zugehörige Rollen wie rowgroup, row, columnheader und cell hinzugefügt werden.

Wenn die Tabelle sortierbare Spalten oder Zeilen enthält, sollte das Attribut aria-sort auf das Zellenkopf-Element (nicht auf der Tabelle selbst) hinzugefügt werden. Wenn Zeilen oder Spalten versteckt sind, sollten aria-colcount oder aria-rowcount enthalten sein, um die Gesamtanzahl der Spalten oder Zeilen anzugeben, zusammen mit aria-colindex oder aria-rowindex auf jeder Zelle. Die aria-colindex oder aria-rowindex wird auf die Position einer Zelle innerhalb der Reihe oder Spalte gesetzt. Wenn die Tabelle Zellen enthält, die mehrere Reihen oder mehrere Spalten überspannen, dann sollten auch aria-rowspan oder aria-colspan hinzugefügt werden. Es ist jedoch wesentlich einfacher, das <table>-Element zu verwenden, zusammen mit allen zugehörigen semantischen Elementen und Attributen, die von allen unterstützenden Technologien unterstützt werden.

Um ein interaktives Widget mit einer tabellarischen Struktur zu erstellen, verwenden Sie stattdessen das grid-Muster. Wenn die Interaktion den Auswahzustand einzelner Zellen ermöglicht, wenn eine Navigation von links nach rechts und oben nach unten bereitgestellt wird oder wenn die Benutzeroberfläche das Neuanordnen der Zellenreihenfolge oder das Ändern der Reihenfolge einzelner Zellen, wie z.B. durch Drag & Drop, ermöglicht, verwenden Sie grid oder treegrid anstelle.

role="rowgroup"

Ein optionales Kind der Tabelle, die Zeilengruppe umfasst eine Gruppe von Zeilen, ähnlich wie <thead>, <tbody> und <tfoot>.

role="row"

Eine Zeile innerhalb der Tabelle und optional innerhalb einer rowgroup, die eine oder mehrere Zellen, Spaltenköpfe oder Zeilenköpfe enthält.

aria-describedby Attribut

Nimmt als Wert die ID des Elements, das als Beschreibung für die Tabelle dient.

aria-label Attribut

Das aria-label bietet einen zugänglichen Namen für die Tabelle.

aria-colcount Attribut

Diese Attribut ist nur erforderlich, wenn die Spalten nicht ständig im DOM vorhanden sind. Es liefert eine explizite Angabe der Anzahl der Spalten in der vollständigen Tabelle. Setzen Sie den Wert auf die Gesamtanzahl der Spalten in der vollständigen Tabelle. Wenn unbekannt, setzen Sie aria-colcount="-1".

aria-rowcount Attribut

Diese Attribut ist nur erforderlich, wenn die Reihen nicht ständig im DOM vorhanden sind, wie z.B. scrollbare Tabellen, die Reihen wiederverwenden, um die Anzahl der DOM-Knoten zu minimieren. Es liefert eine explizite Angabe der Anzahl der Reihen in der vollständigen Tabelle. Setzen Sie den Wert auf die Gesamtanzahl der Reihen in der vollständigen Tabelle. Wenn unbekannt, setzen Sie aria-rowcount="-1".

Keine

Keine. Für sortierbare Spalten, siehe die columnheader aria Rolle.

<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 Role</span>
      <span role="columnheader" aria-sort="none">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>

Das Obige ist Teil einer Tabelle. Obwohl die vollständige Tabelle 81 Einträge hat, wie durch die aria-rowcount Eigenschaft angegeben, sind derzeit nur vier sichtbar. Die Spalten sind sortierbar, aber momentan nicht sortiert, wie durch die aria-sort Eigenschaft auf den Spaltenköpfen angezeigt.

Verwenden Sie nur <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. für die Struktur von Datentabellen. Sie können diese ARIA-Rollen hinzufügen, um die Barrierefreiheit zu gewährleisten, falls die nativen Semantiken der Tabelle entfernt werden, z.B. durch CSS. Ein relevanter Anwendungsfall für die ARIA-Tabellenrolle ist, wenn das CSS-Display-Property die nativen Semantiken einer Tabelle überschreibt, wie z.B. durch display: grid. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantiken wieder hinzuzufügen.

Keine

• HTML-Tabellenelement
• HTML-Tabellenanleitung
• ARIA: grid Rolle