Seite 1 »» Inhaltsübersicht

barrierefreies Content-Management, eine kleine Einführung

Barrierefreie Webseiten möchten den Umgang mit dem Internet für alle erleichtern. Auf dieser Seite werden ihnen die Quellen der wichtigsten Richtlinien vorgestellt.

Wer macht eigentlich die Richtlinien im Internet?

Auch wenn es keinen international autorisierten Herausgeber von Standards gibt, so haben die Empfehlungen des W3C's doch Standardcharakter. Beispiele für bisher vom W3C verabschiedete "Empfehlungen" sind HTML, XML, CSS und WCAG. Die Empfehlungen der W3C sind jedoch keineswegs willkürlicher Natur. Sie werden quasi mit Terminvorgaben zur Diskussion gestellt. Das W3C versteht sich als von Firmen unabhängige Komission.

Die Web Accessibility Initiative (WAI)

Die WAI, als Komission innerhalb der W3C, beschäftigt sich mit den Vorgaben, mit denen barrierefreies Internet verwirklicht werden kann. Als Empfehlung wurde 1999 die WCAG 1.0 herausgegeben. In ihr werden 14 Zugänglichkeitsrichtlinien (Anforderungen) für Web-Inhalte aufgeführt. In den jeweiligen Anforderungen werden konkrete Bedingungen gestellt. Bei der Umsetzung der Bedingungen wird dazu nach Prioritäten unterschieden. So sollen Webseiten nach dem Grad ihrer Barrierefreiheit unterschieden werden können.

Die Barrierefreie Informationstechnik-Verordnung(BITV)

Die, vom Bundesministerium des Innern im Einvernehmen mit dem Bundesministerium für Arbeit und Sozialordnung, herausgegebene BITV richtet sich nach der WCAG 1.0. Die beiden ersten Prioritäten wurden jedoch zusammengefasst, so dass nur zwei Qualitätsabstufungen entstehen. Praxisorientiert und verständlich aufgearbeitet wird die Verordnung auf der Webseite einfach-fuer-alle.de

Wie geht die Entwicklung weiter?

Die WAI arbeitet derzeit an der WCAG 2.0 für Anfang 2007. Hiermit sollen die Richtlinien, die ursprünglich für HTML-basierte Medien geschaffen wurden, für alle elektronische Medien verallgemeinert werden. Ferner soll die Strukturierung klarer werden.

Über dieses Buch

Die Zielsetzung ist die Gleichstellung behinderter Menschen. Gerade für diese Zielgruppe kann die virtuelle Welt des Internets eine wertvolle Brücke in die reale Welt sein. Jedoch sprechen wir hier nicht über Webseiten, die speziell nur für Menschen mit Beeinträchtigungen geschaffen werden. "Behindert", im Sinne von "durch die Medienflut überfordert", sind wir im Grunde alle. Somit sollte Barrierefreiheit als eine Selbstverpflichtung der Webautoren, im Sinne aller Nutzer des Internets, verstanden werden.

Im Folgenden wollen wir die Richtlinien nicht erneut erklären. Vielmehr wollen wir am Beispiel "content-housing" Probleme und Lösungsvorschläge kritisch erörtern. Dies betrifft die Entwicklung des CMS's sowie dessen Nutzung. Wir richten uns hierbei nach der Gliederung der BITV. Das Buch wird regelmässig um ein Kapitel ergänzt. Jedes Kapitel beschäfftigt sich mit einer Anforderung(also 14).

Seite 2 »» Inhaltsübersicht

Behandlung von Bildern

Anforderung 01: Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen.

Bedingung 1.1: Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. ...

Lösung HTML

HTML hat für diese Anforderung das alt-Attribut vorgesehen. Das Attribut "alt" wird im Sinne von Alternativtext verwendet. Es ist nicht mit dem "title"- Attribut zu verwechseln, das einen Begleittext erzeugt. Die Anzeige des alt-Attributes als Begleittext(nur IE) ist rein willkürlich.

Umsetzung in content-housing

Der [img]-Baustein wird im Editoren immer mit "alt" und "title" vorgegeben.

• alt :"Welches Wort würde ich jetzt einsetzen, wenn ich kein Bild einsetzen würde?"
• title : Ein Titel ist ein beschreibendes Synonym für etwas und daher in unseren Augen gut geeignet für eine kurze Beschreibung.

Testmöglichkeiten

Netscape(7.1): Bearbeiten/Einstellungen/Privatsphäre-Sicherheit/Grafiken -Keine Grafiken laden: aktivieren
IE(6.0): Extras/Internetoptionen/Erweitert/ -Einstellungen -Multimedia -Bilder anzeigen: deaktivieren.

Beobachtungen, Anmerkungen

Netscape zeigt die alt-Texte.
Der IE zeigt bei diesen Einstellungen Platzhalter und alt-Text.
Sind die Platzhalter zu klein, gibt es leider auch keine alt-Texte. Die Tags sind jedoch im Quelltext vorhanden und darauf kommt es für uns an.

Das, für eine längere Beschreibung vorgesehene, longdesc-Attribut, als Verweis auf einen beschreibenden Text, wird von den Browsern bislang nicht befriedigend umgesetzt. Auch bei Netscape muss man sich, über die rechte Maustaste, die Eigenschaften anzeigen lassen und den darin befindlichen Link in die Adressenzeile des Browsers eingeben.

Eleganter erscheint die Möglichkeit, eine Grafik mit einer beschreibenden Seite zu verlinken. (Denken sie an einen online-shop.) Hier kann man dann auch ein Bild in einer anderen Größe einbinden. Jedoch ist diese Vorgehensweise aufwendig.

Bildname: anf01-see.jpg
alt Bild: Beispielbild, die Angabe der Aufgabe des Bildes erscheint sinnvoll.
alt Originalbild auf der Zielseite: Anlegesteg, da das Bild seine Aufgabe verloren hat.
title Bild: Blick auf einen Anlegesteg
title Link: Bild in Originalgröße mit beschreibendem Text

Kommentare

Seite 2 Anlage »» Inhaltsübersicht

anf01-see.jpg

Sie blicken auf einen ruhigen See in Brandenburg. Im Vordergund befindet sich ein kleiner Anlegesteg. Auf dem Steg stehen drei Männer und unterhalten sich.

zurück

Seite 2 Anlage »» Inhaltsübersicht

kommentar zu 01

KURZBESCHREIBUNG.

ABSATZ

Seite 3 »» Inhaltsübersicht

Farbbedeutungen, Farbkontraste

Anforderung 02: Texte und Grafiken müssen auch dann verständlich sein, wenn sie ohne Farbe betrachtet werden.

Fast 10 Prozent aller Männer sind farbfehlsichtig.(Wir hören nicht nur schlecht.)

Bedingung 2.1: Alle mit Farbe dargestellten Informationen müssen auch ohne Farbe verfügbar sein, z.B. durch den Kontext oder die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache.

Die genutzten Farbe ist die Information. - Grün = gehen, rot = stehen

Lösungen

Funktionale Bereiche(Links) sollen immer durch zwei Merkmale von dem Kontext oder durch den Kontext selbst, abgehoben werden.

Bedingung 2.2: Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Lösungen

Die Nutzung, der als websicher geltenden Farben, ist sicherlich keine schlechte Idee, um einen ausreichenden "Abstand" (und damit Kontrast) zu den nächsten Farben im RGB-Farbraum zu erreichen.

Umsetzung in content-housing

Layout und Design werden, im Dialog mit dem Kunden, durch uns festgeschrieben.

Testmöglichkeiten

Hardcopy des Browserfensters in die Zwischenablage kopieren.([Alt][Druck], dann [Strg][C]). Zwischenablage in Grafikprogramm als neues Bild öffnen. Das erzeugte Bild in Graustufen anzeigen.(geht auch mit MS-Zubehör Imaging, neues Bild: jpg, Farbe: 256 Grauschattierungen, [Strg][V], schwarzes Rechteck in der unteren Werkzeugleiste anclicken)

Beobachtungen, Anmerkungen

Zum Thema mangelnde Kontraste - Superschade, aber gar nicht so selten: Man erstellt ein aufwendiges Design an einem normalen Bildschirm und sieht sich sein Werk erst am Ende auf einem normalen Laptop an. Was man da zu sehen bekommt, kann einen schon mal aus der Fassung bringen. - Aus einem Grünton wird da schon mal ein Braunton oder filigrane Hintergründe verschwimmen zu einem undefinierbarem Ganzen.
Als relativ sicher gilt es, nur primäre oder sekundäre Farben zu nutzen. Also keine Farben, die Anteile aus allen drei Grundfarben haben. Oder man nutzt sie in gleichen Anteilen.(entspricht den 256 Grautönen)

Auch dies ist ärgerlich: Als gewissenhafter Designer haben sie ihren Bildschirm kalibriert. Nur schade, dass sie hiermit zu der absoluten Minderheit gehören, die ihre Seite so zu sehen bekommen, wie sie sich das vorgestellt haben.

Seite 4 »» Inhaltsübersicht

Saubere Auszeichnungen

Anforderung 03: Markup-Sprachen (insbesondere HTML) und Stylesheets sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden.

Bedingung 3.2: Mittels Markup-Sprachen geschaffene Dokumente sind so zu erstellen und zu deklarieren, dass sie gegen veröffentlichte formale Grammatiken validieren.

Lösung (X)HTML

Das Ziel sollte immer die strict - Variante sein. Will man dem Kunden in der Zukunft Probleme ersparen, gibt es in unseren Augen keine Alternative.

Umsetzung in content-housing

Verzicht auf von der W3C als "deprecated" eingestuften Code. Ausnahme [iframe]: Die mangelhafte Interpretation des standardkonformen object-Tags, seitens der Browser lässt da kaum Spielräume zu. Besonders die Standardeinstellung des IE, externe(über Domaingrenzen hinweg) Datenquellen als iframe kommentarlos zuzulassen, als object jedoch ersatzlos zu übergehen, ist unverständlich. Da wir aus verschiedenen Gründen (Sicherheit, Redundanz, Performance...) mit zentralen externen Dateienlagern arbeiten, sind wir auf eine saubere Darstellung externer Dateien angewiesen.

Bedingung 3.3: Es sind Stylesheets zu verwenden, um die Text- und Bildgestaltung sowie die Präsentation von mittels Markup-Sprachen geschaffener Dokumente zu beeinflussen.

Diese Forderung bremst nahezu jeden WYSWIG-Editoren aus. Auszeichnungen wie zum Beispiel [b][i] oder das font-Attribut sind hiernach verboten.

Lösung (X)HTML

Nutzung des strict-Standards.

Umsetzung in content-housing

Unser Editor bietet nur strict-konforme XHTML-Bausteine an.

Bedingung 3.4: Es sind relative anstelle von absoluten Einheiten in den Attributwerten der verwendeten Markup-Sprache und den Stylesheet-Property-Werten zu verwenden.

Diese Forderung bezieht sich im wesentlichen auf Schriftgrößen. Bei Bildern, Rahmen... ist da kein Nutzen zu erkennen.

Lösung CSS

relative Masseinheiten wie em(Standard~16px), ex(Standard~12px), %.

Umsetzung in content-housing

Schriften, Buttons, Formulare sowie die Breite der Seitenbereiche sind relativ angegeben.

Testmöglichkeiten

W3C CSS-Validierungsservice.
W3C Markup Validation Service: (X)HTML Relative Größen: zum Beispiel [strg] + Mausrad bei IE

Beobachtungen, Anmerkungen

Die Validierung über W3C kann durchaus als objektiver Bestandteil einer Abnahme eines Projektes durch einen Kunden dienen.

Bei dem CSS-Validator kommt es neuerdings(09.2005) in vielen Fällen zu einer erheblichen Anzahl an Warnungen. siehe: Thema: CSS-Validator geändert?. Geht es da um eher "fiktive" Kollisionsmöglichkeiten? In meinen Augen gehen die Warnungen an dem Prinzip der Kaskade (Vererbung von Eigenschaften an untergordnete Elemente) vorbei.

"The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the XML declaration (utf-8)".
Dieser Eintrag in der .htaccess reagiert auf diese Meldung:
php_value default_charset "UTF-8"

Alternative zu target="_blank":
Folgenden Eventhandler in das a-Tag einfügen: onclick="window.open('GLEICHE URL IN APOSTROPHEN EINFÜGEN'); return false;"
Bei Nichtinterpretation wird das href-Attribut trotzdem ausgeführt.

Problemfall PHPSESSID:
Durch das Entfernen des form-Eintrages wird das hidden-input der PHPSESSID direkt unter [form] verhindert (nicht strict-konform).
Eintrag in der .htaccess:
php_value url_rewriter.tags "a=href,area=href,frame=src,input=src,fieldset=" Diese Vorgehensweise setzt jedoch voraus, dass jedes Formular des Webprojekts auch über ein [fieldset] verfügt
Führt zu strict-konformem ergänzen der PHPSESSID bei Links (& ist nicht erlaubt)
Eintrag in der .htaccess:
php_value arg_separator.output "&"

zu relativen Größenangaben:
body(als Bezugsgröße) font-size:100.01% nicht 100%(dann klappt es auch mit der Verkleinerung im IE.).
Tabellen brauchen eigene Größenangaben (keine Vererbung in jedem Browser).
Formularelemente font-size:100%(sonst keine IE-Anpassung). [textarea] benötigt font-size:125%(sonst sehr kleine Darstellung bei Netscape)
[select] Die Höhe des Selectfeldes wächst bei Netscape nicht mit.
auch nützlich:
"*{margin:0em; padding:0em;}" entledigt sie der unterschiedlichen browserinternen Voreinstellungen.
"margin:auto" zentriert Tabellen auch bei Netscape.

Seite 5 »» Inhaltsübersicht

ein paar Schlussbemerkungen

Die Anforderungen an barrierefreies Wedesign, decken sich in weiten Teilen mit den Anforderungen, die man eigentlich schon immer an gute Webprogrammierung gestellt hat.

Gerade für Content-Management-Systeme ist die Bereitstellung barrierefreier Inhalte sehr schwierig. Die Inhalte werden eher selten von ambitionierten HTML-Producern geschrieben. Der Nutzer kann auch nicht zu einer bestimmten Handlungsweise gezwungen werden. Aber man kann ihn von allem unötigen Schnickschnack befreien, seine Aufmerksamkeit nur auf die Inhalte richten, und ihn mit dem nötigen Wissen versorgen, sehr gute Webseiten zu schreiben.