yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Usability und Accessibility - Behindertengerechte Seiten in der Praxis



Die Usability bezeichnet die Bedienbarkeit und Benutzerfreundlichkeit von Produkten. Mit Accessibility ist im Web besonders die Rücksicht auf Leute mit Behinderungen, langsameren Internetverbindungen oder gar motorischen Problemen (meist ältere Menschen) gemeint.
Da die meisten Webmaster (Betreiber einer Seite) davon ausgehen das alle die selben Vorraussetzungen wie man selbst hat, wird die Seite auch darauf hin gestaltet. Ich möchte im Folgenden mit ein paar kleinen einfacheren Tipps dieses Problem minimieren. Damit kannst du auch Leuten die z.B. Screenreader benutzen, die Möglichkeit geben, eure Webseite ebenso wie nicht-behinderte Menschen nutzen zu können.

Was ist den an einer Bilder-Navigation so schlimm und was kann ich da falsch machen?
Eigentlich nicht allzu viel. Aber jemand, der sich z.B. eine Seite mit Programmen (Screenreadern) vorlesen lassen muss, kann sich allerdings nicht eure tollen, bunten Navigationspunkte genau anschauen oder sie gar genießen. Wie soll er aber wissen, was sich hinter den nicht nichtbaren Grafiken verbirgt? Deshalb solltet ihr ihm wenigstens die Möglichkeit geben, mit einem kleinen Text auf den Grafikinhalt aufmerksam zu machen. Das ist schnell abgewickelt und zwar mit dem sogenannten Alternative-Text. Wie das aussieht, möchte ich dir hier anhand eines Beispiel zeigen:

Code:
<a href="beispiellink.html"><img src="beispiel.jpg" alt="Das ist ein Beispiel-Bild-Link" width="200" height="32" border="0" /></a>


Zu beachten ist hierbei das alt-Tag. Übrigens, falls das Bild aus irgendeinen Grund nicht angezeigt werden kann, wird auch der Alternative-Text angezeigt. Also haben auch Leute mit gesunden Augen Vorteile aus dieser Methode.

Wie baue ich meine Seite zusammenhängend auf? Dass jeder direkt durchblickt. Oder soll ich gar Sitemaps und/oder Suchfunktionen verwenden?
Also Sitemaps sollte so ziemlich jede Seite haben, die Informationen anbieten möchte. Es ist einfach besser, als sich durch eine Menge Menü-Punkte durchzuklicken. Dies ist auch für Blinde (ja, auch die können auf eure Seite stoßen und das öfters als ihr denkt) nützlich, die dann zumeist über Sitemaps navigieren möchten.
Eine Suchfunktion macht nur dann Sinn, wenn man wirklich viele Informationen anbieten möchte zB. ein sehr großes Newsarchiv hat oder viele Tutorials.

Eine Seite zusammenhängend zu bauen ist da schon schwieriger in Worte zu fassen. Es gibt aber Dinge, die man unbedingt vermeiden sollten:

1.) Klare Seitenstruktur und diese auf allen Seiten gleich: Auf allen Seiten sollte das Layout und die Navigationspunkte gleich angeordnet werden. Wenn ein User sich auf jeder Seite neu in die Navigation einarbeiten muss, verliert er schnell die Lust auf eure Seite.
2.) Benutzt CSS: Schön ist es auch, seine Seite über CSS genau zu definieren bzw. sie zu positionieren. Weg von quellcodeaufblähenden Tabellen, hin zu CSS-Containern. Wie das geht, habe ich bereits ein Tutorial hier bei yubb.de verfasst und gehe deswegen nicht näher darauf ein.
3.) Neben einer guten Farbwahl sollte man auf jeden Fall auch auf gute Gliederung des Textes achten. Nicht nur, dass es einen professionelleren Eindruck verschafft: Es ist auch von Vorteil für die Leute, die eine Sehhilfe tragen oder eben für ältere Menschen deren Augen damit Probleme haben. Spielt ruhig ein wenig mit den Kontrasten herum.

Weiter möchte ich jetzt nicht drauf eingehen, da so ein Thema sicher auch dieses Special sprengen würde. Ab zum nächsten...

Beschreibende Titel
Bei Links, egal ob Text oder Bild, lohnt es sich bekanntermaßen, mit dem Alternativ-Text zu arbeiten. Arbeitet also möglichst oft damit. Ebenso verhält es sich bei Akronymen (AKRONYM; z.B. HTML, PHP, MySQL, WWW) oder Abkürzungen (ABBR; z.B. usw., gez.), die vielleicht den nicht fachkundigen User Probleme bereiten könnten. Arbeitet doch einfach mit dem Titel-Attribut:

Code:
<abbr title="bezihungsweise">bzw.</abbr>

Code:
<acronym title="Common Gate Interface">CGI</acronym>


Auf die Links bin ich ja schon bei Bild-Links genau drauf eingegangen. Auch hier lässt sich prima und einfach mit dem Titel-Attribut arbeiten:

Code:
<a href="beispiellink.html" title="linktext">Link</a>


Frames
Das Arbeiten mit Frames sollte man aus Gründen der Usability und Accessibility grundsätzlich vermeiden. Wenn du dich dann doch dazu entscheidest, biete wenigstens den Leuten mit Browsern ohne Frames-Support eine Lösung deiner Seite ohne Frames an.




Abschluss: Das Thema komplett zu beleuchten wäre wirklich zu viel des Guten. Ich hoffe, ich konnte euch ein paar Tipps und Hinweise geben. Ihr solltet das schon sehr ernst nehmen, auch wenn das eure anderen Webmaster-Kollegen oft nicht tun. Einer muss immer der erste sein oder zumindest einer der Ersten :)

Geschrieben von darealplaya am 26.11.2004 (7573x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Lass mich einige Dinge hinzufügen :)

Zu 2.) Wie eure Seite ausieht, wenn ein Behinderter auf eure Seite geht, könnt ihr gut nachvollziehen, wenn ihr im Opera den Usermode aktiviert und lediglich den B/W-Kontrast aktiviert sowie alle Bilder deaktiviert.
Ist die Seite dann noch benutzbar? Steht alles untereinander? Haben alle nötigen Elemente die entsprechenden Titel-Attribute? Wenn ja, dann ist deine Seite schon ganz zugangsfreundlich.
Im Firefox ist dies mit der Web-Developer-Toolbar zu erreichen unter "Disable Styles".

Zu 3.) Kontraste sind immer gut. Am besten ist der Schwarz auf Weiß-Kontrast. Schwarze Schrift auf weißem Untergrund. Aber natürlich sind immer Farbvarianten erlaubt. Am besten immer dunkle Schrift auf hellem Untergrund. Anders herum geht schon die Lesbarkeit flöten. Auch sollte man an Teilblinde denken, die z.B. eine Rot-Grün-Blindheit haben, denken.

Generell sollte man immer mit Titeln arbeiten, egal, was man benutzt. Ob Bilder, Links, Abkürzungen, das title-Attribut lässt sich überall einsetzen. Nutzt es aus.

Eine der wichtigsten Voraussetzungen für eine zugängliche Seite ist Validität. Eine Seite, die nur im IE ansehnlich ist, ist nicht zugänglich. Aber da sich CSS und IE gegenseitig ausschließen, kann man das beiseite lassen ;-)

Einige Links noch:
Der Accessibility-Validator
Farbschwächen-Simulator

Hier einige Seiten, die im Sachen Behindertengerechtigkeit sehr weit sind:
http://www.biene-award.de
http://www.stephanusschule.de.vu/
http://www.hebammenpraxis-radolfzell.de/
http://www.heynck-lebensart.de/
http://www.kh-security.de/shop/index.php
https://banking-neu.postbank.de/iob3/welcome.do

Wie man sieht, ist Behindertengerechtigkeit mehr als nur eine Textversion und eine behindertengerechte Seite braucht man nicht als solche ansehen können.
Geschrieben von Phil Marx
ich wusste net mehr den Link zu dem Accessibility-Validator. Auch für deine Ergänzungen, danke Phil :)
Geschrieben von darealplaya
Das Special lesen echt zu wenig Leute ;( dabei hab ich mir soooo Mühe gegeben :))
Geschrieben von darealplaya
Google wird sein Ding schon tun. Habe die Überschrift mal n bissl erweitert :)
Geschrieben von Phil Marx