Tabellen barrierefrei
[Materialsammlung]

Datentabellen mit HTML realisieren

Der Nutzen von Tabellen besteht darin, Daten und Relationen visuell übersichtlich darzustellen. Hier ein Beispiel für eine solche Datentabelle:

caption-Element (Überschrift für die gesamte Tabelle )

Bedeutung des Einsatzes des <caption>-Elements

Es ist möglich und oft hilfreich, wenn Tabellen innerhalb des <table>-Elements über eine Tabellenüberschrift verfügen. Eine solche Tabellenüberschrift wird in HTML gleich unter dem <table>-Element in einem <caption>-Element realisiert.

Gelegentlich befindet sich eine Tabelle gleich unter einer Überschrift für den Tabelleninhalt. Braucht dann die Tabelle zusätzlich noch eine Beschriftung im <caption>-Element?

Ich sage grübelnd Ja. Allgemeine Überschriften, die mit <h#> realisiert werden und Tabellenüberschriften im <caption>-Element lassen sich mit unterschiedlichen Navigationsmechanismen von Assistierenden Technologien bedienen. Redundanzen sind meines Erachtens eher zu ertragen, als Lücken in den Navigationsmechanismen.

Solche Tabellenüberschrift können nicht nur bei der visuellen Wahrnehmung für das diagonale Lesen und das Verständnis des Tabelleninhalts hilfreich sein. Screen Reader bieten Funktionalitäten, die etwa alle Tabellen auf einer Seite auflisten und deren Bedeutung aus dem jeweiligen <caption>-Text übernehmen.

Nicht jede Tabelle auf einer Webseite muss über eine solche Tabellenüberschrift verfügen. Befinden sich jedoch mehrere Tabellen auf einer Webseite, dürfte dies jedoch in der Regel zweckmäßig sein.

Überschriften für Spalten und Zeilen

Bedeutung von semantischen Überschriften für Spalten und Zeilen

Am Bildschirm lassen sich visuell Tabellenzellen leicht einer Überschrift für die Zeile oder die Tabelle zuordnen. Relationen können horizontal oder vertikal rasch erfasst werden.

Bei der linearen Erarbeitung einer Seite mit einem Screen Reader müssen Relationen einer einzelnen Zelle zum Inhalt einer Spalte oder Zeile technisch vermittelt werden.

<th>-Attribut zur technischen Realisierung

In HTML müssen Überschriften für Spalten oder Zeilen in Tabellen mit dem <th>-Element gekennzeichnet werden. Folgende Vorgehensweise wird dabei empfohlen:

Das <thead>-Element ist im Kontext des Barrierefreien Web Design nicht relevant für die semantische Kennzeichnung von Überschriften für Spalten oder Zeilen.

Keine leeren Spaltenüberschriften

Spaltenüberschriften sollten nie leer sein. Dies kann bei der textlichen Gestaltung der ersten Zelle links oben manchmal zu Problemen führen, wenn sowohl die Spalten, als auch die Zellen als <th> gekennzeichnet sind.

Tabellenzellen, die nicht als Überschrift für eine Spalte oder Zeile dienen, sollten nicht mit dem th-Element, sondern mit td gekennzeichnet werden.

Scope-Attribut zum Kennzeichnen als Spalten- oder Zeilenüberschrift

Mit dem Scope-Attribut muss im <th>-Element festgelegt werden, worauf sich die Überschrift bezieht. Folgende Werte sind möglich:

Notwendigkeit des Einsatzes von Scope-Attributen

Ich habe bei einfachen Datentabellen mit JAWS 17 keine Probleme gefunden, wenn dieses Attribut nicht vorhanden war. Ich vermute, dass Algorithmen einfach erkennen, dass es sich um eine Spaltenüberschrift handelt, wenn nur die erste Zeile über <th>-Tags verfügt oder dass es sich um eine Zeilenüberschrift handelt, wenn nur die erste Zelle einer Tabellenzeile über den <th>-Tag verfügt.

Nachdem ich in der WebAIM Mailingliste im Juli 2017 mit Fachleuten diskutiert habe, scheinen mir folgende Kriterien für die Notwendigkeit des Einsatzes von Scope-Attributen zu berücksichtigen:

• Einfache Datentabellen, also solche, die über keine Spalten- oder Zeilengruppen verfügen, benötigen kein Scope-Attribut, wenn die entsprechenden Überschriften korrekt in einem <th>-Tag realisiert sind.
• Zeilenüberschriften sollten für ältere Screen Reader sicherheitshalber mit scope="row" versehen werden. (Rückwärtskompatibilität)
• Überschriften für Gruppen von Spalten oder Zeilen müssen mit dem entsprechenden Attribut versehen werden (colgroup/rowgroup).
• Wenn die <th>-Zelle nicht die erste Zelle in einer Spalte oder Zeile ist, muss das scope-Attribut verwendet werden.
• Sollte eine Selbstverständlichkeit sein, ist aber für HTML5 relevant: Das Attribut darf nur in ein <th>-Element und nicht in ein <td>-Element gesetzt werden.

Links zum Scope-Attribut

• Identify Row and Column Headers (Infos auf webAIM.org)
• HTML <td> scope Attribute (Infos auf w3schools.com)

headers-Attribut zum Zuordnen von Spalten- oder Zeilenüberschriften

Für komplexe Tabellen mit verschachtelten Spalten- oder Zeilenüberschriften steht in HTML das headers-Attribut zur Verfügung.

Der Aufwand ist enorm. Zunächst muss jedes <th>-Element eine individuelle ID erhalten. Dann muss jede einzelne Zelle mittels des <headers>-Attributs individuell den relevanten Überschriften zugeordnet werden.

Stellen wir uns eine Tabelle mit der Überschrift Studierende nach Disziplinen vor, in der geschlechtsspezifisch die Entwicklung ausgewertet wird. Der Code für eine einzelne Zelle müsste also etwa folgendermaßen aussehen:

<td headers="2017 Philosophie männlich" >197</td>

Die Werte zu den referenzierten IDs werden durch Leerzeichen getrennt. Sie müssen die Überschriftenhierarchie innerhalb der Tabellenüberschriften verständlich abbilden.

Die komplexe Tabellenstruktur wird leider dadurch trotzdem nicht zufrieden stellend mit einem Screen Reader zu erarbeiten sein. Die Komplexität der Überschriftenhierarchie sollte daher nach Möglichkeit reduziert werden. Im obigen Beispiel könnte etwa für jede Studiendisziplin eine eigen Tabelle dargeboten werden. Dies würde wohl nicht nur bei der Nutzung von Screen Readern die Wahrnehmung erleichtern.

Summary Attribut

Mit dem summary Attribut kann im <table>-Tag eine Darstellung der Datenstruktur angeboten werden. Diese Zusammenfassung dient also auf keinen Fall zur Zusammenfassung des Inhalts einer Tabelle.

Das Attribut dient ausschließlich bei der Nutzung eines Screen Readers. Und selbst dann ist die Unterstützung nicht sicher gewährleistet. Soweit ich lese, ist das Attribut auch nicht Teil der HTML5 Spezifikation.

Tabellen, die eine Erklärung der Struktur bei der Nutzung von Screen Readern benötigen, sind wohl insgesamt zu komplex, egal ob mit Screen Reader oder am Bildschirm. Anstelle von Überlegungen zur Formulierung des Textes im summary-Attribut ist es zweckmäßig, sich Gedanken über die Vereinfachung der Tabellenstruktur zu machen. Meist wird die Übersichtlichkeit einer Tabelle dadurch erzielt, dass aus einer Tabelle zwei oder gleich mehrere Tabellen gemacht werden.

thead, tbody und tfoot

Die HTML-Elemente thead, tbody und tfoot dienen zur semantischen Strukturierung einer Tabelle. Sie weisen keinen Nutzen für die digitale Barrierefreiheit auf.

Allerdings können sie bei umfangreichem Tabelleninhalt beim Ausdrucken von Nutzen sein. Kopf- und Fußbereich sollten dann auf jeder Seite dargestellt werden.

Liste oder Tabelle?

Häufig wird als Liste realisiert, was eigentlich semantisch die Zuordnung von Werten zu Elementen ist. Zweckmäßigerweise erfolgen solche Zuordnungen übersichtlich in einer Datentabelle.

Beispiel Kontaktdaten

Ein typisches Beispiel für Dateninformationen in Listen anstelle von Tabellen stellen Kontaktdaten dar. Dies schaut dann etwa folgendermaßen aus:

Übersichtlicher ließen sich diese Angaben in einer Datentabelle darstellen:

Anmerkungen zum Beispiel Kontaktdaten

• In einer zweispaltigen Tabelle, in der aus dem Kontext die Bedeutung der einzelnen Spalten ohnedies zu erkennen ist, verzichte ich auf Spaltenüberschriften.
• Werte isoliert in einer Datenzelle zu haben, erleichtert auch die Navigation mit dem Screen Reader oder das Markieren des Inhalts einer Datenzelle.

Semantisch inkorrekte Zusatzinformationen in Tabellen

Gelegentlich werden in einer Datentabelle semantisch unkorrekt auch Zusatzinformationen eingefügt. Folgende Beispiele sind mir untergekommen:

• In einem Formular ist in der letzten Zeile der Datentabelle * Anmeldung erforderlich eingefügt.
• In einer Tabelle zu den Öffnungszeiten an Wochentagen ist in der letzten Zeile der Kassaschluss eingefügt.

Solche Zusatzinformationen gehören in geeigneter Weise außerhalb der Datentabelle angebracht.

Interactive Komponenten in Datentabellen

Sortierbare Tabellenspalten

Bedeutung sortierbare Tabellenspalten

Gelegentlich ist es hilfreich, Tabelleninhalte sortieren zu können. Gewöhnlich verfügen dabei die Spalten über solche Funktionalität und entsprechend werden jeweils die Sortierfunktionen in der Spaltenüberschrift zur Verfügung gestellt.

Visuelle Indikatoren für sortierbare Tabellen

Dass es die Möglichkeit zum Sortieren einer Spalte gibt, muss natürlich visuell angezeigt werden. Normalerweise lässt sich eine Spalte entweder aufsteigend oder absteigend sortieren. Als visuelle Indikatoren, die dies wohl intuitiv verständlich machen, sind mir folgende Zeichen untergekommen:

Das Symbol kann mit einem title-Attribut eine Beschreibung erhalten. Allerdings hält sich die Bedienbarkeit auf Grund der kleinen Fläche in Grenzen und erfüllt sicher nicht Erfolgskriterium 2.5.5 (Größe der Schaltfläche). Ich empfehle daher eine kleine sichtbare Anleitung oberhalb der Tabelle etwa in folgender Form:

Die Schalter in der Tabellenüberschrift dienen zum Sortieren der jeweiligen Spalte.

Wichtig: Um die Bedienfläche zu maximieren, darf die Funktionalität nicht auf den visuellen Indikator beschränkt sein. Die gesamte Spaltenüberschrift sollte als Schalter realisiert werden.

Screen Reader Optimierung sortierbarer Tabellen

Damit eine sortierbare Tabelle auch beim Arbeiten mit einem Screen Reader verständlich bedienbar ist, empfehle ich folgendes Vorgehen:

1. Die Funktionalitäten müssen in semantischen ↓Spaltenüberschriften realisiert werden.
2. Die Funktionalität muss in einem Button und nicht in einem Link realisiert werden, weil ja nicht zu anderen Inhalten geführt wird.
3. Die Funktionalität wird mittels aria-describedby zu einer Beschreibung referenziert.
4. Der visuelle Indikator für die Funktionalität kann mittels aria-hidden für den Screen Reader verborgen werden.

Der HTML-Code kann also etwa folgendermaßen aussehen:

<p id="sort_desc">Die Schalter in der Tabellenüberschrift dienen zum Sortieren der jeweiligen Spalte.</p>

<table>
  <thead>
    <tr>
      <th>
        <button
          aria-describedby="sort_desc">
          Datum 
          <span
            aria-hidden="true"
            title="Umsortieren">
            ↕
          </span>
        </button>
      </th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
  … 
  </tbody>
<table>

Links zu sortierbaren Tabellen

• Thread: Feedback on a table sort implementation (Diskussionsfaden auf der WebAIM Diskussionsliste Juni 2018)
• Titles (Beispiel für eine Literaturliste - Juni 2018)

Checkboxes in Datentabellen

Bedeutung von Checkboxes in Datentabellen

Zum Auswählen einzelner oder mehrerer Datensätze wird gelegentlich eine Spalte mit Checkboxen versehen. Auf diese Weise können tabellarisch angeordnete Suchergebnisse oder Kontoumsätze gekennzeichnet werden.

Üblicherweise dient die Checkbox in der ersten Zeile der Tabelle zum Markieren der gesamten Tabelle, während die darunter liegenden Checkboxen die jeweilige Zeile kennzeichnen.

Barrierefreie Einbindung von Checkboxes in Datentabellen

Visuelle Realisierung

Dass ein Quadrat in einer Spalte das Kennzeichnen der Spalte erlaubt und das Quadrat in der ersten Zeile gleich das Markieren aller Datensätze, ist wohl nicht allgemein bekannt und sicher nicht intuitiv verständlich. Es sollten daher Überlegungen zur Zielgruppe und entsprechende Maßnahmen zur Wahrnehmbarkeit getroffen werden.

Der <th>-Tag mit der Checkbox sollte daher in jedem Fall ein passendes TITLE-Attribut erhalten. Auf diese Weise kann zumindest mittels Hover-Effekt eine Beschreibung verfügbar gemacht werden.

Optimalerweise wird für die allgemeine Verständlichkeit und die Bedienbarkeit mittels Spracheingabe mit dem <label>-Elements sichtbar in der Tabellenspalte dargestellt. Auf diese Weise erweitert sich auch die Bedienungsfläche, mittels der die Checkbox aktiviert werden kann (Erfolgskriterium 2.5.5 Größe der Schaltfläche).

Realisierung für Screen Reader

Wenn das Kontrollkästchen in der ersten Zeile der Spalte zum Auswählen aller Datensätze dient, sind folgende Punkte für Screen Reader zu berücksichtigen:

• Die Checkbox darf nicht in ein <th>-Element eingebunden werden, da es ja keine Spaltenüberschrift darstellt. Ansonsten würde ein Screen Reader bei der Navigation zur Spalte immer Alles markieren wiedergeben. Die Checkbox wird in der ersten Spalte also schlicht in ein <td>-Element eingebettet.
• Die Funktionalität muss wahrnehmbar gemacht werden. Gewährleistet wird dies etwa durch eine Beschriftung mittels <label>-Element. Sollte die Beschriftung nicht am Bildschirm angezeigt werden, kann dem Element eine Off-Screen Klasse mittels CSS zugewiesen werden.

Zum Kennzeichnen einer einzelnen Zeile sind für Screen Reader folgende Punkte zu beachten:

• Wenn das <th>-Element, in das die Checkbox eingebettet ist, über ein adäquates title-Attribut verfügt, kann die entsprechende Funktionalität vom Screen Reader wiedergegeben werden.
• Optimalerweise erfolgt auch gleich eine Kurzbeschreibung des Zeileninhalts. Dies kann zweckmäßig durch Referenzieren zu einer aussagekräftigen Beschreibung in einer anderen Spalte mittels aria-labelledby erfolgen.

Das Gerüst für den Code könnte insgesamt also etwa folgendermaßen aussehen:

<td title="Zeile markieren">
<input
  aria-labelledby="beschreibung1"
  type="checkbox">
</td>
<td id="beschreibung1">
  Überweisung Elektro Mayr
</td>

Ausblendbare Spalten

aria-colcount für die Gesamtzahl der Spalten (Neu in ARIA 1.1)

Wenn in einer Tabelle Spalten etwa durch Filter ausgeblendet werden können, wird für Screen Reader mit dem Attribut aria-colcount die Anzahl der insgesamt vorgesehenen Tabellenspalten angegeben. Das Attribut wird in den <table>-Tag eingebaut.

In gewöhnlichen Tabellen darf dieses Attribut jedoch nicht verwendet werden, weil sich die Anzahl der Spalten technisch aus dem DOM ermitteln lässt. Ein Screen Reader würde also unnötigerweise das Verhältnis von Gesamtzahl und aktuell angezeigter Anzahl von Spalten wiedergeben. (Tabelle mit vier von vier Spalten.)

Der Wert des Attributs besteht aus der Anzahl aller Spalten in der Tabelle. Der Code kann also etwa folgendermaßen aussehen:

<table aria-colcount="10">

Ein Screen Reader gibt das Verhältnis von angezeigten und insgesamt verfügbaren Spalten etwa folgendermaßen wieder:

Tabelle mit vier von zehn Spalten.

Wenn die Gesamtzahl der Spalten nicht bekannt ist, muss aria-colcount="-1" gesetzt werden. Damit wird technisch festgelegt, dass die Gesamtzahl der Spalten nicht technisch ermittelt werden soll.

Ergänzend zum aria-colindex Attribut kann mittels aria-colindex die Spaltennummer angegeben werden.

Das Attribut kann auch auf die Elemente Grid oder treegrid angewendet werden.

Links zu aria-colcount

• aria-colcount (Spezifikation des W3C)

• aria-colcount (property) – Blogbeitrag auf sumandamera.com

Layout - Tabellen

Bedeutung von Layout-Tabellen

Gelegentlich werden Tabellen noch verwendet, um etwas visuell am Bildschirm zu positionieren. Seitenelemente werden dabei jeweils in einer Tabellenzelle realisiert.

Solche Tabellen werden im Gegensatz zu Datentabellen als Layout-Tabellen bezeichnet. Die visuelle Positionierung mittels CSS macht heute Layout-Tabellen weithin unnötig.

Problematik von Layout-Tabellen

Generell sollte HTML-Markup nicht missbräuchlich zu Formatierungszwecken eingesetzt werden. Layout-Tabellen sind daher auf barrierefreien Webseiten eher verpönt.

Screen Reader und HTML-Elemente in Layout-Tabellen

Screen Reader verfügen über Funktionalitäten, die die Struktur einer Tabelle verständlich machen. So liest JAWS beispielsweise beim Wechsel zwischen Spalten die Spaltenüberschrift vor, sofern eine solche vorhanden ist. Auch die Spalten und Zeilennummer kann mitgeliefert werden

In Layout-Tabellen sind diese Zusatzinformationen ein unerträglicher Ballast.

Visuelle Darstellungsprobleme beim Einsatz von Layout-Tabellen

Layout-Tabellen wurden und werden häufig eingesetzt, um eine pixelgenaue Darstellung zu realisieren. Genau dies kann jedoch bei unterschiedlicher Bildschirmauflösung oder bei vergrößerter Darstellung mit Browserfunktionalitäten zu Problemen führen.

Bildschirmbereiche können sich überlappen und ein horizontales Scrollen kann erforderlich werden. Dies kann zugegebenermaßen auch bei einer mit CSS realisierten Darstellung passieren. Layout-Tabellen sind jedoch einem responsiven Web Design besonders abträglich.

Vorteile von Layout-Tabellen

• Für Layouttabellen spricht, dass wenn CSS im Browser deaktiviert ist, Elemente trotzdem noch visuell angeordnet werden. Dies kann in Einzelfällen gezielt genützt werden
• Solange E-Mail Programme CSS noch nicht ausreichend unterstützen, bleibt für komplexere grafische Darstellungen weiterhin nur die Verwendung von Layout-Tabellen.
  Layout-Tabellen in Newslettern

Barrierefreie Layout-Tabellen

Keine zusätzliche Tabellensemantik

Moderne Screen Reader verfügen über Algorithmen, mit denen sie eine Layout-Tabelle als solche zu identifizieren versuchen.

Werden Layout-Tabellen verwendet, ist es daher wichtig, diese Algorithmen nicht auf die falsche Spur zu führen. Semantische Elemente, wie <caption> oder <th> bleiben Datentabellen vorbehalten.

ARIA role="presentation" für Layout-Tabellen

Ein Element wird durch die Anweisung role="presentation" für den Screen Reader von seiner Semantik beraubt. Es liegt daher nahe, Layout-Tabellen mit diesem Attribut für den Screen Reader von seiner Tabellensemantik zu befreien.

Allerdings ist es dann wichtig, innerhalb einer Tabellenzelle Texte in adäquate HTML-Elemente einzubetten (p, h1, ul, …). Ein Screen Reader würde sonst alle Texte in der Layout-Tabelle in einer Wurst vorlesen.

Wenn Sie über einen Screen Reader verfügen, können Sie in der folgenden Layout-Tabelle mit role="presentation" das Verhalten Ihres Screen Readers testen, wenn die Texte innerhalb einer Zelle nicht über zusätzliche Semantik verfügen.

Wenn Sie über keinen Screen Reader verfügen, lesen Sie einfach, wie mir JAWS die Tabelle vorliest:

<table> mit role="presentation" Links oben Rechts oben Links unten Rechts unten.

Text in einem <p>-Tag.

Rechte Zelle ohne zusätzliche HTML-Tags.

Achtung: Wenn Sie Layout-Tabellen verschachteln, ist es erforderlich, jeden <table>-Tag mit dem Attribut role="presentation" zu versehen.

Tastaturbedienbarkeit von Layout-Tabellen

Die lineare Lesereihenfolge muss für den Screen Reader und allgemein für die Tastaturbedienung passen. Egal, ob zur Navigation Tabulator oder Pfeiltasten verwendet werden.

Visuelle Darstellung von Tabellenelementen

Technische Anweisungen zur visuellen Darstellung

Die visuelle Darstellung einer Tabelle und deren Elemente ist vor allem bei der Vergrößerung im Browser oder mittels Vergrößerungssoftware von Relevanz. Folgende Punkte sind bei der technischen Realisierung zu berücksichtigen:

• Grundsätzlich sollten proportionale Angaben (%, em, ex) gegenüber absoluten Angaben (pt, px) bevorzugt werden. Diese gewährleisten eine größere Flexibilität bei der Vergrößerung im Browser.
• Die Spaltenbreite sollte weithin dem Browser überlassen bleiben. Dies verhindert schon sehr gut Erfordernisse zum horizontalen Scrollen bei vergrößerter Darstellung.
• Auf die Festlegung der Höhe einer Zelle sollte in einer Datentabelle überhaupt verzichtet werden.

Visuelle Optimierung einer Datentabelle

Gitternetzlinien erleichtern die visuelle Wahrnehmung einer Datentabelle. Sie sollten daher sichtbar und kontrastreich vorhanden sein.

Wenn Sie die Tabellen auf zweiterblick.at genau ansehen, werden Sie merken, dass einerseits die gesamte Tabelle umrandet ist, andererseits jede einzelne Zelle. Dies ist eine Möglichkeit, beim Arbeiten mit Vergrößerungsprogrammen die Übersicht zu erleichtern. Der jeweilige Ausschnitt verfügt über unterschiedliche Tabellenränder und Tabellenecken.

Überschriften sollten sich von einfachen Datenzellen visuell ausreichend unterscheiden. Technisch erfolgt dies ganz einfach, indem dem <th>-Element in einer CSS-Datei entsprechende Anweisungen zugeordnet werden.