Um mir die Bedienung eines solchen besser vorstellen zu können, habe ich mir diesmal einen Screenreader installiert und danach den Monitor ausgeschaltet. Somit konnte ich auf Programmen bzw. Webseiten nur über die Sprachausgabe navigieren. In diesem Fall habe ich mir die verbreitete Version Jaws installiert, mit der es möglich ist 40 Minuten ohne Kosten zu testen. Die Kaufversion dieses Readers ist ziemlich teuer und kostet zwischen 1.600 € und 2.900 €. Es gibt natürlich jede Menge an Softwareangeboten, darunter auch ein Freeware Programm wie Thunder. Ein paar Webseiten hab ich angesurft, viele sind nur sehr erschwerlich bedienbar. Hier ein Hör-Beispiel aus diesem Blog:

[audio:screenreadertest.mp3]

Ich muss zugeben, dass es mir sehr schwer fiel komplett ohne Sicht richtig zu navigieren. Speziell bei meinen Blogs sind mir ein paar Unzulänglichkeiten aufgefallen. Hier muss aufjedenfall nachgebessert werden. Da wäre zum Beispiel die Blogbeschreibung unter dem Logo, hier werden die Striche dazwischen vorgelesen -> uninteressant. Englische Ausdrücke gehören als solche ausgezeichnet: <span lang="en">Webdesign</span>. Irgendwie hatte ich auch immer wieder Probleme auf den eigentlichen Inhalt zu navigieren, da muß ich erst herausfinden warum.

Der Test war sehr aufschlussreich und lieferte mir folgende Aspekte.

• Jegliches Screendesign hat keine Relevanz mehr
• Die Usability ist lediglich über die semantische Struktur der Seite möglich
• Klare Navigationsbezeichnungen erforderlich
• Sprungmarker statt Accesskeys (diese werden jedesmal vorgelesen)
• Der Sprungmarker “zum Inhalt” ist lebensnotwendig!
• Linkbezeichnungen sollten griffig sein
• Alt-Texte zu Bildern unverzichtbar

Ich kann jedem, der sich mit barrierefreien Webdesign beschäftigt solche Tests nur wärmstens empfehlen, um vielleicht beim nächsten Frontend mehr Gefühl für die Seitenstruktur zu bekommen, dennoch benötigt es auch die gehörige Portion Übung um mit dem Screenreader richtig umgehen zu können.

Passend zu diesem Thema findet demnächst der Accessible Media Stammtisch statt. Am 24. Juni werden von Eva Papst (selbst blinde Screenreader-Userin) Details über Screenreader vorgetragen. Pflichttermin! Ich werde Eva Papst aufjedenfall Fragen welche Screenreader unter den Blinden und Sehbehinderten verbreitet sind.

Technik kann die Partizipationsmöglichkeiten für blinde und sehbehinderte Menschen erhöhen. Trotzdem muss erwähnt werden, dass durch eine Behinderung immer eine Beeinträchtigung erfahren wird. Eine Person beschrieb:

„[…] Klar ist natürlich, dass man die Bilder und ähnliches , was ja auch sehr stark vertreten ist im Internet, natürlich nicht sehen kann.[…] Das fällt natürlich weg, aber das ist glaub ich jetzt kein, vielleicht irr ich mich jetzt aber, das ist kein Problem vom Internet an sich, das ist ja eher ohnehin naturgemäß.“

Grundsätzlich muss zwischen zwei Dimensionen in Bezug auf „Barrieren und Technik“ unterschieden werden.

Die erste Dimension beschreibt jene Barrieren, die durch das Programmieren und Erstellen von Webseiten entstehen können. Hierbei ergeben sich oftmals Hürden wenn nicht auf barrierefreie Programmierung und die Einhaltung der Standards geachet wird. Diese erste Ebene bezieht sich auf einzelne technische Details, die man konkret benennen kann. Grafiken, Flash-Animierungen und Drop-Down Menüs lauten die Stichworte, denn sie sind nur mit den Augen zu erfassen und somit für eine blinde Person nicht anwendbar. Auch die Überladenheit einzelner Websites mit Informationen und die Unübersichtlichkeit machen blinden Personen zu schaffen. Während eine sehende Person alles auf einmal erblickt, erfordert es für eine blinde Person einfach mehr Zeit, nur mit Tast- und Hörsinn die Fülle an Informationen in eine geordnete Struktur zu bringen.

„Manche Webseiten sind, die Uni-Seite zum Beispiel selber, sind so kompliziert, mir muss jemand helfen, weil wenn ich etwas suche […] das dauert für mich 10 mal so lang, das ist mir echt zu anstrengend. Da frag ich […]”

„Das Beste […], dass man alles auf der Seite übersichtlich hat, dass man nicht zuerst 100e Sachen, durchklicken muss, ja dass man halt alles ein bisschen übersichtlich schafft.“

„Ja, irgendein Amt, Finanzamt irgendwas, wo es ne extra Seite gibt, ein Link oder irgendwas barrierefrei und das ist so kompliziert dass man es gar nicht probiert. […]. Ich habs ausgedruckt, damits für mich dann wer machen kann. Weil es war so kompliziert.“

Die zweite Dimension stellen Barrieren von Seiten des Nutzers dar. Es geht um die Frage, ob dieser Zugang zur benötigten Software hat, die zur Ausgabe von Informationen im Internet notwendig ist und ob er das entsprechende Wissen besitzt, die Software anzuwenden? Die Anwendung von Software setzt jedoch wiederum entsprechende Schulung oder Bildung des Betroffenen voraus, um die Angebote auch nutzen zu können.

„[…] Man muss einmal unterscheiden zwischen Barrierefreiheit von Seiten des Anbieters sozusagen und dann gibt’s noch die andere Barrierefreiheit, das ist die des Nutzers. […]Wenn die Gemeinde Wien eine barrierefreie Website hat, dann nutzt mir die nur relativ wenig, wenn ich nicht, das entsprechende Programm habe, die zu lesen […].“

„Man muss es Blinde austesten lassen. Weil es hat nicht jeder dieses tolle Programm das ich hab. Und es kann auch sein, dass ich es nicht mehr hab, ich mein wer weiß, aber mit einem normalen Betriebssystem, mit irgendeiner Braillezeile muss es so sein, dass man ins Internet kann, dass man sich einfach normal orientieren kann.“

Zusammenfassend lässt sich feststellen: Immer wieder wird betont, dass es als wichtig angesehen wird, technische Standards für die Erstellung von Internetseiten auch tatsächlich einzuhalten. Es genügt nicht, die angebotene Website als „barrierefrei“ zu bezeichnen. Wie man es nennt ist im Endeffekt egal, denn wichtig für den Betroffenen ist lediglich, dass die Websites auch tatsächlich für die Nutzer ohne Barrieren zugänglich und nutzbar sind.

Tom Shakespeare sprach sehr allgemein darüber was Disability Studies sind und welche Chancen und Möglichkeiten damit geboten werden. Auf meine Frage, wie seine Einstellung zu Barrierefreiheit im Web ist und für wie wichtig er ein barrierefreies Internet für Menschen mit Behinderung sieht gab er mir eine sehr spannende Antwort. Er erachtet das Internet als extrem wichtig im Sinne von Selbstständigkeit und Empowerment für Menschen mit Beeinträchtigungen, denn nirgendwo sonst, kann man vorurteilsfreier kommunizieren. Hier entstehen neue Möglichkeiten zur Integration. Die Zielgruppe sind hier aber nicht nur sehbehinderte oder blinde Menschen, Alte oder auch sonstige klassische Personen, die hier meist angeführt werden. Er brachte eine ganz neue Gruppe von Menschen aufs Tapet, an die ich noch gar nicht gedacht hatte, nämlich Menschen mit Authismus. Er meinte, dass dies meist sehr intelligente Menschen sind, die aber nicht mit der Außenwelt kommunizieren können. Mittels Internet stehen ihnen neue Wege offen mit anderen in Verbindung zu treten. Gleiches gilt dann wohl auch für Menschen mit Tourette Syndrom, die über das Web ihren Zwängen entkommen können – mit jemanden reden, ohne ihn dauernd beschimpfen zu müssen.

Meiner Meinung nach, ergeben sich dadurch auch neue Arbeitsformen für diese Menschen, sodass sie sich in die Gesellschaft einbringen können und mit selbstverdienten Geld, ihre Situation auch wirtschaftlich verbessern können und unabhängiger werden.

Spannende Ideen von einem spannenden Herren.

Aus aktuellem Anlass (für eine Modellrechnungsapplikation), hab ich mich entschlossen meinen Bloglesern die wichtigsten Eckdaten für eine zugängliche und strukturierte Tabelle nicht vorzuenthalten.

Tabellenzusammenfassung

<summary>Das ist die Zusammenfassung des Inhaltes der Datentabelle </summary>

Dieses Attribut wird direkt innerhalb des <table> Tags angewendet und soll als Inhaltsbeschreibung dienen. Das Summary ist besonders wichtig für die Barrierefreiheit, da es Screenreadern exklusiv zur Verfügung steht. Vergleichen kann man das Attribut mit dem ebenso sehr unerlässlichem “Alt-Text” von Bilddateien in Webseiten.

Tabellenbezeichnung und Zusammenfassung

<caption>Das ist die Tabellenüberschrift</caption>

Dieser Tag fungiert als Tabellenbezeichnung oder Überschrift, in diesem Fall würde ich aber empfehlen lieber über die Tabellen (zusätzlich oder stattdessen) ein klassisches Überschriften-Element zu setzen. (h1, h2..), da Screenreader-Benutzer besser zu solchen Überschriften springen können.

Struktur der Tabelle

Die 3 logischen Bereiche

• <thead> Tableheader
• <tbody> Tablebody
• <tfoot> Tablefooter

bieten die Möglichkeit einer passenden Aufteilung in die Bereiche: Kopf, Inhalt und Footer. Wichtig: Wenn Tableheader oder -footer verwendet werden muß unbedingt ein Tablebody-Element festgelegt werden, die 3 funktionieren nur zusammen. Eine Tabelle darf nur einen <thead> oder <tfoot>, aber mehrere <tbody>, um mehr Überschaubarkeit festzulegen.

Zeilen- oder Spaltenformatierung

Die Elemente <colgroup> und <col> ermöglichen eine spezifische Darstellung der Spalten. Für eine Formatierung einer ganzen Zeile kann das <tr> Element zum Ansteuern verwendet werden. Das Element <colgroup> ermöglicht eine oder mehrere mit dem <col> Element ausgezeichneten Spalten. Hier gibts ein paar Einbußen bei älteren Browsern.

Praxisbeispiel


<h2>Tabelle Performance</h2>
<table summary="Wie entwickelt sich mein Sparvertrag bei verschiedener Aktienperformance">
<caption>Performance</caption>
<colgroup>
<col id="Jahre" />
<col id="Performance_3" />
<col id="Performance_4" />
</colgroup>
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">3%</th>
<th scope="col">4%</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">2</th>
<th scope="col">3%</th>
<th scope="col">4%</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>10000</td>
<td>20000</td>
</tr>
<tr>
<td>2</td>
<td>20000</td>
<td>30000</td>
</tr>
<tr>
<td>3</td>
<td>30000</td>
<td>40000</td>
</tr>
</tbody>
</table>


Formatierung

In der CSS-Spezifikation gibt es 2 Varianten von Tabellenrahmen:

• seperate
• collapse

Bei seperate erhält jede Zelle einen eigenen Rahmen, während bei collapse die Zellen sich Ränder teilen, welches ich nützlicher finde. Damit die Tabelle ein Rasterlayout behält, sollte auch eine feste Breite festgelegt werden, der Rahmen hilft sicher optisch besser abzugrenzen und ein Padding verbessert das Lesen der Zellendaten. Alle anderen oben genannten Elemente können wie üblich mit CSS gestylt werden. Empfehlen kann ich die CSS Table Galler, ausprobieren lohnt sich.

Referenzen

• W3C-Empfehlung für Tabellen
• Web Standards Solutions
• Building Accessible Websites
• CSS Table Gallery
• Für Faule: Tabellencreator

Ziele der Webseite

Legen Sie ihre Ziele im Vorhinein fest. Überlegen Sie sich ein rundes Konzept, was der Webauftritt bewirken soll. Welchen Zweck und Aussage soll die Webseite erfüllen? Planung und Vorbereitung sind sicherlich der wichtigste Schritt. Fragen sie sich auch welches die gewünschte Besucher Zielgruppe sein soll. Unterscheiden kann man bei der Besuchergruppe zum Beispiel ganz simpel in Stammkunden oder in Neukunden. Aufgrund dieser Informationen kann man ein Storybook und eine Struktur der Seite erstellen. Ich skizziere Webseiten zuerst immer nur auf diversen Zettelchen und versuche die Navigationsstruktur daraus zu bilden. Mit ihrer Kommunikationsabsicht und Zielgruppe bestimmt man danach einfacher den Inhalt der Webseite. Ein Webauftritt nur des Auftrittes wegen macht wenig Sinn. Was wollen Sie dem Besucher bieten?

Struktur und Inhalt

Versuchen Sie den Aufbau der Webseite so wenig wie möglich zu verschachteln. Was für den Besucher wichtig ist, reduziert sich bei genauerer Überlegung schnell. Für ein rasches Auffinden relevanter Informationen, ist eine klare und übersichtliche Site-Struktur empfehlenswert. Keine Neuerfindungen eines Seitenaufbaus sind notwendig, ich halte mich an gewohnte Elemente. (Logo auf Startseite, im Header Kontaktmöglichkeit, etc..) Text und Content sind King, die Bildersprache sollte nur grafisch unterstützend wirken. Versuchen Sie sich bei der Struktur an eine intuitive, logische Bedienung zu halten. Für den Online Text sollten knackige kurze Texte verwendet werden, die Hauptaussage gleich zu Beginn, die Details dann später im Text. Ein attraktiver Text ist auch für Suchmaschinen interessant.

Mitbewerberanalyse

Eine Analyse der Websites Ihrer Mitbewerber macht Sinn. Welche Art der Präsentation wurde gewählt. Prüfen Sie Funktionsumfang und Alleinstellungsmerkmale. Solch eine Analyse sollte regelmäßig stattfinden.

Gestaltung des Webauftrittes

Es ist wichtig die CI des Unternehmens auch ins Web zu transportieren. Logo und Farbenwelt sollte mit der eigentlichen übereinstimmen. An erster Stelle sollte die Beachtung einer guten Bedienbarkeit stehen. Klare übersichtliche Screendesigns bieten dem Text mehr Freiraum. Ein einheitliches Look und Feel nicht vergessen.

Technischer Rahmen

Um Inhalte weiters selber pflegen zu können empfehle ich auch bei kleineren Seiten den Einsatz eines Content Management Systems (CMS). Diese Systeme bieten viele Vorteile. Es gibt sehr qualitative Templates, die einfach an die CI anzupassen sind. Meistens wurde hier schon auf eine Trennung von Inhalt und Layout wertgelegt um auch die Webseite möglichst barrierearm bzw. zugänglich zu halten.

Diese Zusammenstellung soll nur als kurze Antwort für wichtige Knackpunkte eines nachhaltig qualitativen Webauftrittes für kleinere Unternehmen dienen. Das Thema ist dermassen komplex und umfangreich, um schneller näher ins Detail gehen zu können. Für andere Herangehensweise oder Anmerkungen bin ich natürlich dankbar.

Zehn Content Management Systeme wurden gegenübergestellt:

• Drupal
• Joomla!
• TYPOlight
• TYPO3
• OpenCms
• CMS made simple
• PostNuke
• basecmp
• AxCMS.net
• eZ Publish

Verglichen wurde unter anderem (auch in einer Featuretabelle) der Funktionsumfang, Benutzer, Rollenverwaltung, Back-End, Layout, Templates.

Für einen schnellen Überblick könnte das PDF ausreichen, allerdings geht es nicht sehr in die Tiefe. Mir persönlich fehlen besonders die Eckpunkte Accessibility – Barrierefreiheit oder Browserkompatibilität und verfügbare Plug-ins der jeweiligen Systeme.

Selber konnte ich bisher nur Erahrung mit Joomla!, Drupal und TYPOlight machen. Letzteres ist sehr gut für kleinere Seiten einsetzbar, Drupal hat mir wegen seiner Flexibilität gefallen. Den Output von Joomla! ist nur über sehr umständliche Wege barrierearm zu gestalten. Hier wird schon lange eine tabellenfreie Version versprochen.

By the Way: Wie siehts eigentlich mit WordPress als CMS aus. In der 2.5er Version wurde ja als Feature darüber gesprochen, allerdings konnte ich keine wesentlichen CMS Features in der Version erkennen bis jetzt. Grundsätzlich ist mir für kleine Webauftritte WordPress am liebsten, auch wenn es sich um keinen Blog handelt.

Unter dem Titel “Steiermark für Alle” sollen Gäste mit besonderen Bedürfnissen einen schönen Urlaub geniessen können. Das finde ich grundsätzlich wunderbar, dennoch hat das Vorhaben noch einen Haken: die dazugehörige Webseite.

Steiermark barrierefrei hat für die Ortssuche Flash eingebettet. Das ist über einen Screenreader absolut nicht bedienbar. Die Schriftgrößenänderung ist in einem Bild festgehalten, ebenso die ganze Navigation. Statt Accesskeys wurde ein spezielles Navigationsmenü mit Ankerpunkten gebastelt. Leider gibt es auch nicht für alle Bilder Alternativtexte. Schlimm sind auch die Kontraste der Grünfarben. Der Textbrowser zeigt sehr unschöne Ergebnisse. Bei der Unterkunftsanfrage listet er alle verfügbaren Daten auf.

Schade, denn die Ziele sind sehr ambitioniert und die notwendigen Adaptierungen sind nachhaltig kosteneffizienter. Wenn das Thema so rausposaunt wird, sollte auch eine passende Webseite bereitstehen.

Besonders überraschend dabei fand ich, dass die aktivste Partei im Bezug auf dieses Thema die FPÖ ist. So gab es im noch jungen Jahr 2008 drei OTS Aussendungen der Partei, die sich genauer mit Barrierefreiheit im Internet auseinandersetzt. Einerseits übt FPÖ Behindertensprecher Norbert Hofer im Jänner zweimal Kritik an dem nicht genau definierten E-Governmentgesetz und kritisiert, dass viele Behördenseiten noch immer nicht barrierefrei sind. Andererseits hat Herr Hofer nun auch seit April seine eigene Homepage barrierefrei gestaltet und macht im Zuge dessen wiederum auf das Thema aufmerksam.

Die ÖVP, Grüne und die SPÖ sprechen Barrierefreiheit des Internets im Februar in Verbindung mit der wien.at Seite an. Die SPÖ nennt es als Referenzprojekt. Grüne und ÖVP fordert die Gestaltung der Website der Stadt Wien nach Standards der Barrierefreiheit. Na wer hat da jetzt recht??

Am BZÖ scheint das Thema gänzlich vorbei gegangen sein.

Da ich in meiner Diplomarbeit zu dem Schluss komme, dass ein barrierefreies Internet zu mehr politischer Partizipation und gesellschaftlicher Integration von Menschen mit Behinderung führt, wundert es mich doch sehr, dass es gerade im Hinblick auf das Inkrafttreten des E-Governmentgesetzes seit 1. Jänner 2008, nicht mehr in der Behindertenpolitik der österreichischen Parteien thematisiert wird.

Die Webseite des Hauptbahnhofes barrierefrei ist sehr gut gelungen, aber kein Wunder bei diesem kompetenten Partner. Die Agentur WIENFLUSS kann mit einer gelungen Umsetzung punkten. (Endlich kann ich wieder über positive Relaunches schreiben.)

Für Benutzer von Screenreader dürfte die Webseite keine Hürde darstellen. Wie man im Textbrowser sehen kann wurde an eine Access-Navigation und eine semantische Gliederung gedacht. Skalieren der Webseite geht gut ohne grosse Umbrüche. Ebenso sind die Bilder mit Alternativtexten versehen. Das Tabbing (Tastaturbenutzung) geht über die ganze Seite. Besonders löblich finde ich, dass die Videos auf der Webseite mit Untertitel versehen wurden.

In diesem Fall sollten sich die Projektleiter und Macher auf die Schulter klopfen, lediglich hätten die URLs noch Suchmaschinen und User-freundlicher implementiert werden können. Ich bin auch gespannt ob es möglich ist die Ticketautomaten zugänglicher zu machen, denn die sind selbst für Normal-User derzeit etwas unfreundlich.

Grundsätzlich ist die Seite über einen Textbrowser gut bedienbar, das Buchungssystem liefert leider nur die Standard Werte. Wenn ich schon über die neue Webseite von Niki herziehe, soll nicht unerwähnt bleiben, dass ein Skalieren der Seite schlecht funktioniert, vorallem die Telefonnummern sind in einem Bild festgehalten, dass widerum keine Alternativ-Texte hat.

Wie sooft ist dieses Thema zu den Web-Agenturen noch nicht genug vorgedrungen. Wo bleibt die nächste Generation an Marketing Entscheidungsträgern, die auch etwas Bildung in Webstandards haben, schliesslich geht es auch um einene weiteren Kundenkreis. Gerne würde ich auch öfters über positive Beispiele von Webseiten Relaunches schreiben. Das Buchungssystem von der Fluglinie AUA könnte ein gutes Vorbild geben, da das Formular halbwegs barrierearm ist.