Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Barrierefreiheit im Web – Wie und Moment mal, wozu?



Ranking: +8   Kommentare: 15   |   Bewertung: Keine Berechtigung!  

Vorwort


Hallo liebe Designnation-User. Lange Zeit war es um mich sehr still, aber derzeit befasse ich mich mit einem Thema, welches ich als sehr wichtig empfinde. Da ich es so wichtig finde, schreibe ich zeitgleich ein Tutorial zu dem Thema, um es euch näher zu bringen. Ich werde in diesem „Tutorial“ das Thema „Barrierefreiheit in Webseiten“ genauer besprechen. Ich werde sagen, wozu Barrierefreiheit dient, wie man sie umsetzt und was man selber davon hat.

Schritt 1


Kapitel 1 – Was ist/heißt Barrierefreiheit?
_______________________________________________


Erst einmal das Zitat aus dem BGG (Behindertengleichstellungsgesetz)
Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.

Das klingt ja ganz toll, aber was heißt das nun eigentlich für das Web genau?
Für das Web bedeutet Barrierefreiheit, dass man alle Informationen, welche man auf seiner Webseite veröffentlicht, für alle Personengruppen zugänglich macht. Ganz gleich welche Art einer Behinderung eine Person ausgesetzt ist, es darf nicht vorkommen, dass diese Person nicht an die Informationen gelangen kann, welche Ihr auf euren Webseiten anbietet.

Es gibt viele Arten von Behinderungen, es gibt Sehschwächen, bis hin zur Blindheit, dann gibt es Taubstumme Leute, aber auch „leichte“ Behinderungen, wie zum Beispiel die Rot-Grün-Farbschwäche sind vorhanden.

Je nachdem, was für eine Art von Webseite man erstellt, muss man auf alle Rücksicht nehmen. Prinzipiell ist es so, dass man auf Personen mit einer Sehschwäche, bzw. Blindheit immer Rücksicht nehmen muss. HTML ist eine Auszeichnungssprache und die Inhalte sollen logisch gegliedert werden. Das erste, womit man sich also auseinander setzen muss, ist die Norm-konforme Nutzung von HTML.
Benutzt man „sauberes“ HTML, so können sich blinde Personen schon wesentlich besser auf euren Seiten zurecht finden, als würdet Ihr zum Beispiel eure Seiten mit Tabellen strukturieren.

Im folgenden Kapitel werde ich etwas mehr auf die verschiedenen Arten von Behinderungen eingehen.

Schritt 2


Kapitel 2 – Welche Arten der Behinderung gibt es?
_________________________________________________


Die Fragestellung dieses Kapitels ist sehr wage formuliert. Natürlich kann und werde ich nicht alle möglichen Arten von Behinderungen aufzählen. Was ich aber machen werde ist die für uns relevantesten Arten von Behinderungen benennen.

1) Sehschwächen
Unter diesen Punkt fällt sehr viel. Es fängt an bei Personen, welche lediglich Brille oder Kontaktlinsen tragen und geht mit etlichen Zwischenstufen bis hin zur Blindheit.
Für diese Personen ist es wichtig, dass die Texte gut durchdacht strukturiert sind. Abkürzungen oder Synonyme müssen ausgezeichnet sein. Verlinkungen und Bilder müssen Alternativ-Texte enthalten. Sehr lobenswert ist es natürlich, wenn man seine Textinhalte auch in einer Audio, oder Audiovisueller Form anbietet.
Was man noch alles machen kann, vor allem für Leute mit leichten Sehschwächen, dazu komme ich in einem späteren Kapitel.

2) Farbschwächen
Die bekannteste aller Farbschwächen ist die Rot-Grün-Farbschwäche. Personen, die von dieser Schwäche betroffen sind, können Rot und Grün nicht von Geld und Blau unterscheiden. Es gibt auch noch weitere Schwächen, wie zum Beispiel Grün-Blindheit, Blau-Blindheit und komplette Farb-Blindheit, auf welche man Rücksicht nehmen sollte!
Vor allem bei der Gestaltung der Webseite und bei allen Medien, welche man Online stellt, sollte man immer das Vorhandensein dieser Sehschwächen berücksichtigen.

3) Taubstumme
Personen, die weder Hören, noch Sprechen können, sind in vielerlei Hinsicht auch im Web benachteiligt. Nehmen wir das größte Vorkommen von visuellen Medien derzeit: youTube.
Gemeint ist dabei nicht einmal die Seite selber, sondern vielmehr die vielen, vielen Videos, welche die Nutzer im Sinne des Web 2.0 hochladen und anschaubar machen. Dass die meisten dieser Leute, viele Personengruppen ausschließen, ist ihnen gar nicht bewusst. So habe ich vor Kurzem einen Bericht über Taubstumme gefunden, aber nicht einen einzigen Verweis oder sonstiges, auf selbiges Video mit Untertiteln.
Ist eine taubstumme Person also an dieser Reportage interessiert, bietet sich dieser jedoch keine Möglichkeit, an die Informationen dieser Sendung zu gelangen. Wenn man also auf seiner Webseite eigene Videos bereitstellen möchte, sollte man sich überlegen, ob man sich nicht die Zeit nimmt, das Video zusätzlich mit Untertiteln zur Verfügung zu stellen. Medien mit Untertiteln sollten immer in den Sprachen verfügbar sein, welche man auf der Seite benutzt.

4) Bewegungseinschränkungen
Es gibt Personen, welche die Glieder nicht so problemlos bewegen können wie manch andere. So ist es für manche Personen sehr schwierig die Maus frei zu bewegen. Ist der Arm eher „starr“, so bietet sich die Tastaturnavigation eher an, als eine Mausnavigation. Viele Webseiten sind jedoch so ausgelegt, dass man die Seiten primär mit der Maus steuern muss.
Die Links der Seitennavigation lassen sich nicht wirklich gut „an-tabben“ und auch sonst sind so viele unnötige Elemente auf der Seite vorhanden, dass jegliche Tabulator-versuche dem Scheitern verurteilt sind.
Hier hilft wiederum ein logisch gegliederter Aufbau der Webseite und eventuell die Verwendung von „Accesskeys“ und „Tabulator-index“.

5) Sonstige
Es gibt viele weitere, aber eine möchte ich noch benennen. Es gibt Personen, welche von Epilepsie betroffen sind. Hat man nun auf seiner Webseite viele blickende Effekte, so kann es vorkommen, dass die Person einen Herzanfall bekommt.

In den folgenden Kapiteln werde ich das angehen an verschiedene Behinderungen genauer angehen.


Schritt 3


Kapitel 3 – Nicht-Sehbehinderte Behinderungen angehen
________________________________________________


Was eine tolle Überschrift :?
Gemeint ist die Tatsache, wie man alle Behinderungen angeht, welche sich nicht auf Sehschwächen beziehen.
Generell gilt erst einmal die Überlegung: „Wen will ich mit meinen angebotenen Informationen alles erreichen?“ und „Können meine angebotenen Informationen auch für XY-Behinderte Personen interessant sein?“

Ich kann euch diese Fragen beantworten :)
1) alle
2) ja

Man kann jedoch nicht immer auf alle Personengruppen Rücksicht nehmen. Man muss ein gesundes Maß zwischen Aufwand und Nutzen finden. Es macht zum Beispiel weniger Sinn, eine Seite für einen Musik-CD-Shot für Taubstumme Personen zu optimieren.
Sicherlich ist es ein Plus, wenn man es macht, jedoch ist der Aufwand für den möglichen Nutzen so ungemein groß, dass es nicht wirklich nötig ist, die Seite so zu optimieren.

Für das Beispiel Epilepsie:
Es ist natürlich immer sinnvoll, überflüssige Effekte auszulassen. Erstens ist es ein Gesetz, dass zu viele Effekte alle Benutzer stören und zweitens kA – irgendwas wollt ich noch schreiben...
Es gilt wiederum abzuwägen, in wie weit die angebotenen Informationen für Epilepsie-geschädigte interessant sein können. Generell muss man Rücksicht drauf nehmen, wenn man jedoch zum Beispiel eine Tutorialseite für Flash-Animationen erstellt, ist es nur logisch, dass man Beispiele mit blitzenden Effekten oder sonstigen buntern Animationen macht.
Es ist weder für euch, noch für den Epilepsie-geschädigten sinnvoll, wenn Ihr in diesem Fall komplett auf „gefährdende“ Effekte verzichtet.

Im nächsten Kapitel werde ich auf viele Aspekte von Sehschwächen eingehen...


Schritt 4


Kapitel 4 – Probleme mit Sehschwächen vermeiden
__________________________________________________


Um Sehbehinderten Menschen entgegen zu kommen muss man sich zunächst darüber informieren, wie sich die Sehschwächen genau auswirken. Im letzten Kapitel dieses Tutorials sind viele informative Links beigefügt, über welche Ihr Informationen dazu findet. Hier in diesem Kapitel werde ich nur auf die Umgehungen der Schwächen und die Methodik der Behebung eingehen. (irgendwie schon wieder so ein komischer Satz....)

1) Die Wahl der Schriftart
Das erste Problem ist die Wahl der Schriftart für die eigene Webseite. Viele Schriftarten haben standardmäßig so kleine Zeilen- und Zwischenraumabstände, so dass sehbehinderte Personen die Buchstaben schlecht bis gar nicht erkennen können.
Die Schriftart „Arial“ als Beispiel ist eher schlecht geeignet. „Lucida Sans Unicode“ und „Verdana“ hingegen sind beides sehr gute Schriftarten, wo es bei einer Benutzung meist zu keinen Schwierigkeiten kommt. Ausnahmen bestätigen natürlich immer die Regel, aber diese beiden Schriften sind eine sehr gute Wahl.

2) Serifen, nicht-Serifen, das ist hier die Frage
Serifenschriften sind toll zu lesen, sehen schön aus und sind verträglich für das Auge. Dieses mag für Personen stimmen, welche von keiner Sehschwäche betroffen sind, jedoch haben Personen mit einer Sehschwäche große Probleme bei dem Erkennen der Schriften.
Vor allem wenn man die Medien auf Papier überträgt, kopiert, faxt etc. verlieren Serifenschriften deutlich an Lesbarkeit.
Demzufolge sollte man immer serifenfreie Schrifttypen verwenden!

3) Schriftgrößen, Überschriften, Unter-Überschriften, etc
Allerspätestens hier will euch euer jeweiliger Designer den gar aus machen. Er erstellt euch ein tolles Design und ihr haut da Klötze von Buchstaben rein, deren reine Füllmasse die tolle Farbgestaltung des Designers überdeckt...
So ganz stimmt das natürlich nicht. Je nach Schriftgrad wirken die Buchstaben größer oder kleiner. Generell kann man jedoch sagen, dass ein Schriftgrad von 12pt für Fließtexte gut geeignet ist. Überschriften sollten immer +4pt betragen. Bei 12pt Schriftgrad also 16pt. Unter-Überschriften kann man bei den meisten Schriftarten immer +2pt machen.
Generell sollte man vor allem darauf achten, dass sich Überschriften deutlich von Fließtext abgrenzen lassen. Die HTML-Elemente <h1> bis <h6> bieten da schon gute Standardformatierungen, an welche man sich richten kann!

4) Schriftformatierungen und Schriftarten²
Es ist nicht nur wichtig, dass man die richtigen Schriftarten wählt, sondern auch, dass die Schriftarten der Webseite einheitlich sind. Als Regel gilt, dass man maximal 2 Schriftarten verwendet. Mehr kann man machen, man sollte dann jedoch immer selber abwägen, in wie weit es störend ist!
Weiterhin sollte man beachten, dass man eine Groß- und Kleinschreibung benutzt und nicht in GROßBUCHSTABEN schreibt.
Alle Texte sollten linksbündig gehalten werden. Blocktext sollte vermieden werden, da die unterschiedlichen Wortabstände bei Screenreadern zu Problemen führen können!
Des Weiteren sollte man einen 1.5-fachen Zeilenabstand benutzen, da dieser für das Auge am angenehmsten zu lesen ist.

5) Das Umgehen mit Bildern
Will man Bilder in seine Seiten einbinden, oder in Texten darstellen, so sind Bildunterschriften und Alternativtexte sehr wichtig!
Wenn man zum Beispiel eine Poesie-Seite erstellt, so ist es schick, wenn die ersten Buchstaben von Kapiteln super-toll aussehen und mit Bildern dargestellt werden.
Generell spricht wenig dagegen, wenn man auf Alternativtexte acht gibt.
Alt=“Buchstabe S“ ist in dem Fall nicht wirklich empfehlenswert. Ein einfaches alt=“S“ ist wesentlich besser.
Benutzt man für Listenpunkte Bilder, so sollte man diese mit CSS einfügen und nicht alla
<img ... alt=“Listenpunktebild“/>
Macht man es dennoch so, ist folgender Alternativtext sinnvoller:
<img ... alt=“*“ />
Screenreader werden dieses sofort als Listenpunkt erkennen!

Beispiele für Bildunterschriften findet Ihr im letzten Kapitel dieses Tutorials. Sinnvollerweise werden für Bildunterschriften Definitionslisten verwendet.


Schritt 5


Kapitel 5 – Allgemeines Umgehen mit Barrierefreiheit
___________________________________________________


Man kann sehr viel an Barrierefreien Elementen in seine Webseiten einbauen, jedoch macht nicht alles unbedingt Sinn. Nach Möglichkeiten sollte man so viel in seine Webseiten einbauen, wie man bereit ist Kompromisse einzugehen. Nicht immer lassen sich Lösungen problemlos in ein Konzept einbauen.
Wichtig ist viel mehr, dass man sich der Problematik der Barrierefreiheit bewusst ist und nach und nach das Thema in sein Unterbewusstsein einpflanzt.
Viele Problemstellungen lassen sich dadurch bereits bei der Konzeptionierung des Projektes beheben. Wenn ein Auftraggeber kommt und Interesse an euch wecken sollte, dann könnt Ihr ihn auf Problemstellungen aufmerksam machen und zeigen, dass Ihr von Qualität seid und der Auftraggeber wird weiteres Interesse an euch wecken.
Natürlich muss die Qualität am Ende stimmen, aber wenn man sich ausgiebig mit dem Thema befasst bin ich mir sicher, dass die Qualität eurer Webseiten steigen wird!


Schritt 6


Kapitel 6 – Checkliste zur Barrierefreiheit
___________________________________________


Checkliste für Texte
  • Alternativtexte für Bilder

  • Alternativtexte für Links

  • Bildunterschriften

  • Eine „gute“ Schriftart wählen

  • Schriftgrößen anpassen

  • Textpassagen nicht unterstreichen oder kursiv stellen

  • Zum betonen Texte dick machen

  • 1.5-fachen Zeilenabstand benutzen

  • Keine Serifenschriften benutzen

  • Nur linksbündig schreiben



Mediencheckliste
  • Audiomedien für große Texte anbieten

  • Untertitel für Videos anbieten

  • Webseite über Tastatur steuerbar machen



Weitere Checkpoints
  • Möglichst kurze Sätze schreiben

  • Eine „einfache Sprache“ benutzen

  • Auf Farbgebung der Seite und Texte achten

  • Keine unnötigen Effekte einbauen




Schritt 7


Kapitel 7 – Weiterführende Links
__________________________________________


In diesem Kapitel werde ich euch noch ein paar Links geben, über welche Ihr euch weiter zu dem Themenbereich informieren könnt.




Schritt 8


Nachwort
____________________________________


Für mich ist Barrierefreiheit ein wirklich wichtiges Thema. Jedoch muss man oftmals Kompromisse eingehen, was jedoch nicht wirklich schlimm ist. Viel wichtiger ist es, dass die Webautoren sich mit dem Thema befassen und dass Gras gesät wird.
Mit diesem Tutorial pflanze ich ein Korn und hoffe, dass irgendwann eine ganze Wiese entsteht ;)
Nehmt Euch einige Dinge aus diesem Tutorial zu Herzen, überlegt Euch, was von den genannten Dingen Ihr einbauen und benutzen könnt. Nehmt Rücksicht auf jene, welche Eure Hilfe gebrauchen können!
Ihr tut nicht nur den andere eine Freude, sondern profitiert selber davon!

Mit freundlichen Grüßen
Manuel <sam> Stosic



Veröffentlicht von: sam
Veröffentlicht am: 22 Mar. 2007
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter:

Kommentar(e) (15)


Kurz-Weber sagt:

Ein klasse Tutorial!
Vielen Dank für die guten Denkanstöße.

Ich werde demnächst, wenn eine Update (auf meiner Seite) kommt, einiges -umstrukturieren, damit es Barrierenfreier wird :D

Danke :D

4 Oct. 2009 18:43:17 • Antworten


neophyte2008 sagt:

Schönes tut nur halte ich von Barrierefreiheit nichts da es zu unständlich ist. Da müsste man ja dann für die Benutzerfreudlichkeit seine Website in allen Sprachen der Welt erstellen damit JEDER den Inhalt lesen kann

Codex der Barrierefreiheit ist ok aber wird niemals so weit durchdringen das es jede Website macht wozu auch? wenn von 1.000.000 Menschen nur 1 Mensch ist der vllt Blind ist und die Videos bei Youtube nicht sehen kann ^^ was soll man dort denn noch machen...

22 Apr. 2008 17:24:32 • Antworten


deleted_1356256480 sagt:

tut ist schön, allerdings vermisse ich eine kleinigkeit ich kann es nicht finden verbesser mich falls ich falsch liege:
es MUSS VALIDE sein ^^

16 Jan. 2008 18:02:19 • Antworten


sam sagt:

Natürlich akzeptiere ich diese Kritik ;)
Werde jedoch versuchen ein paar Punkte zu widerlegen ^^

1) Texte dick drucken
Sicherlich werden Typographen mir widersprechen. Dicke Texte sind zumeist unschön - für uns - jedoch bezüglich der Barrierefreiheit Top! Man muss natürlich darauf achten, dass man einen Font fählt, welcher bei Schriftgrad X und Typo "Bold" noch gut lesbar ist.
Dicke Schriften, wo zum Beispiel das kleine "a" nur noch ein großer Klotz ist, sollen natürlich vermieden werden.

2) Kursiv schreiben
Betonungen kursiv schreiben ist natürlich auch eine Option. Versetze dich jedoch bitte mal in die Lage von Personen, welche nur unscharf lesen können. Sind Schriften zudem noch kursiv gedruckt, wirkt das ganze für jene Personen noch unschärfer, bis hin zu einem Grad, wo man nichts mehr erkennen kann.

3) Serifenschriften
Hier musst du deutlich unterscheiden. Du hast recht, widersprichst dir aber quasi selbst ;)
".... eines (gedruckten) Textes ..." Das (gedruckten" ist hierbei von enormer Bedeutung. Serifen lassen sich auf dem Papier wunderbar lesen. Es ist echt Top! Auf dem Monitor jedoch, bei flackerndem Bild (auch wenn man es nicht so direkt sieht), lassen sich Serifen schlechter lesen als nicht-serifen!

Hinweis:
Wir gehen hier von dem reinen Standpunkt der Barrierefreiheit aus! Nicht Style, sondern Barrieren!

4) Flash und No-Go
Zu dem Zeitpunkt, wo ich dieses Tutorial geschrieben habe, war Flash in der Anfangsphase, sich mit Barrierefreiheit zu befassen. Mittlerweile gibt es sehr viele - sehr starke Tools, um Flashanwendungen so Barrierearm wie möglich zu gestalten. Jedoch gibt es eine - nie auszumerzende - Grenze bei Flash:
Flash muss mit aktiviertem JavaScript installiert sein!

4 Sep. 2007 08:10:50 • Antworten


deLiTe sagt:

Sorry , aber da bin ich besseres von dir gewohnt, Sam. tils verallgemeinerst du mir zu sehr, was vielleicht deine eigene Meinung darstellt, aber z.B "Zum betonen Texte dick machen" widerspricht dem was viele dir viele Typographen sagen werden, denn ein dicker Text stört das Aussehen eines Textes. Dafür gibt es kursiv.

Serifen verschlechtern die Lesbarkeit ... höö??? Schau mal gleich der 2. Satz in der Wikipedia: "Es wird allgemein angenommen, dass Serifen die Leserlichkeit eines (gedruckten) Textes verbessern, daher werden längere Texte üblicherweise in einer Serifenschrift gedruckt"
Dann auch noch "Möglichst kurze Sätze schreiben, Eine „einfache Sprache“ benutzen" Viele sind ja zu gar nichts anderem fähig *spaß* Im ernst, da hört Barrierefreiheit auf. Vielleicht meinst du damit eine "kurze, prägnante" Sprache, wie zb. klare, verständliche und Suchmaschinenfreundliche Überschriften, das stimmt natürlich aber an sich ist der Inhalt des Textes Sache des Autors - meiner Meinung nach. In Wiki steht jedoch auch "Jeder Sprachwechsel muss kenntlich gemacht werden. Ist die Webseite zum Beispiel in deutscher Sprache gehalten, müssen englischsprachige Wörter wie "Team" explizit ausgezeichnet werden, etwa durch ein -Tag ("Willkommen im Team")." Man kann's auch übertreiben...

Was mir noch fehlt ist der Verweis darauf, dass Flash bei dem Thema ein No-Go ist.
Es muss übrigens "Der Umgang mit Bildern" heißen, ich dachte zuerst du willst beschreiben wie man Bilder vermeidet, darum etwas missverständlich ;)

So ich hoffe die akzeptierst diese Kritik. Ich möchte dennoch betonen, dass es ein wichtiges Thema ist und gerade in solch einer Community wie dieser ist es toll, dass jemand das Thema aufgreift und - zwar nicht perfekt - darüber schreibt. Genau das schreibst du ja auch in deinem Nachwort.

7 Aug. 2007 16:49:03 • Antworten


dadaumen sagt:

Schönes Tutorial. Hab ich selbst eigentlich nie so drauf geachtet bzw. beachtet.

27 Mar. 2007 17:04:06 • Antworten


sam sagt:

Das hab ich aber irgendwo recht weit oben angesprochen.
Jeder, der das Tutorial wirklich liest, dem wird klar sein, dass man Barrierefreiheit nicht mit einem Tabellengegurke erreichen kann!

25 Mar. 2007 23:54:23 • Antworten


deleted_1400673177 sagt:

Schönes Tut, wie immer. :D
Endlich spricht mir mal einer aus der Seele...
Bin zwar jetzt nur mal kurz über das Tutorial drüber geflogen, aber konnte leider nicht den Hinweis erkennen, dass auszuliefernde Dokument, bzw. die Website "logisch auszuzeichnen", weil damit Screenreader und wie sie nicht alle heißen, deutlich besser umgehen können.
Obligatorisch dürfte in diesem Zusammenhang der Hinweis für ein "tabellenloses Layout" sein...

25 Mar. 2007 23:32:32 • Antworten


miss_match sagt:

ich habe mir noch nie Gedanken hierzu gemacht *ignorantes Etwas* :(

... aber gut, dass es Leute gibt, die sowas für mich IGNORANTE niederschreiben. Danke & super Tut :ja:

VLG miss_match

24 Mar. 2007 14:15:33 • Antworten


gike sagt:

*unterstütz* Wie immer ein klasse Tutorial :D

24 Mar. 2007 12:06:02 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder