ARIA: Rolle table

Beschreibung

Ein Element mit role="table" ist eine statische Tabellenstruktur mit Zeilen, die Zellen enthalten. Die Zellen können weder den Fokus erhalten noch ausgewählt werden. Widgets innerhalb einzelner Tabellenzellen können jedoch interaktiv sein. Es wird dringend empfohlen, nach Möglichkeit ein natives HTML-Element <table> zu verwenden.

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

Für die Rolle table wird ein zugänglicher Name dringend empfohlen, auch wenn ARIA ihn nicht vorschreibt. Legen Sie den zugänglichen Namen über aria-labelledby oder aria-label fest. Wenn eine sichtbare Beschriftung vorhanden ist, verweisen Sie mit aria-labelledby darauf. Die Semantik aller anderen Tabellenelemente wie <tbody>, <thead>, <tr>, <th> und <td> muss durch entsprechende Rollen wie rowgroup, row, columnheader und cell ergänzt werden.

Wenn die Tabelle sortierbare Spalten oder Zeilen enthält, sollte das Attribut aria-sort dem Kopfzellen-Element hinzugefügt werden, nicht der Tabelle selbst. Wenn Zeilen oder Spalten ausgeblendet sind, sollte aria-colcount beziehungsweise aria-rowcount die Gesamtzahl der Spalten beziehungsweise Zeilen angeben. Zusätzlich sollte für jede Zelle aria-colindex beziehungsweise aria-rowindex gesetzt werden. Der Wert von aria-colindex beziehungsweise aria-rowindex gibt die Position einer Zelle innerhalb der Zeile beziehungsweise Spalte an. Wenn die Tabelle Zellen enthält, die sich über mehrere Zeilen oder Spalten erstrecken, sollte außerdem aria-rowspan beziehungsweise aria-colspan angegeben werden. Deutlich einfacher ist die Verwendung des Elements <table> zusammen mit den zugehörigen semantischen Elementen und Attributen, die von allen assistiven Technologien unterstützt werden.

Um ein interaktives Widget mit Tabellenstruktur zu erstellen, verwenden Sie stattdessen das grid-Muster. Wenn die Interaktion die Auswahl einzelner Zellen ermöglicht, eine Navigation von links nach rechts und von oben nach unten bietet oder Nutzende die Reihenfolge von Zellen ändern können, etwa per Drag-and-drop, verwenden Sie grid oder treegrid.

Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften

role="rowgroup"

Als optionales Kindelement der Tabelle umfasst eine Zeilengruppe mehrere Zeilen, ähnlich wie <thead>, <tbody> und <tfoot>.

role="row"

Eine Zeile innerhalb der Tabelle, optional innerhalb einer rowgroup, die eine oder mehrere Zellen, Spaltenüberschriften oder Zeilenüberschriften enthält.

Attribut aria-describedby

Sein Wert ist die ID des Elements, das die Tabelle beschreibt.

Attribut aria-label

aria-label stellt einen zugänglichen Namen für die Tabelle bereit.

Attribut aria-colcount

Dieses Attribut ist nur erforderlich, wenn die Spalten nicht jederzeit im DOM vorhanden sind. Es gibt die Anzahl der Spalten der vollständigen Tabelle explizit an. Setzen Sie den Wert auf die Gesamtzahl der Spalten der vollständigen Tabelle. Wenn diese unbekannt ist, setzen Sie aria-colcount="-1".

Attribut aria-rowcount

Dieses Attribut ist nur erforderlich, wenn die Zeilen nicht jederzeit im DOM vorhanden sind, beispielsweise bei scrollbaren Tabellen, die Zeilen wiederverwenden, um die Anzahl der DOM-Knoten zu minimieren. Es gibt die Anzahl der Zeilen der vollständigen Tabelle explizit an. Setzen Sie den Wert auf die Gesamtzahl der Zeilen der vollständigen Tabelle. Wenn diese unbekannt ist, setzen Sie aria-rowcount="-1".

Tastaturinteraktionen

Keine.

Erforderliche JavaScript-Funktionen

Keine. Informationen zu sortierbaren Spalten finden Sie unter der ARIA-Rolle columnheader.

Beispiele

<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 Beispiel zeigt einen Teil einer Tabelle. Obwohl die vollständige Tabelle 81 Einträge enthält, wie die Eigenschaft aria-rowcount angibt, sind derzeit nur vier sichtbar. Die Spalten sind sortierbar, aber derzeit nicht sortiert, wie die Eigenschaft aria-sort an den Spaltenüberschriften angibt.

Best Practices

Verwenden Sie für die Struktur von Datentabellen ausschließlich <table>, <tbody>, <thead>, <tr>, <th>, <td> usw. Sie können diese ARIA-Rollen hinzufügen, um die Zugänglichkeit sicherzustellen, falls die native Semantik der Tabelle beispielsweise durch CSS verloren geht. Ein relevanter Anwendungsfall für die ARIA-Rolle table liegt vor, wenn die CSS-Eigenschaft display die native Semantik einer Tabelle überschreibt, etwa durch display: grid. In diesem Fall können Sie die ARIA-Tabellenrollen verwenden, um die Semantik wiederherzustellen.

Spezifikationen

Siehe auch

• Lernmaterial: Barrierefreiheit von HTML-Tabellen
• Lernmaterial: Grundlagen von HTML-Tabellen
• ARIA: Rolle grid