Tabellen zum Hören BITV Praxis

Das Behindertengleichstellungsgesetz wurde im April 2002 verabschiedet. Doch die Technik, die dieses Gesetz mit sich bringt ist immer noch zu wenig verbreitet.

Tabellen zum Hören sind immer noch Stiefkinder. BITV in der Praxis.

Selbst wenn Sie ihre eigene Webseite mit einem Editor erstellt haben, tippen Sie bitte eine Tabelle selber. Eine barrierefreie Tabelle laut BITV ist einfach und leicht machbar. Sie ermöglichen damit auch Menschen mit Seheinschränkungen ihre Webseite zu nutzen.

Schritt für Schritt erkläre ich den Weg zur barrierefreien Tabelle laut BITV.

Die Muster-Tabelle sehen Sie hier: barrierefreie Tabelle.

<table summary="Diese Tabelle zeigt wie man eine einfache Tabelle erstellen kann 
anhand einer Urlaubsabrechnung." 
id="tableeins" 
rules="all">

Wichtig:

  1. Table leitet die Tabelle ein.
  2. Das gleich darauf folgende summary bringt eine Zusammenfassung worum es in dieser Tabelle überhaupt geht.

Optional:

  • Die id ist für die Gestaltung per CSS.
    Jede ID darf nur einmal vorkommen.
  • Rules gibt an, ob und wie die Gitternetzlinien der Tabelle gezeigt werden.
<caption>Urlaubskosten</caption>

Wichtig:

  1. Ist die Überschrift oder der Untertitel der Tabelle.

    Darf nur einmal vorkommen.
    Nicht jeder IE zeigt caption als Untertitel.

<colgroup>
  <col width="50"  />
  <col width="40"  span="4"  />
</colgroup>

Wichtig:

  1. Colgroup definiert eine Gruppe von Tabellenspalten.
    Darf nur innerhalb einer Tabelle und dort nur einmal vorkommen.
    Darf nur das Element col beinhalten.
    Colgroup hilft den Browsern die Tabelle zu verstehen und hilft der „Vorlesesoftware“(=assistive Software).
  2. Col definiert die Daten für eine Tabellenspalte.
    Es darf viele cols geben.
    Col wird immer mit einem Slash / geschlossen.
  3. Width gibt die Breite der Spalte an.
  4. Span gibt an wieviele Spalten gleich sind.

Obiges heißt also: Mache die erste Spalte 50 breit, die nachfolgenden vier jeweils 40.

<thead class="theadeins">
		<tr class="treins">
			<th  abbr="Urlaubskosten" id="zusammen" class="erste">Urlaub</th>
			<th scope="col" id="flug" class="zwei">Flug</th>
			<th scope="col" id="hotel" class="drei">Hotel</th>
			<th scope="col" id="ausgehen" class="vier">Ausgehen</th>
			<th scope="col" id="total" class="fuenf">Total</th>
		</tr>
	</thead>

Wichtig:

  1. Thead leitet den Tabellenkopf ein, den es nur einmal geben darf.
  2. Class ist wiederum für die Gestaltung per CSS, wie alle anderen Class auch.
  3. Tr ist eine Zeile in einer Tabelle.
  4. Th markiert eine Tabellenkopfzelle.
    Darf nur innerhalb eines Tr erscheinen.
  5. Abbr bedeutet „verkürzt“ (abbreviated).
    Liefert Kurzinfo zur Tabellenzelle.
  6. Diese ID stellt den Zusammenhang der Daten für das Vorlesegerät her und dient zur Gestaltung per CSS.
    Für den eigenen Überblick ist es nötig, die ID so zu benennen wie der Inhalt der Zelle ist.
    Beispiel hier:Inhalt der Zelle ist Flug, ID heißt „flug“.
  7. Scope col ist für die Spaltenüberschriften gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen dieser Spalte wiederholt wird.
<tfoot class="tfooteins">
		<tr class="treins">
			<th scope="row" class="erste">Total:</th>
			<td class="zwei">600</td>
			<td class="drei">400</td>
			<td class="vier">300</td>
			<td class="fuenf">1300</td>
		</tr>
	</tfoot>

Wichtig:

  1. Tfoot leitet den Tabellenfuss ein, der gleich nach dem Tabellenkopf kommt und nur einmal vorkommen darf. ( ist nicht ganz logisch, aber es ist so. 😉
  2. Tr ist wieder der Beginn einer Zeile.
  3. Th ist wieder eine Tabellenkopfzelle.
  4. Scope row sagt:Wiederhole diese Tabellenkopfzelle bei jeder Zelle dieser Zeile.
  5. TD ist eine ganz normale Tabellenzelle.

    Darf oft vorkommen, aber nur innerhalb eines TR.


<tbody class="tbodyeins">
		<tr class="treinseins">
			<th  scope="rowgroup" headers="flug hotel ausgehen" class="erste">London</th>
		</tr>
		<tr class="treinszwei">
			<td scope="row" headers="flug hotel ausgehen" class="erste">2006</td>
			<td class="zwei">400</td>
			<td class="drei">300</td>
			<td class="vier">150</td>
		</tr>
		<tr class="treinsdrei">
			<td scope="row" headers="flug hotel ausgehen" class="erste">2007</td>
			<td class="zwei">200</td>
			<td class="drei">100</td>
			<td class="vier">150</td>
		</tr>
	</tbody>

Wichtig:

  1. Tbody darf sooft vorkommen wie benötigt.
  2. Tr und Th kennen Sie schon.
  3. Scope rowgroup bedeutet: Wiederhole den Inhalt der Kopfzelle bei allen Zellen aller Zeilen der Zeilengruppe.
    Dies funktioniert aber nur, wenn vorher colgroup verwendet wurde!
  4. Headers bezieht sich auf die IDs, die ganz oben vergeben wurden.
    Lese zu jeder Spalte die dazugehörige ID vor, bedeutet dies.
    Man kann eine ID angeben oder mehrere mit einem Leerzeichen getrennt.

So würde vorgelesen werden:

Urlaubskosten für Urlaub Flug Hotel Ausgehen.

London 2006. London 2006 Flug 400.London 2006 Hotel 300. London 2006 Ausgehen 150.

London 2007.London 2007 Flug 200. London 2007 Hotel 100. London 2006 Ausgehen 150.

Total. Total Flug 600. Total Hotel 400.Total Ausgehen 300. Total 1300.

Sie sehen mit ein wenig Tipparbeit, wirklich nicht viel und ein bisschen nachdenken was hängt wie zusammen wird auch eine komplexe Tabelle hörbar verständlich.

Ohne IDs, ohne headers, ohne scope, ohne colgroup liest das Vorlesegerät einfach Zelle für Zelle vor, völlig ohne Zusammenhang. Dies muss nicht sein.

Alle Beispieltabellen mit XHTML und CSS

Dies ist eine von mehreren Möglichkeiten, wenn Sie Lust auf mehr zu barrierefreie Tabellen haben: SELFHTML Tabellen für nicht- visuelle Medien.

Tabellen zum Hören BITV in der Praxis – wenn dies hilfreich war, freue ich mich über einen Kommentar oder einen Social Bookmark. Danke!

.. gerne beantworte ich Fragen zum Thema, mts

Ebenfalls informativ und lesenswert

5 Kommentare zu “Tabellen zum Hören BITV Praxis

  1. sabine

    naja, habe das grade ausprobiert mit der Vorlesefunktion von Opera.
    So wird vorgelesen:
    Urlaubskosten. Urlaub Flug Hotel Ausgehen Total.
    Total 600. 400. 300. 1300.
    London
    2006. 400. 300. 150.
    2007. 200. 100. 150.
    das ist zeile für zeile, trotz headers, scope und colgroup…

  2. bert

    Hallo,

    > Am 14.03.06 um 12:57
    > das ist zeile für zeile, trotz headers, scope und colgroup…

    und es gibt seither keine Antwort und keine Lösungsmöglichkeit.

    Also besser doch keine Tabelle?

    lg
    bert

  3. mts

    bert für tabelarische Daten wirds immer Tabellen geben,
    doch nicht jedes Vorlesegerät ist dafür OK, aber Vorlesegeräte kann man auch einstellen, dann können sie auch ein bisschen mehr.

    Wenn ein Vorlesegerät dies kann, dann liest es auch besser vor.

    lg

  4. Michael

    Das ist ein sehr Interesanter Artikel.
    Ich beschäftige mich schon lange mit HTMl aber das man so Tabellen hörbar machen kann stand in keinem Buch bist jetzt.
    Ist eigentlich Schade das darauf nicht mehr aufmerksam gemacht wird.

    Viele Grüße
    Michael

  5. Giorgio

    Sehr schön dass man den Spalten eine CSS Class zuweisen kann. Dass war mir neu, danke für den informativen Artikel!