XHTML Workshop: Kapitel 7

Barrierefreiheit: Tabellen

Wie angekündigt behandeln wir nochmals das Thema Tabellen, die eine der größten Herausforderung in punkto Barrierefreiheit sind. Man sollte Tabellen wie Webseiten logisch unterteilen in:

• Kopf (<thead>)
• Inhalt (<tbody>)
• Fuß (<tfoot>)

Im Gegensatz zu einer Webseite stehen diese allerdings nicht in einer logischen Reihenfolge, wie man an diesem Beispiel sehen kann:

(...)
<table border="1">
   <caption>Anzahl der Einwohner</caption>
   <thead>
      <tr>
         <th>Städte</th>
         <th>Landkreise</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>umfasst 5 Mio. Einwohner</td>
         <td>umfasst 17 Mio. Einwohner</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Stadt A</td>
         <td>Landkreis 1</td>
      </tr>
      <tr>
         <td>Stadt B</td>
         <td>Landkreis 2</td>
      </tr>
   </tbody>
</table>
(...)

Auch das "selfHTML" zeigt im Kapitel selfHTML: Kopf, Körper und Fuß einer Tabelle definieren eine "verkehrte" Struktur. Zuerst kommt nämlich THEAD, dann TFOOT und als letztes TBODY. Der logische Grund für dieses Verhalten liegt in der Druckversion einer Webseite:

Da Tabellenkopf und Tabellenfuß auf jeder Seite ausgedruckt werden, ist es logisch diese, wie den COLGROUP-Tag, direkt am Anfang der Tabelle zu definieren, da der TBODY ja beliebig lang sein kann.

Damit gibt das BITV auch vor, das der CAPTION-Tag für eine Tabellenüberschrift verwendet werden soll. Mit den genannten vier Tags ist es für einen Screenreader einfacher, in komplexen Tabellen die Daten in Zeile X und Spalte Y den entsprechenden Überschriften der Spalte und Zeile zuzuordnen. Ohne diese Einteilung liest ein Screenreader unter Umständen als Einleitung folgendes vor: "Tabelle mit 18 Spalten und 217 Zeilen". Wenn dazu dann noch sogenannte "Image Maps" verwendet werden, hat ein Screenreader keine Chance mehr. Was eine "Image Map" ist? Vergesst den Ausdruck am besten sofort wieder, er steht im krassen Gegensatz zur Barrierefreiheit.

Barrierefreiheit: Fallback-Lösungen

Was passiert mit Eurer Webseite, wenn bestimmte Software auf dem Client (Windows, Mac, Linux, etc.) nicht verfügbar ist? Ist Eure Webseite ohne

• Flash
• Shockwave
• Java

sichtbar und kann die Navigation ohne Hilfsmittel wie anorganische Maus und organische Augen verwendet werden?

Wenn Eure Webseite mit allen Browsern, allen Screenreadern, ohne Maus, ohne Java und ohne JavaScript auskommt, dann ist sie in diesem Punkt barrierefrei. Ich halte es aber für unmöglich, eine private Webseite mit den Browsern

1. IE 5.0, IE 5.5, IE 6.0
2. Firefox 1.x
3. Lynx 2.8.x
4. Opera 7.x
5. Mozilla 1.x
6. Netscape 4.x, 7.x

zu testen und den Code für alle Browser zu optimieren. Meine Empfehlung: Testet mit den Browsern 1 bis 4. Der IE 5.0 muss nicht berücksichtigt werden, weil er zu alt ist. Wenn Eure Webseite mit den vier Browsern navigierbar und der Inhalt sichtbar ist, reicht das voll und ganz aus.

Zitieren auf der eigenen Webseite

Übernommenes fremdes Gedankengut solltet Ihr als solches kenntlich machen. Durch falsches Zitieren ist es im Internet schon zu Abmahnungen gekommen und ganze Webseiten sind geschlossen worden (z.B dasforum.de). Auch das selfHTML hat hier klare Richtlinien erlassen:

Wörtliche (direkte) Zitate werden durch Anführungszeichen begonnen und beendet. Sie können auch farblich oder mit anderen CSS-Mitteln hervorgehoben werden. Abweichungen vom Original sollten durch eingeklammerte Zusätze "Er [Lexi] geht zum Stadion." kenntlich gemacht werden. Dies gilt auch für Zusätze.

Ein sinngemäßes (indirektes) Zitat ist jede Form der inhaltlichen Anlehnung oder sinngemäßen Wiedergabe eines anderen Autors Gedanken in der eigenen Webseite. Der Umfang und die Intention einer sinngemäßen Übernahme muß eindeutig erkennbar und gekennzeichnet sein. Argumentiert der zitierte Autor in die gleiche Richtung, so sollte dies mit folgenden Formulierungen gekennzeichnet werden: "in Anlehnung an", "in Übereinstimmung mit", "so auch bei", "weiter spezifiert bei". Soll eine Gegenposition belegt werden, ist dies bspw. mit "im Gegensatz zu" zu zitieren. Weitere Erläuterungen zur Intention des Zitats können sein: "ergänzt und erweitert gegenüber" oder "im Unterschied zu". Der Quelleverweis ist mit "vgl. (vergleiche)" extra zu nennen und mit einem Hyperlink zu belegen. Beispiel: »In Anlehnung an das selfHTML ist das wörtliche Übernehmen von einzelnen Aussagen in Form eines Zitats erlaubt (vgl. selfHTML).«

Der Quellentext ist bei wörtlichen Zitaten buchstaben- und zeichengenau zu übernehmen, und zwar auch dann, wenn er veraltete, ungewöhnlich oder gar fehlerhafte Schreibweisen enthält. Auslassungen werden durch Klammern mit zwei Punkten "(..)" für ein Wort bzw. drei Punkte "(...)" für mehrere Worte bzw. Sätze angezeigt. Bei Auslassungen zu Beginn und am Ende eines wörtlichen Zitats ist auf die Auslassungspunkte zu verzichten.
Macht das Zitat eine grammatikalische Änderung erforderlich, so ist diese ebenfalls in eckige Klammern zu setzen. Ein in Klammer[n] gesetzter Buchstabe zeigt an, daß der Verfasser hier eingegriffen hat, um den Lesefluß aufrecht zu erhalten. Es ist darauf zu achten, daß in keinem Fall der Sinn verändert werden darf. Hervorhebungen im zitierten Text sollten grundsätzlich übernommen werden; Hervorhebungen (Herv.) des Verfassers (Verf.) sind mit dem Zusatz "[Herv. durch Verf.]" zu kennzeichnen.

Ich ziehe ein wörtliches einem sinngemäßen Zitat vor, da ich es mit den Anführungsstrichen deutlicher von meinem Text abheben kann und ich bei Änderungen mit Klammern und Auslassungspunkten zur visuellen Kennzeichnung verpflichtet bin. Meiner Meinung nach sollten nur die wesentlichen Dinge eines Textes zitiert werden, getreu nach dem Motto "less is more".
Die von mir erläuterten Richtlinien sind an verschiedenen Universitäten für wissenschaftliche Arbeiten veröffentlicht worden. Sie unterscheiden sich allerdings von Fakultät zu Fakultät. Für das Internet und E-Mails gelten außerdem noch andere Richtlinien, die Ihr ebenfalls beachten solltet.

Sonderzeichen in HTML

Ihr wisst nun, wie man den H1-Tag benutzt und in XHTML verwendet. Es kann jedoch passieren, dass Ihr auf Eurer Webseite sagen wollt: "Ich benutze für Überschriften den Tag <h1> am meisten." und dann möchtet, dass die spitzen Klammern eben nicht vom Browser interpretiert werden, sondern ausgegeben werden. Es gibt u.a. folgende Sonderzeichen/Notationen in (X)HMTL:

Die beschreibenden Texte wurden vom aus dem selfHTML: Benannte Zeichen kopiert. Ihr sollte Euch ebenfalls den selfHTML: Zeichenvorrat und die Sonderzeichen durchlesen. Die Umlaute brauchen in der Regeln nicht mehr umgesetzt zu werden, da wir im Header der HTML-Datei angeben, welcher Zeichensatz (charset=iso-8859-1) wir verwenden. Trotzdem kann es praktisch sein, diese Sonderzeichen zu kennen. Es kann doch passieren, dass Ihr mal im Urlaub an einer englischen, spanischen oder französischen Tastertur ohne Umlaute sitzt, oder?

Aufgabe 25

Findet den logischen Fehler in folgendem Code und macht einen Verbesserungsvorschlag für diese Webseite:

<h1>Überschrift</h1>
<p><br /><br /></p>
<p>Hier folgt jetzt der Text des Absatz.</p>

Hinweis: Der logische Fehler kann mit Hilfe der Validierung nicht gefunden werden.

Aufgabe 26

Erstellt für Eure Webseite eine Formatierung für Zitate und Ausgaben von Sourcecode. Der ungefähr so aussehen soll (siehe Screenshot unten). Nehmt den im Screenshot dargestellten Text. Alle im Text vorkommenden Sonderzeichen sollen über die oben genannten Notationen dargestellt werden. Das Beispiel soll erfolgreich validierbar sein.

• CSS für das Zitat überlegen
• CSS für den Sourcecode überlegen
• Im Text einen Hyperlink auf die Druckversion dieses Kapitels hinterlegen: /index.php?inhalt=xhtml_kap07&druckversion;=1

Aufgabe 27

Welcher logischer Fehler ist in dem untenstehenden Abschnitt versteckt?

<p>ist eine Initiative der:</p>
<a href="http://www.aktion-mensch.de/" rev="made" rel="external">
<img src="/img/logo/am.gif" alt="" height="21" width="75" /></a>

Was bedeuten die Attribute "rev" und "rel"?

Aufgabe 28

Erstellt eine Webseite, die Überschriften, Text (Lorem Ipsum) und eine Tabelle mit 3 Spalten enthält. Die Spalten sollen Angaben über

• Name
• Straße
• und Ort

enthalten. Alle erlernten Punkte der Barrierefreiheit sollen berücksichtigt werden.

Aufgabe 29

Wieder seid Ihr von Beruf WebDesigner. Der Eigentümer von "musicleech.de" kommt auf Euch zu und bitte Euch einen barrierfreien Test- und Member-Bereich auf seiner Webseite zu erstellen. Im Test-Bereich sollen alle Musikstücke als 60-Sekunden-Ausschnitt runterladbar sein. Die Dateien liegen bereits im WAV Format vor. Auf welche Konzeptfehler werdet Ihr ihn hinweisen? Erstellt ein 2-spaltiges-Layout mit einleitemden Text, das für den IE wie eine Tabelle aussieht. Den Rest könnt Ihr selbst gestalten (Form, Farbe der Hyperlinks). Ihr müsst die Test und den Memberbereich, also 2 Seiten, erstellen. Optional: Neben jeden Musikdownload ein Icon der Band oder das letzte CD-Cover. Beide Seiten sollen validierbar und völlig barrierefrei sein.

Aufgabe 30

Eine Webseite zeigt manche Inhalte nur mit dem Event-Handler "onmouseover" an. Findet mittels des selfHTML heraus, was auf dem Client an Soft- und Hardware vorhanden sein muss, um "onmouseover" zu realisieren. Gibt es Einstellungen in einem Browser, die zu Problemen führen könnten? Was könnte sonst noch als Problem auftreten? Nennt mindestens eine Zielgruppe einer barrierefreien Webseite, die mit "onmouseover" nichts oder nur schwer etwas anfangen kann.