HTML/Tabellen/Beschriftung
Der folgende Artikel beschäftigt sich mit der Ausgabe von HTML-Tabellen in nicht-visuellen Medien wie Sprachausgaben für Sehbehinderte. Dies stellt ein nicht minderes Problem dar, da Tabellen über die Gleichzeitigkeit verschiedener Informationen wirken und über Medien, welche Informationen nacheinander ausgeben, nicht darstellbar sind. Das W3-Konsortium hat verschiedene Attribute entwickelt, welche diese Probleme lösen helfen sollen. Als Erstellerin oder Ersteller einer eigenen Webseite sollten Sie diese Problematik mit bedenken und beachten, um Ihre Website auch sehbehinderten Menschen zugänglich bzw. verständlich zu machen.
Das wichtigste Element sind an dieser Stelle verschiedene Zusammenfassungen, Erläuterungen oder Referenzen, welche die Informationen sprachlich verständlich und übersichtlicher machen.
Inhaltsverzeichnis
Zusammenfassung des Tabelleninhalts
Caption als Tabellenüberschrift
Durch das caption-Element wird eine Tabellenüberschrift definiert. Die Deklaration muss unmittelbar nach dem einleitenden <table>
-Tag erfolgen. Obwohl eine Tabelle mehrere Tabellenkörper (tbody
) besitzen darf, ist es nicht erlaubt, mehrere Tabellenüberschriften zu verwenden. caption bedeutet so viel wie Überschrift oder Beschriftung.
Die Gestaltung und Positionierung der Tabellenüberschrift erfolgt via CSS.
Figcaption als Tabellenuntertitel
Mit dem Element figure haben sie ein perfektes Elternelement für ein figcaption als Tabellenuntertitel.
<figure>
<table>
<th>Name</th><th>Dienstagrad</th><th>Standort</th>
....
</table>
<figcaption>Zusammenfassung der Tabelle</figcaption>
</figure>
obsolet: summary-Attribut
Mit dem summary-Attribut konnten Sie das Thema der Tabelle erläutern, um Tabellen in Sprachausgabesystemen besser verständlich darzustellen.
<table ... summary="Zusammenfassung der Tabelle">
Zusammenfassung des Zelleninhalts
Um den Inhalt als solchen besser wiedergeben zu können, wurde außerdem das Attribut abbr [= abbreviated (englisch für verkürzt)] entwickelt. Es ist sowohl für Überschriftszellen th
als auch für Inhaltszellen td
verwendbar.
<table>
<tr>
<th abbr="Erläuterung der Zelle">Inhalt der Zelle </th>
</tr>
</table>
Gerade bei Einbindung in Kopfzellen kann Sehbehinderten sehr gut ein Überblick über den Inhalt der Zeile gegeben bzw. einzelne Zellen erläutert werden, sodass sie, bei guter Umsetzung, keine Probleme mit der Wahrnehmung dieser haben. Außerdem können aus den Stichpunkten der Zellennamen vollständige Sätze geformt werden wie zum Beispiel:
<table>
<tr>
<th abbr="In dieser">Tabellenzeile</th>
</tr>
<tr>
<td abbr="befinden sich viele">Zellen</td>
</tr>
</table>
Referenzen herstellen
Auch Referenzen sind eine sehr gute Hilfe. Gerade bei größeren Tabellen kann einem schnell der Überblick verloren gehen, weil man die Reihenfolge der Spalten vergisst; spätestens bei der 10. Zeile weiß wohl kaum einer mehr, welche Überschriften oben standen. Daher kann es hilfreich sein, diese mit den Zellen zu referenzieren. Dies geschieht mit den Universalattributen id und dem headers
-Attribut.
<table>
<tr>
<th id="name">Name</th>
<th id="email">E-Mail</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">Max Mustermann</td>
<td headers="email">mustermann@example.com</td>
<td headers="phone">+0123-456789</td>
<td headers="addr">Schulstr. 1, 12345 Musterdorf</td>
</tr>
</table>
Aus diesem Code kann ein Sprachausgabesystem nun einen Satz generieren wie: "E-Mail ist gleich mustermann@example.com".
scope
Das Attribute scope
kann ebenfalls einen Bezug zwischen Kopf- und Datenzellen herstellen. Es identifiziert, ob eine Zelle ein Kopf für eine Spalte, Reihe oder Gruppe davon ist.
Folgende Werte sind möglich:
col
: Spalterow
: Zeilecolgroup
: Spaltengrupperowgroup
: Zeilengruppe
<thead>
<tr>
<td rowspan="2"></td>
<th scope="col" rowspan="2">Chrome</th>
<th scope="col" rowspan="2">Firefox</th>
<th scope="colgroup" colspan="3">Internet Explorer</th>
<th scope="col" rowspan="2">Edge</th>
<th scope="col" rowspan="2">Opera</th>
<th scope="col" rowspan="2">Safari</th>
</tr>
<tr>
<th scope="col">IE 8</th>
<th scope="col">IE 9</th>
<th scope="col">IE 10-11</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Juli</th>
<td>25,7%</td>
<td>30,4%</td>
<td>0,9%</td>
<td>1,3%</td>
<td>8,3%</td>
<td>0,1%</td>
<td>1,5%</td>
<td>22,6%</td>
</tr>
...
Weblinks
Referenz: caption
scope="col"
der Spalte zugeordnet wird. Analog dazu dient die linke Spalte mitscope="row"
als Tabellenkopf für die einzelnen Reihen.