ARIA Table
Jede Zelle braucht ihre Überschrift
Zeile, Kopfzelle, Datenzelle: drei Stellen, an denen die Zuordnung bricht.
Anatomie einer Datenzelle
Eine Zahl allein sagt nichts. Ihre Koordinaten machen sie verständlich.
Eine ARIA-Tabelle muss dieselben Beziehungen ausdrücken wie eine native HTML-Tabelle: Tabellenname, Zeile, Spalte und Datenzelle.
Der Zellenpass für „11. Mai“
Ohne die Beziehungen bliebe beim Lesen der Zelle nur „11. Mai“. Zeilen- und Spaltenkopf erklären, welche Abgabe gemeint ist.
Zellenpass
11. Mai
- A Tabelle
- Laufzettel Redaktionaria-label oder aria-labelledby
- B Spalte
- Abgaberole="columnheader"
- C Zeile
- Nachtbaurole="rowheader"
- D Wert
- 11. Mairole="cell"
Zwei Grammatiken für denselben Datenbestand
<table>role="table"der Container<caption>aria-labelledbyder sichtbare Name<tr>role="row"eine vollständige Zeile<th scope="col">role="columnheader"der Spaltenkopf<th scope="row">role="rowheader"der Zeilenkopf<td>role="cell"die DatenzelleDer Browser liefert die Tabellenrollen; scope ordnet einfache Köpfe zu.
Das ist ein Fallback für fremdes oder technisch gebundenes Markup.
Fallback: vollständige ARIA-Kette
<p id="laufzettel-titel">Laufzettel Redaktion</p>
<div class="laufzettel" role="table"
aria-labelledby="laufzettel-titel">
<div role="row">
<span role="columnheader">Rubrik</span>
<span role="columnheader">Umfang</span>
<span role="columnheader">Abgabe</span>
</div>
<div role="row">
<span role="rowheader">Passagenlabor</span>
<span role="cell">12</span>
<span role="cell">4. Mai</span>
</div>
<div role="row">
<span role="rowheader">Nachtbau</span>
<span role="cell">8</span>
<span role="cell">11. Mai</span>
</div>
</div>
<style>
.laufzettel [role="row"] { display: grid; }
.laufzettel [role="row"] {
grid-template-columns: 2fr 1fr 1fr;
}
</style>Empfehlung: nativ und kürzer
<table>
<caption>Laufzettel Redaktion</caption>
<tr>
<th scope="col">Rubrik</th>
<th scope="col">Umfang</th>
<th scope="col">Abgabe</th>
</tr>
<tr>
<th scope="row">Passagenlabor</th><td>12</td><td>4. Mai</td>
</tr>
<tr>
<th scope="row">Nachtbau</th><td>8</td><td>11. Mai</td>
</tr>
</table> Verwenden Sie ARIA nur, wenn das native Element nicht möglich ist. Für ausgeblendete oder virtualisierte Zeilen kommen zusätzlich aria-rowcount und aria-rowindex ins Spiel.
Tabelle oder Grid?
Zellen sind nicht selbst fokussierbar. Für die Tabelle ist keine eigene Tastaturbedienung vorgesehen.
Das ist ein interaktives Widget und folgt einem anderen ARIA-Muster.
So prüfen Sie die Beziehung
- Name: Die Tabellenübersicht nennt „Laufzettel Redaktion“.
- Koordinaten: Beim Navigieren zu „11. Mai“ sind „Nachtbau“ und „Abgabe“ verfügbar.
- Kette: Jede
cellliegt in einerrow; jederowliegt in dertableoder einerrowgroup.
Verlässliche Referenzen
W3C APG: Table Pattern · W3C WAI: Tabellen mit Zeilen- und Spaltenköpfen · MDN: table role
Aus dem Prüfbericht
Drei Ebenen, drei Befunde
Kritisch Der Tabellenrumpf hat keine Zeilen Regel aria-required-children
role="table" kündigt Zeilen an, enthält aber nur einfache divs. Jede Zeile bekommt role="row", jede Zelle role="cell".
Kritisch Eine Zelle steht neben ihrer Zeile Regel aria-required-parent
Ein Element mit role="cell" liegt außerhalb der Zeile. Verschieben Sie es in die zugehörige role="row".
Kritisch Die Zahl kennt ihre Spalte nicht Regel td-has-header
Die Kopfzeile der Tabelle besteht aus Datenzellen. In HTML hilft th mit scope, in der ARIA-Tabelle columnheader und rowheader.
Zum Mitnehmen
Die Tabelle, korrigiert
Zeilen, Zellen und Kopfzellen bekommen ihre Rollen zurück.
Korrektur in 2 Schritten ansehen
Zeilen und Zellen auszeichnen
role="table" braucht role="row" als Kind, die Zeile braucht ihre Zellen. Ohne diese Kette bleibt die Tabelle für Vorleseprogramme leer.
KorrekturvergleichSchritt 1 · ARIA Vorher
<div role="table" aria-label="Laufzettel"> <div>Passagenlabor</div> <div>12</div> </div>Nachher
<div role="table" aria-label="Laufzettel"> <div role="row"> <div role="rowheader">Passagenlabor</div> <div role="cell">12</div> </div> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie die Tabelle vorlesen. Das Programm nennt jetzt Zeilen und Spalten.
Kopfzellen in der HTML-Tabelle setzen
In einer echten Tabelle ersetzen th mit scope die Kopfzellen. Die Zahlen bleiben td und behalten ihren Bezug zu Rubrik und Spalte.
KorrekturvergleichSchritt 2 · HTML Vorher
<tr> <td>Rubrik</td> <td>Umfang</td> </tr> <tr> <td>Passagenlabor</td> <td>12</td> </tr>Nachher
<tr> <th scope="col">Rubrik</th> <th scope="col">Umfang</th> </tr> <tr> <th scope="row">Passagenlabor</th> <td>12</td> </tr>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie im Vorleseprogramm auf die Zahl. Es sagt „Passagenlabor, Umfang, 12“.