ctrl + 1 = zurück zu deiner Startseite

ctrl + 2 = bringt euch direkt zu eurem Profil

ctrl + 3 = öffnet das Freundschaftsanfragen-Drop-Down-Menü

ctrl + 4 = öffnet das Nachrichten-Drop-Down-Menü

ctrl + 5 = öffnet das Benachrichtigungen-Drop-Down-Menü

ctrl + 6 = führt zu den persönlichen Kontoeinstellungen

ctrl + 7 = führt zu den oftmals umstrittenen Privatssphäre-Einstellungen

ctrl + 8 = führt zur Facebook Fanpage von Facebook :)

ctrl + 9 = führt zum Impressum

ctrl + 0 = führt zum Hilfebereich

ctrl + ß = damit springt man in das Facebook-Suchfeld

ctrl + m = öffnet den Nachrichteneditor egal wo ihr gerade seid

Nutzt ihr diese Shortcuts? Kennt ihr noch andere? Welcher ist der Nützlichste?

Die Bawag P.S.K. betreibt bereits seit einiger Zeit den Service MeineSpende.at, mit dessen Hilfe man österreichische Spendenorganisation oder Spendenaktion unterstützen kann. Liechtenecker wurde mit dem Auftrag betreut, die Website zu überarbeiten und ein begleitendes Social-Media-Konzept zu gestalten. Im Vordergrund stand dabei, MeineSpende.at übersichtlich und mit hoher Usability auszurichten, damit jeder sofort schnell, einfach und sicher spenden kann.

Die Umsetzung

Die von Liechtenecker gestaltete neue Website von MeineSpende.at verschafft mit einem Klick einen schnellen Überblick über österreichische Spendenorganisationen und ihre Spendenaktionen. Ein übersichtliches Profil zu jeder einzelnen Aktion informiert ausführlich über deren Tätigkeiten.

Am Ende dieser Profile befindet sich der Button “Für diese Aktion spenden!”. Wer ein Konto der Bank Austria, BAWAG P.S.K., ErsteBank/Sparkasse, Hypobank, Raiffeisenbank, Spänglerbank oder der Volksbanken hat, wird durch den Klick darauf mit dem eigenen Online-Banking-Konto verbunden. Nach der Identifikation mit den E-Banking-Zugangsdaten erscheint ein Formular, in das der gewünschten Spendenbetrag eingetragen wird. Durch Eingabe des persönlichen TANs wird das Geld dann an die jeweilige Organisation überwiesen – einfach und völlig sicher.

Damit das Geld am richtigen Ort ankommt und das Konto von Übergriffen geschützt sind, verwendet MeineSpende.at die EPS-Online-Überweisung. Bei diesem e-payment standard (EPS) handelt es sich um eine offene und normierte Schnittstelle zwischen Händlern/E-Government und Banken zur Durchführung unwiderruflicher Online-Zahlungen. Weil mit dieser Schnittstelle direkt auf das gewohntes Online-Banking-System zugegriffen wird, genießt jeder Spender denselben Schutz wie bei jeder anderen Überweisung.

Ganz im Sinne des Ausspruches “Tue Gutes und rede darüber”, können Spender ihre gute Tat nach der Überweisung mit Hilfe eines Buttons in den sozialen Netzwerken ihrer Wahl (zum Beispiel Twitter oder Facebook) verbreiten und damit auch ihre eigenen Netzwerke zum Geben animieren.

Zusätzlich wird es auch eine eigene Facebook-Fanpage zu MeineSpende.at geben, auf dem die einzelnen Organisationen vorgestellt werden. Auf dieser Fanpage soll auch klar ersichtlich werden, welche Aktivitäten und Aktionen die Spende bei den einzelnen NGOs bewirkt hat.

Erstklassige internationale Referenten informieren am 16. Oktober im Techgate Vienna über Trends bei barrierefreien Techniken.

Die interessanten Themen gehen von "Web 2.0 und Barrierefreiheit selbst testen" (Sylvia Egger) über Stellenwert von Social Media/Web 2.0 und Barrierefreiheit (Max Kossatz) bis zu Accessible Flash (Niqui Merret). Das Tüpfelchen auf dem i: die Teilnahme ist kostenlos. Also liebe Webdesigner, Marketingkollegen und Co., wer hier nicht mitmacht ist selber schuld.

Programm
Anmeldung

Über 600 Fehler im Source Code

Der Konfettiartige Source Code auf presse.com der Startseite weist über 600 Fehler auf, da kommt es in verschiedenen Browsern schon mal zu Darstellungsunterschieden bzw. -fehlern. Gleich 4 bewegende Banner machen meine Kopfschmerzen aufgrund der schlechten Struktur auch nicht besser. Außerdem läuft mein Rechner vor lauter Flashbelastung auf Hochtouren, leider bei jedem Artikel. In einer Presseaussendung steht, daß es eine neue Vorlesefunktion gibt. Die hab ich erstmal suchen müssen. Das Mini-Lautsprecher Symbol öffnet ein kleines Popup, das nach einiger Ladezeit den Artikel vorliest. Denn Sinn hab ich nicht ganz verstanden, einen Screenreader kann diese Funktion ja wohl nicht ersetzen. Der Höhepunkt der Zugänglichkeit bietet allerdings das Surfen mit der Tastatur. Hier geht gar nichts, probiert es mal aus, ich dachte schon die Tabulator-Taste wäre kaputt. Sorry, warum sollten eingeschränkte User auch zu eurer Zielgruppe gehören..!? Denn die coolen IPhone Besitzer hat die Presse im Visier, dafür gibt es extra Content. Nur haben wir in Österreich wesentlich mehr behinderte User als Applehandy-Besitzer.

Mitbewerber auch nicht besser

Aber auch bei den Mitbewerbern sieht es nicht gerade rosig aus: derStandard kann sich einfach von seinen Frameset und seiner Geschicklichkeitsspielartigen Navigation nicht lösen. ORF sollte sich einmal mit den ALT-Texten bei Bildern auseinandersetzen, dies erfordert 10min Einschulung. Auf krone.at schmerzen mir immer die Augen wg. dem schwarzen Hintergrund… auf nähere Details möcht ich bei den Online-Tageszeitungen gar nicht eingehen.

Mehr Budget für Zugänglichkeit

Der Artikel liest sich zwar so, als ob ich meinen montäglichen Grant loswerden will, so ist es aber nicht. Ich verstehe nicht wie so extrem frequentierte Webseiten komplett auf jegliche Usability-Tests und noch mehr Accessibility pfeiffen. Ja ich weiß, ihr seid historisch gewachsen aber von den vielen Werbegeldern ist sicher ein Budgetposten für mehr Zugänglichkeit drin, wetten?

Deswegen kamen ein paar Jungs auf die glorreiche Idee eine Webseite mit Pornos für Blinde zusammenzustellen. Die Umsetzung dahinter ist recht einfach gemacht. Internetmovies wurden mittels Headset erklärt und beschrieben. Leider klingen die Sprecher etwas emotionslos und unerfahren. Eine weitere "Erektions-Barriere" stellen ebenso die fehlenden Originaltöne dar. Das würde doch etwas mehr Dimension in die Vorstellung bringen.

Die Webseite selber ist extrem minimal aufgebaut, aber leider nicht ganz barrierefrei. Dies sollte für solch ein Angebot Grundvorrausetzung sein. Der Source Code ist zwar valide, aber die Links haben kein <title> Attribut, welches für Screenreader eine erweiterte Information zum Audio-File bieten könnte. Die Audio-Dateien sind einfache .mp3 Files, also eigentlich Downloads. Diese sind mit einem durchschnittlichen Flash-Player abspielbar. Leider wäre hier ein zugänglicherer Web-Player viel passender gewesen, damit keine weitere Hürde entsteht. Leider sind auch die Links bei reiner Tastatur Verwendung nicht hervorgehoben.

Soviel trockene Technik bei einem so feuchtem Thema fällt mir schwer, würde die Idee aber zu einem Ganzen machen. Den Ansatz finde ich toll, ich bin mir sicher, dass solch ein Angebot auf rege Nachfrage stoßen würde. Wenn ich doch bloß mehr Zeit hätte..

Hier gehts zur Porn for The Blind

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.