ARIA: Tabelle 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 innerhalb der einzelnen Zellen der Tabelle interaktiv sein können. Wann immer möglich, wird die Verwendung eines nativen HTML <table> Elements dringend empfohlen.

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

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

Wenn die Tabelle sortierbare Spalten oder Zeilen enthält, sollte das aria-sort Attribut auf das Zellenheader-Element hinzugefügt werden (nicht auf die Tabelle selbst). Wenn irgendwelche Zeilen oder Spalten versteckt sind, sollten aria-colcount oder aria-rowcount hinzugefügt werden, um anzugeben, wie viele Spalten oder Zeilen es insgesamt gibt, zusammen mit aria-colindex oder aria-rowindex auf jeder Zelle. aria-colindex oder aria-rowindex wird auf die Position einer Zelle innerhalb der Zeile oder Spalte gesetzt. Wenn die Tabelle Zellen enthält, die mehrere Zeilen oder Spalten umfassen, sollten aria-rowspan oder aria-colspan ebenfalls enthalten sein. Es ist viel einfacher, das <table> Element zu verwenden, zusammen mit all den zugehörigen semantischen Elementen und Attributen, die von allen unterstützenden Technologien unterstützt werden.

Um ein interaktives Widget zu erstellen, das eine tabellarische Struktur hat, verwenden Sie das grid Muster. Wenn die Interaktion den Auswahlstatus einzelner Zellen berücksichtigt, eine Navigation von links nach rechts und von oben nach unten bietet oder wenn die Benutzeroberfläche es ermöglicht, die Anordnung der Zellen zu ändern oder einzelne Zellen z.B. durch Ziehen und Ablegen neu anzuordnen, verwenden Sie stattdessen grid oder treegrid.

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 Zeilengruppe, die eine oder mehrere Zellen, Spaltenheader oder Zeilenheader 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

Dieses Attribut ist nur erforderlich, wenn die Spalten nicht immer im DOM vorhanden sind. Es gibt eine explizite Angabe der Gesamtanzahl der Spalten in der ganzen Tabelle. Setzen Sie den Wert auf die Gesamtanzahl der Spalten in der gesamten Tabelle. Wenn unbekannt, setzen Sie aria-colcount="-1".

aria-rowcount Attribut

Dieses Attribut ist nur erforderlich, wenn die Zeilen nicht immer im DOM vorhanden sind, wie bei scrollbaren Tabellen, die Zeilen wiederverwenden, um die Anzahl der DOM-Knoten zu minimieren. Es gibt eine explizite Angabe der Gesamtanzahl der Zeilen in der ganzen Tabelle. Setzen Sie den Wert auf die Gesamtanzahl der Zeilen in der gesamten 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. Während die vollständige Tabelle 81 Einträge enthält, wie durch die aria-rowcount Eigenschaft angegeben, sind derzeit nur vier sichtbar. Die Spalten sind sortierbar, aber derzeit nicht sortiert, wie durch die aria-sort Eigenschaft an den Spaltenköpfen angegeben.

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

keine

• Lernen: Zugänglichkeit von HTML-Tabellen
• Lernen: HTML-Tabellen Grundlagen
• ARIA: grid Rolle