Barrierefreies Webdesign

14.04.2009

Teil 8: Links sind nicht gleich Links

Grundsätzlich: Ein Link verlangt stets eine Aktion des Users. Sei es das Ansteuern einer anderen Webseite, Navigieren innerhalb einer Webseite, Herunterladen eines Dokuments oder das Öffnen des E-Mailprogrammes, um eine Mail zu verschicken.

Doch wie sieht so ein Link in der Regel aus? Meistens unterstrichen und in einer anderen Farbe. Das finden wir auf vielen Seiten. Doch ein Link kann noch „bezeichnender“ sein. Er kann zum Einen mehr Informationen über die verlinkte Seite bieten, zum Anderen kann er auch Orientierungshilfe sein.

Wenn wir uns einen Link aus Usersicht betrachten, finden wir vier mögliche Zustände.
  1. der unbesuchte Link – (der "jungfräuliche" Zustand :-) eines Links)
  2. der besuchte Link
  3. der "bewegte" Link – wenn wir mit der Maus darübergleiten
... und dann gibt es den "aktiven" Link. Dieser stammt aus der Internet-Urzeit, als es noch sehr langsame Modems gab. Der "aktive" Link wurde sichtbar, wenn ein Link angeklickt und die Seite geladen oder das E-Mailprogramm geöffnet wurde.

Dieser Zustand wurde aber immer unbedeutender, da heutzutage die Internetgeschwindigkeit kaum eine Rolle mehr spielt und wir "sehen" den aktiven Link kaum noch. Dennoch ist er ein wichtiger Teil einer Link-Zustandsfolge und wird auch immer noch in diversen "stylesheets" verwendet.

Es gibt einen weiteren Zustand, der selten verwendet wird. Auf barrierefreien Seiten findet man ihn häufiger, auf üblichen Webseiten so gut wie nie. Dieser Zustand wird "focus" genannt.

Den "focus" erkennt man, wenn mab mit der Tabulatortaste den Link ansteuert. Somit wird der User informiert, dass die Steuerung auf dem Link ruht und nun durch die Entertaste dem Link gefolgt werden kann. Dies stellt ein wichtiges Orientierungswerkzeug dar – vor allem für Zielgruppen, die vermehrt Unterstützung bei der Navigation von Webseiten benötigen.

Links benötigen aber noch andere Informationen. Selten sind sie betitelt – sprich – erst wenn man die Seite geöffnet hat, weiß man, wo man tatsächlich ist. Zur Vereinfachung gibt man dem Link einen kurzen, aber aussagekräftigen Titel.

Bei komplexen Webseiten werden auch interne Links mit einem Titel versehen. So erfährt der User, welche Informationen sich unter dem Link verbergen und kann sich einen Überblick über die gesamte Webseite verschaffen.

In Navigationsleisten empfiehlt es sich, Menüpunkte mit "accesskeys" zu versehen. Obwohl im letzten Newsletter bereits auf das Thema eingegangen wurde, möchte ich die Vorteile des "accesskeys" noch mal hervorheben.

"Accesskeys" werden benutzt, um die Navigation innerhalb einer Webseite zu erleichtern. Mittels "accesskeys" ist es möglich, mit der Tastatur durch die Webseite blättern. Der User ist somit nicht auf die Maus angewiesen. In "accesskeys" werden ausschließlich Ziffern verwendet, da die meisten Buchstaben bereits durch das Betriebssystem mit "shortcuts" belegt sind. Jeder Browser hat seine eigene Bedienungsanleitung, wie man "accesskeys" aktiviert.

Mehr zur Benutzung "accesskeys" finden Sie auf meiner Webseite im Glossar.

09.04.2009

Teil 7: Inhalte - Gliederung und Struktur

Einige der schwierigsten und häufigsten Barrieren befinden sich in den Inhalten einer Webseite. Webseiten sind gerne mal vollgepackt mit Fremdbegriffen, Schachtelsätzen, Interpunktions-, Rechtschreib- und Grammatikfehlern, dies sind nur einige Beispiele, wie man auch Inhalte zu Barrieren machen kann.

Von der Universitätsseite, die mit Fremdwörtern um sich wirft, als wären sie Konfetti, bis zu der privaten Webseite, bei der man immer das Gefühl hat, die Inhalte wurden von einem 5jährigen verfasst - all das macht nicht nur ein schlechtes Image, sondern man hat fast die Garantie, dass die Seite nur einmal besucht wird.

Gerade bei Webseiten des öffentlichen Bereichs scheint es ein Problem zu sein, Inhalte klar auszudrücken. Menschen mit Sprachminderung (Bürger mit Migrationshintergrund, Menschen mit Lernschwierigkeiten, Gehörlose) haben kaum die Möglichkeit, die Inhalte zu verstehen.

Auch die technische Sprache hat ihre Tücken. Im IT-Bereich ist es leider normal, englische Begriffe in den normalen Sprachfluss einzubauen. Doch versteht es der Endverbraucher auch? Webseiten mit umfangreichem Inhalt mögen zwar viel Lesbares anbieten, aber es ist selten lesenswert.

Um inhaltliche Barrieren zu vermeiden, lohnt es sich, die Hilfe von Texterinnen oder Textern zu nutzen. Sollte man nicht auf Experten zurückgreifen können, kann man die Inhalte vorab von verschiedenen Leuten lesen lassen. Ich verfasse viele Texte selbst und bin mir bei diversen Formulierungen nicht immer sicher, darum lasse ich gerne Profis ran, bevor ich die Inhalte veröffentliche. Mir ist es wichtig, dass die (gehaltvollen) Inhalte auch von der Zielgruppe verstanden werden.

Aus all diesen Gründen ist es zwingend notwendig, auf Webseiten eine klare Sprache zu benutzen. Der „normale“ Mensch liest durchschnittlich 700 Wörter auf einer Webseite, danach vergisst er die Inhalte wieder bzw. kann den Kontext nicht mehr herstellen. Dies kann man vermeiden, indem man kurze Sätze verwendet. Verschachtelte Sätze sollte man vermeiden. Es mag für Sprachakrobaten eine Herausforderung darstellen, anderen zu zeigen, was man so drauf hat. Kann durchaus ganz g’spaßig sein unter Gleichgesinnten, aber nicht für das gemeine Volk – und das meine ich nicht wertend. Bei all diesen Dingen sollte man sich immer vor Augen halten, wer ist die Zielgruppe und wen möchte man letztendlich auch
erreichen.

Ein weiterer Punkt ist die Gliederung und Struktur eines Textes. Eine der wichtigsten Regeln im Web lautet: Papier ist nicht Web. Daher gelten andere Regeln für die Strukturierung eines Textes. Fließtexte im Web müssen leicht lesbar sein. Dies kann man bewirken, indem man keine Serifen-Schrift verwendet. Serifen-Schriften sind z.B. Times-New-Roman und ähnliche Schriften. Man erkennt sie an den Schnörkeleien bei bestimmten Buchstaben wie zB dem t oder f. So verwendet man in der barrierefreien und benutzerfreundlichen Webseitengestaltung für Fließtexte ausschließlich serifenlose Schriften. Dies sind z.B. Arial, Verdana, Helvetica etc.

Weiters sollte man bei Fließtexten darauf achten, dass der Durchschuss angemessen ist. Der Durchschuss ist der Zwischenraum zwischen den Zeilen.

Auch die Zeilenlänge spielt eine enorm wichtige Rolle. Damit der Besucher Ihrer Seite auch die Inhalte aufnehmen kann, sollte man nie mehr als 13 Wörter pro Zeile verwenden. Somit kann der Leser dem
Geschriebenen leicht folgen, ohne dass er die Zeile verliert.

Überlegen Sie sich gut, ob Sie für Fließtexte Blocksatz verwenden wollen. Bedenken Sie auch, dass es im Web keine Silbentrennung gibt. Man sollte daher auf Nummer Sicher gehen und stets einen linksbündigen Fließtext wählen. Wenn man aber nicht viel Text hat, dieser gut strukturiert und gegliedert ist, kann man auch Blocksatz verwenden. Aber bitte: Lassen Sie auch Ihre Leserschaft testen, ob diese Variante gut ankommt.

Tipps:
  1. Lassen Sie all Ihre Texte von einer Person gegenlesen, die in Ihrem Unternehmen / Projekt nicht involviert ist.
  2. Verwenden Sie eine klare Sprache. Sollten Fremdwörter notwendig sein, können Sie zum Einen eine eigene Begriffsseite (Glossar) verwenden, um dort die Begriffe nochmal zu erklären. Zum Anderen können Sie mit kleinen HTML-Tags Begriffe direkt erklären.
  3. Nutzen Sie Überschriften, um Inhalte sowohl optisch als auch inhaltlich zu strukturieren.
  4. Achten Sie auf die Zeilenlänge. Bedenken Sie: Sie schreiben keinBuch, sondern Texte fürs Web.
  5. Achten Sie auch auf die Schriftgröße. Die optimale Schriftgröße bei Fließtexten sollte zwischen 0.75 bis 1em liegen.
  6. Wählen Sie für Fließtexte eine serifenlose Schriftart – und bedenken Sie auch dabei: Es sollte eine Schriftart sein, die jeder auf seinem PC oder Laptop installiert hat. Dazu eignen sich die standardisierten Systemschriftarten (Arial, Verdana etc).
  7. Kontrastreiche Schriften sind gut lesbar, achten Sie auf die richtige Farbwahl.
  8. Der optimaler Durchschuss sollte ebenfalls beachtet werden. In der Regel ist es so: Bei einer Schriftgröße von 0.8 em sollte man einen Durchschuss von 1.5em verwenden.
  9. Links- oder rechtsbündig oder gar Blocksatz? Grundsätzlich gilt bei Fließtexten immer, diesen linksbündig anzulegen.
Wenn man all diese Punkte beherzigt, dann stehen die Chancen sehr gut, dass die Webseite nicht nur für die Zielgruppe interessant ist, sondern die Inhalte auch in Google effizienter indiziert werden.

08.04.2009

Teil 6: Bild und Grafik

Da ich ja täglich viele Webseiten besuche, habe ich ein Gefühl dafür bekommen, wo eventuell Barrieren sein könnten. In den meisten Fällen liegen die Barrieren in 3 Bereichen:
  1. Die Bilder haben eine unmöglich große Datenmenge und meistens auch noch eine schlechte Qualität oder
  2. 90% aller Bilder im Netz haben eine unzureichende bis gar keine Bildbeschreibung und
  3. In einigen Fällen werden auch keine Größen der Bilder angegeben.
Dies kann zur Folge haben, dass entweder Bilder nicht korrekt oder gar nicht dargestellt werden. Werden sie nicht dargestellt, weiß der Nutzer nicht, um welches Bild es sich handelt oder ob da gar eines sein sollte. Der User wird im Unklaren gelassen und ist daher nicht klüger, als vor dem Besuch der Webseite.

Oft sind es Kleinigkeiten, die die Qualität einer Webseite ausmachen und es sind die Kleinigkeiten, die man als guter (oder als ambitionierter) Webdesigner kennen und können muss. Es ist daher Pflicht, die Datenmenge bei Bildern so gering wie möglich zu halten. Es ist Pflicht, eine aussagekräftige Bildbeschreibung zu verfassen und es ist Pflicht, eine ordentliche und korrekte Größenangabe der Bilder anzugeben. Wenn diese Punkte beachtet werden, hat man bereits ein hohes Maß an Barrierefreiheit erreicht.

Es nutzt die beste Software nichts, wenn man nicht lernt, diese auch optimal zu nutzen. Das wissen wir. Aber es ist auch wichtig, dass Webdesigner und Entwickler von CMS-Software ihre Enduser schulen und sensibilisieren. Letztendlich kommt es jedem zu Gute.

07.04.2009

Teil 5: Alt aber gut?

Ein weiteres Beispiel für Barrieren im Web sind veraltete Tabellenkonstrukte und Frames. Tabellenkonstrukte stammen noch aus einer Webgestaltungsära Ende der 90er, in der CSS noch in den Kinderschuhen steckte und man Styles nicht auslagern konnte. Einige wichtige Positionierungselemente sollten die Jahre danach folgen. Noch immer finden sich etliche Tausend Webseiten von Privaten und Unternehmen, die Tabellenkonstrukte verwenden. Wer heute als Entwickler noch Tabellenkonstrukte verkauft, sollte ernsthaft über eine berufliche Umorientierung nachdenken.

Tabellen sind ausschließlich bei der Auflistung von Inhalten zur tabellarischen Darstellung geeignet und nicht als Designelement. Die, meiner Meinung nach, massivsten Nachteile an Tabellenkonstrukten sind: Inhalte können mittels Screenreader kaum bis gar nicht erfasst werden und sie sind schwer und unflexibel zu positionieren. Das ist für kreative Webdesigner kein Hilfsmittel um kreative und schöne Layouts zu gestalten.

Ähnlich verhält es sich mit Frames. Bei Frames geben Screenreader auf. Dass es heute noch immer einige Webseiten gibt, die Frames verwenden, zeigt, dass man die Augen vor den technischen Neuerungen verschließt. Wenn man dann nach den Gründen dafür fragt, so hört man oft und gerne: „Damit ich das Menü leichter ändern kann“. Das mag vor neun Jahren vielleicht sogar so gewesen sein, aber nicht mehr mit den heutigen Hilfsmitteln. Dank dynamischer Module kann ich mindestens genauso gut, wenn nicht sogar effizienter, Inhalte eines Menüs in Sekunden ändern.

Frames sind in jedem Fall die schlechtere Wahl. Allein die Tatsache, dass Textbrowser und viele anderen Ausgabegeräte keine Frames erkennen können, sollte einem schon zu denken geben, wie veraltet Frames doch sind.

06.04.2009

Teil 4: Der Browser, dein Freund und Helfer?

Mittlerweile gib es eine enorme Anzahl und Varianten von Browsern und diese haben so ihre Eigenheiten und Spezialitäten. Einerseits wunderbar, somit bekommt jeder User das, was er braucht und was ihm gefällt. Für uns Webentwickler sind das schon sehr herausfordernde Missionen, Webseiten zu erstellen, die in jedem Browser gut aussehen und auch noch stabil laufen.

Wenn einem überhaupt graue Haare beim Gestalten und Umsetzen von Webseiten wachsen können, dann ganz bestimmt beim IE. Kaum ein Browser hat mehr Nerven und schlaflose Nächte gekostet sowie dicke Wälzer über Browserbugs gefüllt, wie der IE6. Eigentlich erstaunlich …

Es gibt einige Kollegen, die beschlossen haben, den IE6 zu boykottieren. Meines Erachtens keine gute Idee, denn noch immer nutzen über 40 % der Enduser den IE6. Und eines sei noch erwähnt: Viele Unternehmen müssen IE6 nutzen, den Windows 2000 erlaubt keine Erneuerung auf IE7. Somit würden viele potenzielle Kunden ausgeschlossen – was sich - auf längere Sicht gesehen – kein Unternehmen leisten kann. Ich sage nur „Wirtschaftskrise“. Daher ist es unabdingbar, Webseiten vor allen anderen Browsern für den IE6 zu konzipieren.

05.04.2009

Teil 3: Doch wie ist das mit den Barrieren im Internet?

Barrieren im Internet können vielfältig sein, sind aber in den meisten Fällen technischer Natur. Um das Internet „betreten“ zu können, benötigen wir ein geeignetes Programm. Es gibt mittlerweile eine Unzahl von Browsern, für jedes Betriebssystem und jeden Geschmack und täglich gibt es neue Abwandlungen. Jeder von diesen Browsern hat seine Eigenheiten und seine Spezialitäten.

Sie können sich vorstellen, wie mühsam es manchmal ist, eine Webseite für mindestens sechs Browser zu konzipieren – aber es ist möglich. Wichtig bei einer Webseitengestaltung ist immer die Frage nach dem „Wer solls lesen?“ … In der Businesssprache nennt man es „Zielgruppendefinition“. Es geht darum rauszufinden, wer letztendlich meine Besucher sind und wer es sein soll. Wen spreche ich an und was möchte ich bewirken. Und hierbei ist es nicht relevant, ob ich einen Blog, eine statische oder dynamische Webseite oder gar einen Webshop anbieten möchte. Die Frage nach dem „Wer solls lesen?“ ist die erste Frage, die sich jeder Webseitenanbieter stellen sollte. Leider ist auch diese Frage die Schwierigste … :-)

Letztendlich haben wir es mit Menschen zu tun, die unterschiedliche Kenntnisse über das Medium Internet verfügen. Und sie verfügen auch über unterschiedliche Technik. Davon abgesehen, gibt es einige Unternehmen, die an festgelegte Technik gebunden sind und denen daher eine technische Optimierung nicht möglich ist.

04.04.2009

Teil 2: Barrieren des Alltags

Für mich als Körperbehinderte sind Stufen, Treppen und stark unebene Flächen tägliche Barrieren. Diese lassen sich nicht durch schnelles Abschrägen der Gehsteigkanten, den Quickeinbau eines Liftes oder das Flachklopfen der Straße beheben. Ich habe gelernt, dafür andere „Hilfsmittel“ zu nutzen. Ich arbeite mit Persönlicher Assistenz, die mir hilft, diese Barrieren zu überwinden. Die Untergründe und die Umgebung sind immer unterschiedlich und wir, meine treue PA und ich, passen uns an diese Umgebung an. Mal fährt sie mich gekippt über eine Stufe oder sie fährt mit mir mal auf den Hinterrädern über Kopfsteinpflaster (in Wien gibt es bedauerlicherweise noch einige Stellen, die ich liebevoll „Blasenrüttler“ nenne). Wenn ich in Geschäften bin, so sehe ich nur das, was sich bis zu einer Höhe von 1,20 m befindet, alles was sich über dieser Höhe befindet, muss mir meine PA beschreiben oder mir das Objekt zeigen. Möchte ich in ein Gebäude, das Stufen hat, ist es immer tagesverfassungabhängig, ob ich da rein will oder es doch lieber lasse. Hat es keine oder nur eine Stufe, hievt mich meine PA rein.

Was will ich damit sagen? Je schwieriger und unüberwindbarer sich eine Situation darstellt, um so mehr bin ich auf die Unterstützung meiner PA angewiesen. Es ist mir durch PA möglich, als körperbehinderte (erfolgreiche, charmante, g’scheite) Frau unabhängig meiner Umwelt zu begegnen. Aber auch die Entscheidung, ob ich diese Barrieren überhaupt überwinden will – siehe Beispiel mit dem Gebäude mit den vielen Stufen – steht mir frei.

03.04.2009

Teil 1: Warum barrierefreie Seiten?

Diese Frage stellen sich nicht nur Kollegen, sondern meistens (leider) auch die Kunden. Es ist daher nicht einfach, alle Beteiligten von den Vorteilen einer barrierefreien Seite zu überzeugen – wobei – überzeugen sollte man niemand müssen.

Um barrierefreie Webseitengestaltung zu verstehen, muss man auch die Barrieren kennen. Um Barrieren zu kennen, muss man wissen, was Barrieren sind.

Ich habe dazu mal meinen Duden gefragt, was er zum Begriff „Barriere“ weiß und folgende Begriffserklärung ist rausgekommen:

„Bar|ri|e|re die; -, -n: etwas, was sich trennend, hindernd zwischen Dingen od. Personen befindet; Schranke, Schlagbaum, Hindernis“
Duden - Das Fremdwörterbuch, 9. Aufl. Mannheim 2007 [CD-ROM]

So, nun hätten wir den Begriff wunderbar erklärt – danke Duden.

Aber in unserer Zeit ist der Begriff zu einem Schlagwort für ein scheinbar unüberwindbares Hindernis geworden. Ich sehe es ein wenig anders. Warum? Weil ich selbst von vielen anderen Barrieren betroffen bin.

Einerseits, weil ich körperbehindert bin und andererseits, weil ich mich täglich mit den unterschiedlichsten Barrieren des Internets beschäftige – und das nicht nur aus beruflichen Gründen. Als Privatperson gehe ich ähnlich damit um, wie im Beruf: Ich versuche Barrieren zu beseitigen, indem ich unterschiedliche Hilfsmittel nutze, um mich unabhängig zu bewegen.

Nicht anderes passiert in der barrierefreien Webseitengestaltung. Ich nutze die vorhandene Technik und baue mir Hilfsmittel, um mögliche Barrieren zu beseitigen.

Auch im Internet spielt körperliche Einschränkung eine Rolle, das ist wichtig, denn dann fragt sich der Entwickler: Welche Eingabegeräte muss ich miteinbeziehen?

Aber auch die Frage nach den Ausgabegeräten wird immer interessanter. Klar können wir Webseiten auf dem Drucker ausdrucken, aber was man da an Druckkosten produziert, ist manchmal nicht mehr schön. Das kann man aber verhindern. Man kann eine gute druckbare Version der Webseite erstellen. Somit werden die Inhalte ohne durch die Decke brechende Druckkosten ausgedruckt.

Weiters werden Webseiten für PDAs oder Handy immer wichtiger. Wer hat nicht mal schnell die Wetterprognosen übers Handy abgerufen oder schnell mal die Mails gecheckt … tja, auch dafür kann man eine Webseite konzipieren, diese sehen aber am normalen Bildschirm anders aus als auf dem mobilen Gerät.

Ähnlich ists bei den kleinen Netbooks. Diese werden ja bei Vertragsabschlüssen bei diversen Telekommunikationsunternehmen (fast) schon nachgeschmissen und jeder möchte mal im Café um die Ecke schnell mal ins Internet. Praktisch und man sieht einfach urcool aus. gg

Doch das sind keine Barrieren im herkömmlichen Sinne, sondern nur Möglichkeiten, wie man das Medium Internet auf vielen verschiedenen Wegen nutzen kann - wenn man es auch den unterschiedlichen Möglichkeiten anpasst.

Aber nun wieder zu den Barrieren – wie Sie sehen, ich schweife gern ab, weil mir das Thema sehr wichtig ist und es mir auch wichtig ist, Ihnen meine und die Sicht vieler Anderer näher zu bringen – um Sie für das Thema zu sensibilisieren und schließlich auch zu begeistern.
Logo

User Status

Du bist nicht angemeldet.

Suche


Webseiten

Screenshot Die Querollantin

Artikel

Mai 2009
Liebe Leserinnen und Leser! Bevor der Mai zu Ende...
Alexandra-Bijou – 1. Jun, 14:50
Die Kontaktseite
In einem meiner letzten Beiträge habe ich versprochen,...
Alexandra-Bijou – 15. Mai, 15:18
>es gibt Berufe, die...
>es gibt Berufe, die gar keinen Gewerbeschein haben. Stimm!...
Dupor Software Services Wien - Drazen Dupor (Gast) - 30. Apr, 16:15
WKO-Daten
Sehr geehrter Herr Dupor! Um es sehr kurz zu beantworten:...
Alexandra-Bijou - 29. Apr, 17:22
wko.at nutzten
Oder kann man sich beim wko.at anmelden, es geht auch...
Drazen Dupor (Gast) - 29. Apr, 13:27
Das Impressum - mehr als nur Pflicht
In einem meiner letzten Beiträge erwähnte ich kurz...
Alexandra-Bijou – 26. Apr, 16:06

'09 Design Alexandra Steiner – Blog by Twoday