XHTML Workshop: Kapitel 6
Dieses Kapitel wird sich viel mit Barrierefreiheit und der BITV beschäftigen. Es wird der Textbrowser Lynx und der Begriff "Screenreader" erklärt. Außerdem werden wir die ersten Schritte im Bereich der eigenen CSS-Klassendefinitionen und DIV-Containern machen.
BITV
BITV steht für "Barrierefreie Informationstechnik-Verordnung". Sie ist die Grundlage, warum es in den letzten Jahren immer wichtiger geworden ist auf Barrierefreiheit zu achten. Es gibt auch eine Übersicht über alle Anforderungen der BITV auf die wir im Einzelnen kurz eingehen werden.
Wie dieses Zitat schon aussagt ist Barrierefreiheit keine Pflicht für die Firma XY. Da barrierefreie Seiten aber auch viele Vorteile für andere z.B. kurzsichtige Menschen hat, macht es beim Aufbau einer neuen Webseite durchaus Sinn die Anforderungen der BITV von Anfang zu berücksichtigen und die entsprechenden Tests auf Barrierefreiheit durchzuführen. In welchem Ausmaß das geschehen sollte ist jedem selbst überlassen.
Barrierefreiheit: Alternativen für Bilder, Videos und Grafiken
Da wir XHTML 1.1 Source-Code erstellen und diesen auch noch Validieren erfüllen wir automatische viele Kriterien der Barrierefreiheit. Trotzdem gibt es zusätzliche Anforderungen an barrierefreie Webseiten.
Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für: Bilder, graphisch dargestellten Text einschließlich Symbolen, Regionen von Imagemaps, Animationen (z. B. animierte GIFs), Applets und programmierte Objekte, Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren (ASCII-Zeichnungen), Frames, Scripts, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Graphiken, graphische Buttons, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.
Wir haben diese Anforderung bei unseren Webseiten schon für den IMG-Tag verwendet, da wir mit den Attributen "alt" und "title" gearbeitet haben. Besonders wichtig sind solche Beschreibungen bei aufwendigen Grafiken wie Organigrammen.
Testen kann man diese Maßnahme z.B. in dem man seinen Browser so einstellt, dass dieser keine Bilder mehr anzeigt oder man verwendet den Lynx.
Barrierefreiheit: Farben, Rot-Grün-Verwechsler
Früher waren Webseiten mit animierten und Spacer-GIFs vollgepackt. Es wurde vorgeschrieben, welche Software man braucht (Flash, etc.) und welche Auflösung zu verwenden ist. Buttons wurden in leuchtenden Farben verwendet. Was aber passiert, wenn für ein Farbenblinden ein roter Knopf zu dunkelgrau wird?
Circa zehn Prozent Ihres männlichen Publikums sind farbfehlsichtig, dass heisst diese Besucher verfügen über eine ungenügende Differenzierung von bestimmten Farben. Welche Farben dies sind, hängt von der Art der Farbfehlsichtigkeit ab, da es mehrere, höchst unterschiedliche Varianten gibt. Die wohl am häufigsten anzutreffende Fehlsichtigkeit ist der Rot-Grün-Verwechsler; diese Besucher können mit der Anweisung "Zum Bestellen drücken Sie bitte auf den grünen Knopf" unter Umständen nichts anfangen.
Um Farben auf der Webseite zu testen, kann man colorfilter.wickline.org benutzen. Gerade bei Webseiten mit vielen Grafiken ist das sehr interessant.
Webseiten betrachten mit dem Lynx oder einem Screenreader
Der Lynx ist ein Textbrowser, der keine Grafiken, Tabellen, CSS und ähnliches darstellen kann. Eine barrierefreie Webseite kann problemlos mit dem Lynx betrachtet werden. Es lohnt sich neben dem IE und Firefox auch den Lynx zu installieren.
Auch eine schöne Sache ist der Online-Viewer vom Lynx, der Euch auf die Schnelle Euer WebDesign im Textmodus anzeigt. Damit könnt Ihr prüfen, wie Eure Webseite "Screenreader-like" dargestellt wird.
Ein Screenreader ist eine Software für (meistens) blinde PC- und Internet-Nutzer. Der Screenreader liest den Bildschirminhalt und gibt das jeweils Wichtigste über Braillezeile und Sprachausgabe an den blinden Nutzer aus. Wie sich ein Screenreader anhört und wie man damit Webseiten "erfährt" ist eine sehr interessante Erfahrung, die ich nur jedem empfehlen kann. Ich gebe offen zu, dass ich bei dem verlinkten Test ohne grafische Hilfe nicht ansatzweise zurechtgekommen wäre. Der Screenreader spricht in einer monotonen englischen Stimme mit allen Satzzeichen. Mein Respekt vor blinden Internetnutzern ist wieder gewachsen.
In CSS eigene Formate/Klassen definieren
Bis jetzt haben wir unsere Selektoren immer für Tags definiert. Man kann allerdings auch eigene Formate in sogenannten Klassen definieren:
<style type="text/css"> .absatz { font-family: Arial, sans-serif; font-size: 0.9em; text-align: right; } </style> |...| <p class="absatz">Praesent tincidunt duis accumsan. Aenean interdum odio in tellus. Nulla facilisi suspendisse sodales mi sit amet lectus. Vestibulum eleifend ligula. Parase vulputate, mi metus mattis nibh, quis gravida felis sem nec magna.</p>
Die drei verwendeten CSS-Eigenschaften werden problemlos auf den Absatz angewendet. Theoretisch ist es auf diese Art und Weise möglich für jeden Absatz ein eigenes Design zu entwerfen.
Wie wir früher schon gelernt haben, besteht CSS immer aus Regeln:
- Der Selektor (selector), der dem Browser an dieser Stelle mitteilt, wie der Name der Klasse lautet. Beispiel: "absatz"
- Die Eigenschaften (properties) bestimmen auch hier den Teilbereich des Layouts. In unserem Fall Schriftart, Schriftgröße und Textausrichtung. Beispiel: "font-size"
- Der Wert (value) enthält die Angabe für die spezifizierte CSS-Eigenschaft. Beispiel: "0.9em"
Um dieses Wissen zu vertiefen solltet Ihr Euch die Kapitel selfHTML: Formate für Klassen definieren und selfHTML: Klassen in Verbindung mit den Elementen div und span durchlesen. Wie am Beispiel mit DIV und SPAN sehen kann, lassen sich sehr schnell anspruchsvolle Layouts mit CSS realisieren. Im genannten Beispiel ist jedoch ein Fehler in puncto Barrierefreiheit; es wird Bestandteil der Aufgaben sein diesen Fehler zu finden.
Ob man nun eine eigene Klasse definiert oder das Format für einen Tag umdefiniert ist (wie so oft) vom Einzelfall abhängig. Auf meiner Webseite sollen die Hyperlinks der Navigation ein anderes Format haben, als die Hyperlinks im Content-Bereich.
CSS-Definitionen verschachteln und DIV-Container
Um das Konzept der selfHTML: Formate für verschachtelte HTML-Elemente zu erklären, bleiben wir bei dem oben genannten Beispiel und legen zwei Klassen an:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Kapitel 6 - verschachtelte Klassen</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { font: 100% Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d; } .navigation ul { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em; } .navigation li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } #content { padding-left: 11em; } #content h1 { font: 180% Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; } </style> </head> <body> <!-- Navigation --> <div class="navigation"> <ul> <li><a href="04_home.htm">Home</a></li> <li><a href="04_biographie.htm">Meine Biographie</a></li> <li><a href="04_hobbies.htm">Meine Hobbies</a></li> </ul> </div> <!-- Content --> <div id="content"> <h1>Willkommen auf meiner Homepage</h1> <p>Dieses ist eine sehr einfache Webseite mit einer grässlichen Hintergrundfarbe, aber dafür hat sie CSS, unterstützt XHTML 1.1 und ist barrierefrei. Deswegen wird diese Webseite auch den nächsten BIENE-Award (gold) gewinnen.</p> </div> </body> </html>
Wie man sehen kann sind "Navigation" und "Content" in sogenannten DIV-Containern eingeschlossen. Ein DIV-Container stellt eine Einheit und eine logische Struktur dar. Damit Scriptsprachen die einzelen Container/Elemente unterscheiden können, benötigen diese eindeutige Bezeichnungen. Deswegen legt man auch oft selfHTML: Individualformate fest. Der Unterschied liegt in der Art der Definition und der Zuweisung:
- Klasse: Definition mit ".navigation" und Zuweisung mit dem Attribut "class"
- Individualformat: Definition mit "#content" und Zuweisung mit dem Attribut "id"
Der DIV-Tag fasst alle Inhalte zu einer einzigen Instanz zusammen: einem Container.
Formatierungen, die im DIV-Tag eingetragen sind, wirken sich auf alle darin enthaltenen Elemente aus.
Für einzelne Bereiche einer Webseite, wie Kopfzeile, Fußzeile, Navigation und Content, werden häufiger die Individualformate verwendet. Das Anzeigeergebnis ist jedoch gleich. Hier besteht zwischen Klasse und Individualformat kein Unterschied. Ein Individualformat kann in der gesamten Webseite aber nur einmal benutzt werden, sonst ist es nicht standardkonform und der Validator liefert einen Fehler.
Ansätze zur Verwendung gibt es viele. Um Fehler zu vermeiden und demnach am einfachsten wäre es nur Klassen zu verwenden. Auch denkbar: Man könnte sich angewöhnen alle Bereiche (Kopfzeile, Fußzeile, Navigation, etc.) mit Individualformaten auszustatten, da die genannten Bereiche sowieso nur einmal vorkommen (sollten).
Aufgabe 21
Ihr seid von Beruf WebDesigner. Ein Eigentümer einer privaten Homepage kommt auf Euch zu und fragt Euch: "Sollte ich meine Webseite barrierefrei aufsetzen oder reicht es sie mit Frontpage zu erstellen?" Was antwortet Ihr ihm? Welchen Aufwand würdet Ihr betreiben? Mit welchen Browsern würdet Ihr die Webseite testen?
Aufgabe 22
Wieder seid Ihr von Beruf WebDesigner. Ein Eigentümer eines Fachgeschäfts für Brillen, Kontaktlinsen und Sehhilfen kommt auf Euch zu und möchte eine Webseite in Auftrag geben. Er sagt zu Euch: "Man sagte mir, für mich wäre Barrierefreiheit nicht wichtig, da bei mir eh nur sehende Menschen einkaufen. Meine Webseite soll möglichst billig sein. Können Sie mir mit Dreamweaver schnell etwas zusammenbasteln?" Was antwortet Ihr ihm?
Aufgabe 23
Findet den Fehler im Beispiel mit DIV und SPAN und setzt es komplett barrierefrei um. Eine reine Validierung reicht hier nicht aus, obwohl sie natürlich hilfreich sein kann und gemacht werden sollte.
Aufgabe 24
Entfernt aus Eurer erstellten Webseite alle CSS-Eigenschaften, die auf einen Tag bezogen sind und ersetzt sie durch eigene verschachtelte Definitionen. Dazu müsst Ihr Eure Webseite in logische Strukturen aufteilen. Die Boris Becker Seite hat z.B. die folgenden Bereiche:
- Navigation
- Content
Somit sollen die Bereiche "Navigation" und "Content" unterschiedliche Layouts für "<p>" und "<a href ...>" haben. In der Contentbereich sollen die Hyperlinks unterstrichen sein, in der Navigation nicht. Denkt Euch zusätzlich noch einen Unterschied zwischen den beiden Bereichen aus. Wenn also Eure Navigation mit dem UL-Tag realisiert wurde, verwendet im Contentbereich nochmals den UL-Tag.
Zu Übungszwecken darf auch das Attribut "style" nicht mehr verwendet werden. Alle CSS-Definitionen müssen in der externen Datei liegen. Für eine reale Webseite ist das jedoch nicht erforderlich.