Barrierefreiheit im Internet

Um diesen Bereich zu verstehen, sollte man erst einmal wissen, welche Barrieren, also Hindernisse, es im Internet für die User geben kann. Grundsätzlich kann man es in 2 Kategorien unterteilen, es gibt Hindernisse durch körperliche Einschränkungen (z.B. Sehbehinderung) und solche durch technische Einschränkungen (z.B. verschiedene Browser, verschiedene Endgeräte wie Smartphone, Tablet usw.).
Webmaster vergessen leider immer wieder, daß nicht jeder die gleichen Einstellungen hat oder daß manche vielleicht einfach schlechtere Augen haben.

Der Begriff »barrierefrei« ist in der Praxis allerdings nicht ganz korrekt, da eine Webseite allenfalls »barrierearm« ist, also mit möglichst wenig Hindernissen.
Verantwortungsbewußte Webmaster werden jedoch versuchen, die Page möglichst barrierearm zu gestalten.

In der Praxis ist es aber so, daß der Webmaster manchmal gezwungen ist, gewisse Kompromisse einzugehen, was ihm wichtiger ist, ein Stück mehr Barrierefreiheit und dafür einen Verlust im Design oder das Design und dafür auf etwas Barrierefreiheit verzichten und damit den Einen oder Anderen User auszusperren.
Für was man sich dabei dann entscheidet, muß jeder mit sich selbst ausmachen. Es gibt aber einige Punkte, die grundsätzlich bereits beim Erstellen der Homepage beachtet werden sollten und wo man ohne größeren Designverlust die Homepage barrierearm gestalten kann.

» Responsive Webdesign:

Unter einer responsiven Gestaltung einer Internetseite versteht man, dass das Layout der Seite für das Ausgabemedium angepasst wird.
Zuerst solltest du dir angewöhnen, auf jeder Seite den sog. Viewport einstellen.
Dies erreichst du durch den Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Damit kannst du verhindern, dass die Webseite in einer sehr kleinen Ansicht dargestellt wird, sie passt sich praktisch der Größe des jeweiligen Ausgabemediums an.

Früher wurden Schriften generell in Pixel angegeben. Davon rate ich dringend ab, das ist eher nicht mehr zeitgemäß, da sich hier zum einen die Schrift nicht vergrößern läßt, zum anderen die Schrift sich dem Bildschirm nicht anpaßt. Das Selbe gilt für Div-Container, Tabellen usw. Es eignen sich am Besten Angaben in »em« oder in »%«, dann passt sich das Design dem jeweiligen Bildschirm an. Zeilenabstände sollten ebenfalls immer angegeben werden und zwar ebenfalls in »em« oder »%«.

Du solltest aber auf keinen Fall nur die Schrift in em angeben und alles andere in Pixel, da du dadurch ziemliche Probleme mit dem Design haben könntest, da sich nur die Schrift vergrößert, der Rest aber bleibt.

Ich rate jedem Webmaster an, sich etwas mit diesem Thema zu beschäftigen und empfehle den Artikel von SelfHtml durchzulesen.

» Zeichencodierung:

Im Computerbereich gibt es verschiedene Zeichensätze und Zeichencodierungen. Ist die Zeichencodierung nicht richtig angegeben, leidet nicht nur die Lesbarkeit des Textes, es kann auch bedeuten, dass die Inhalte von Suchmaschinen nicht gefunden oder anderweitig nicht richtig weiterverarbeitet werden können.
Am häufigsten merkt man es, wenn Umlaute nicht richtig dargestellt werden.
Deshalb sollte der Zeichencode immer bereits im Head-Bereich bekannt gegeben werden.
Der Tag dazu lautet:

<meta charset="utf-8">

Nach Möglichkeit solltest du immer utf-8 verwenden, da hier die meisten Zeichen dargestellt werden. Du mußt aber auch darauf achten, dass auch der Editor, mit dem du die Seite erstellst, diese Zeichencodierung verwendet, sonst bringt der Meta Tag nichts.
Sehr gut eignet sich dafür Notepad++ oder PSPad Editor.. Beide gibt es als Portable Version und als Freeware.

» Bilder:

Grundsätzlich sollte bei allen Bildern ein aussagekräftiger Alt Text geschrieben werden, denn auch Blinde können im Internet mit sog. Screenreadern surfen und dieser Text wird dabei von diesen Screenreadern gelesen. Es wird aber wenig bringen, wenn du nur »1.jpg, 2.jpg« usw hinschreibst, der Text sollte eher in die Richtung »Sommerurlaub Tunesien« usw lauten.

Sind es aber Bilder, die rein fürs Layout sind, solltest du einfach einen leeren Alt Tag eingeben, da dann der Screenreader diese Bilder überspringt.

» Ausdruck:

Vielleicht ist dir schon mal aufgefallen, daß man manche Seiten einfach nicht ordentlich drucken kann, da ist alles irgendwie verschoben, das Menü ist da, obwohl man das gar nicht brauchen würde usw. Kurzum, die Seite ist einfach unbrauchbar zum ausdrucken. Es ist jedoch recht einfach, eine Seite auch für den Druck zu optimieren.

Am einfachsten ist, wenn du eine CSS Datei extra für den Druck machst. Diese CSS Datei ist recht schnell gemacht, da es recht einfach ist, eine Seite für den Druck zu optimieren. Wobei dann wichtig ist, dass du dann dem dem Browser angibst, welche Datei für den Druck, welche für den Bildschirm ist.
Das würde dann so aussehen:

<link rel="stylesheet" media="print" href="styles/print.css" type="text/css">
<link rel="stylesheet" media="screen" href="styles/style.css" type="text/css">

Oft reicht es schon aus, wenn man einfach nur gewisse Teile (Menü, Header usw,) die für den druch unwichtig sind, mit display: block ausblendest.

Dies kannst du gerne mal auf dieser Page testen, indem du einfach auf Druckvorschau klickst und siehst, wie die Page im gedruckten Zustand aussieht.

» JavaScript:

Grundsätzlich spricht nichts dagegen, JavaScript zu verwenden. Allerdings solltest du dabei beachten, daß es User gibt, die JavaScript aus Sicherheitsgründen deaktiviert haben und auch einige ältere Browser gibt, bei denen JavaScript nicht geht.
Aus diesem Grunde solltest du, bei für die Funktionalität der Homepage wichtigen Dingen, nach einer Alternative suchen. Das wäre z.B. wenn du ein JavaScript Menü hast. Besucher, die JavaScript deaktiviert haben, könnten dann natürlich gar nicht durch die Homepage navigieren, sie wäre also für jene wertlos.
Hier würde sich anbieten, wenn du eine Ersatznavigation einbaust, dann wäre das Problem beseitigt.

» Flash:

Bei Flash gilt in etwa das Selbe wie bei JavaScript. Hast du ein Flashmenü, solltest du zusätzlich eine Ersatznavigation erstellen. Ist deine ganze Page in Flash, solltest du eine Alternative anbieten.

» HTML Code:

Einen wichtigen Bereich, um seine Seite möglichst barrierearm zu erstellen, bildet auch der HTML Code. HTML hat bestimmte Gliederungsebenen wie Überschriften, Listen usw. Wenn man nun eine Webseite codet, sollte man auf diese Elemente zurückgreifen.

Ein Fehler, den viele Webmaster machen, ist, das sie z.B. einen normalen Text einfach stark vergrößern, so, daß er als Überschrift wahrgenommen wird. Man sollte jedoch immer das passende HTML Tag verwenden (H1, H2,...), da nur dann Screenreader, dies auch als Überschrift erkennen. Das Selbe gilt bei Listen und anderen Elementen. Wir, als Menschen ohne Behinderung, nehmen zwar einen dementsprechend formatierten Text als Überschrift wahr, ein Screanreader dagegen kann mit diesen Formatierungen wenig anfangen, für diese Programme zählt nur, in welchen Tags ein Text ist.
Ein weiterer Vorteil, wenn man sein HTML Dokument so aufbaut, ist auch die Suchmaschinenoptimierung, da Webcrowler nach dem selben Schema vorgehen.

Auf sog. Tabellenlayouts sollte man nach Möglichkeit verzichten, da bei zu verschachtelten Tabellen sich Programme wie eben diese Screanreader sich nicht mehr zurechtfinden, dies kann dann soweit gehen, daß eine Seite für diese Programme unbrauchbar wird. Der bessere Lösungsansatz wäre hier, ein Layout per CSS zu erstellen.