HTML/Tabellen/Tabellen und nicht-visuelle Medien

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Inhaltsverzeichnis

[Bearbeiten] Kurzbeschreibungen

Das wichtigste Element sind an dieser Stelle verschiedene Zusammenfassungen, Erläuterungen oder Referenzen, welche die Informationen sprachlich verständlich und übersichtlicher machen.

[Bearbeiten] Zusammenfassung des Tabelleninhalts

Mit dem summary-Attribut konnten Sie das Thema der Tabelle erläutern, um Tabellen in Sprachausgabesystemen besser verständlich darzustellen.

  • Achtung
Beispiel
<table ... summary="Zusammenfassung der Tabelle">
Beachten Sie: In HTML5 ist das summary-Attribut deprecated. [1]
Empfehlung: Verwenden Sie die dafür passenden semantischen Elemente caption oder schließen Sie ihre Tabelle in ein figure ein.


[Bearbeiten] Caption als Tabellenüberschrift

Mit dem Element caption können Sie der Tabelle eine Überschrift geben:

Beispiel
<table>
  <caption>Zusammenfassung der Tabelle<caption>
  <th>Name</th><th>Dienstagrad</th><th>Standort</th>
  ....
</table>

[Bearbeiten] Figcaption als Tabellenuntertitel

Mit dem Element figure haben sie ein perfektes Elternelement für ein figcaption als Tabellenuntertitel.

Beispiel
<figure>
  <table>
    <th>Name</th><th>Dienstagrad</th><th>Standort</th>
    ....
  </table>
  <figcaption>Zusammenfassung der Tabelle<figcaption>
</figure>

[Bearbeiten] Zusammenfassung des Zelleninhalts

Um den Inhalt als solchen besser wiedergeben zu können, wurde außerdem das Attribut abbr (englisch: abbreviated = verkürzt) entwickelt. Es ist sowohl für Überschriftszellen th als auch für Inhaltszellen td verwendbar.

Beispiel
 <table>
  <tr>
   <th abbr="Erläuterung der Zelle">Inhalt der Zelle </th>
  </tr>
 </table>

Gerade bei Einbindung in Kopfzellen kann dem Sehbehinderten sehr gut ein Überblick über den Inhalt der Zeile gegeben bzw. einzelne Zellen erläutert werden, sodass er, bei guter Umsetzung, keine Probleme mit der Wahrnehmung dieser hat. Außerdem können aus den Stichpunkten der Zellennamen vollständige Sätze geformt werden wie zum Beispiel:

Beispiel
 <table>
  <tr>
   <th abbr="In dieser">Tabellenzeile</th>
  </tr>
  <tr>
   <td abbr="befinden sich viele">Zellen</td>
  </tr>
 </table>
Beachten Sie: Der Gebrauch des abbr-Attributs für Tabellenzellen ist in HTML5 deprecated; in Tabellenköpfen (th) jedoch weiter erlaubt.

[Bearbeiten] 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.

Beispiel
 <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".

[Bearbeiten] 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: Spalte
  • row: Zeile
  • colgroup: Spaltengruppe
  • rowgroup: Zeilengruppe
Beispiel ansehen …
<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">Egde</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>
  ...
Jede Spalte hat eine Kopfzelle (th) im Tabellenkopf (thead), die mit scope="col" der Spalte zugeordnet wird. Analog dazu dient die linke Spalte mit scope="row" als Tabellenkopf für die einzelnen Reihen.

[Bearbeiten] Weblinks

  1. W3C: table-descriptions-techniques
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML