Sprungmarken

Servicenavigation

Hauptnavigation

Sie sind hier:

Hauptinhalt

Barrierefreiheit bei Tabellen


th- / td - Elemente

Das th-Element spielt in einer Tabelle eine sehr große Rolle, und wird verwendet, um Überschriften einer Spalte oder Zeile zu kennzeichnen. Das td-Element beschreibt nur die eigentlichen Daten einer Tabelle.
Die Rolle des th-Elements wird häufig unterschätzt, obwohl das Element sehr wichtig für die Barrierefreiheit einer HTML-Seite ist.

Im TinyMCE-Editor wird anstelle des th-Elements ein Tabellenbereich thead definiert, der dann td-Elemente enthält.

 <table>
   <tr>
     <th>...</th> <!-- Das th-Element wird für Überschriften verwendet, um eine Spalte oder Zeile zu kennzeichnen -->
     <th>...</th>
   </tr>
   <tr>
     <td>...</td>
     <td>...</td>
   </tr>
 </table>

Logische Aufteilung einer Tabelle

Bei großen Tabellen ist es sinnvoll, die Daten logisch aufzuteilen. Die HTML-Sprache stellt  folgende logische Bereiche zur Verfügung:

  • Kopfbereich - wird durch das thead-Element realisiert
  • Datenbereich - wird durch das tbody-Element realisiert
  • Fußbereich - wird durch das tfoot-Element realisiert

Diese Gliederung hat bei großen Tabellen  folgende Vorteile:

  • beim Ausdrucken einer großen Tabelle wird der Kopfbereich und Fussbereich auf jeder gedruckten Seite wiederholt
  • Eine mit thead - / tbody - / tfoot - Elementen gegliederte Tabelle kann mit CSS gut und einfach formatiert werden.
 <table>
   <thead>
     <tr>
       <th>...</th>  <!-- Das th-Element wird für Überschriften verwendet, um eine Spalte oder Zeile zu kennzeichnen -->
       <th>...</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>...</td>
       <td>...</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>...</td>
       <td>...</td>
     </tr>
   </tfoot>
 </table>

Übersichten

Es gibt zwei ähnliche HTML-Elemente um eine kurze Übersicht über eine Tabelle zu geben. Das caption-Element benutzt man für die Beschriftung und das Attribut summary benutzt man für eine kurze Zusammenfassung des Inhaltes einer Tabelle.

  • das Attribut summary(summary = Inhaltsangabe, Übersicht) - die Zusammenfassung des Inhaltes für Screenreader
  • das Element caption ist für die Tabellenbeschriftung gedacht; dieses Element muss an erster Stelle, sofort nach dem table-Tag in einer Tabelle stehen
  <table summary="Übersicht für 30. Kalenderwoche">
    <caption>Mein Wochenplaner</caption>
      <tr>
        <th>......

Das Attribut scope(scope = Geltungsbereich) der Kopfzeilen

  • scope="col" ist für Spaltenüberschriften gedacht
  • scope="row" ist für Zeilenüberschriften gedacht
  • scope="colgroup" ist für Spaltenüberschriften von Spaltengruppen gedacht
  • scope="rowgroup" ist für Spaltenüberschriften von Zeilengruppen gedacht

Die Attribute id und headers

Der Tabellen-Assistent des Eop strukturiert die Tabellen mit den id- und headers-Attributen. Dabei werden Überschriften mit einem eindeutigen id-Wert gekennzeichnet (ein id-Wert darf nur einmal auf der Seite auftauchen). Eine Zelle, die zu einer Überschrift gehört, wird dadurch gekennzeichnet, dass der id-Wert der entsprechenden Überschrift, in den headers-Wert der Zelle geschrieben wird. Sollen zu einer Zelle mehrere Überschriften zugeordnet werden, werden die Werte einfach mit einem Leerzeichen getrennt. z.B. headers="id1 id2 id3"

<table>
    <caption>Telefonnummern der Angestellten</caption>
    <thead>
        <tr>    
            <th id="name">Name</th>
            <th id="nummer">Telefonnummer</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="name">Schmidt</td>
            <td headers="nummer">4934</td>
        </tr>
         <tr>
            <td headers="name">Berghauer</td>
            <td headers="nummer">2047</td>
        </tr>
    </tbody>
</table>

Das Attribut abbr(abbr = abbreviated = verkürzt) der Kopfzeilen oder Datenzeilen

abbr="Kurzinformation" ist für die Kurzinformation einer Datenzelle (td) oder einer einer Kopfzelle (th) gedacht.

  <table summary="Inhal des Warenkorbes">
    <caption>Warenkorb</caption>
    <tr>
      <th>Bezeichnung</th>
      <th abbr="Euro">Preis in euro</th>
      <th abbr="Stück">Anzahl</th>
    </tr>
    <tr>
      <td>Handy</td>
      <td>35,00</td>
      <td>1</td>
    </tr>

Ein Screenreader würde für jede Zeile den Inhalt des th-Elements vorlesen. Wird das abbr-Attribut verwendet, so wird nur die Abkürzung vorgelesen.