Usability und Accessibility - Behindertengerechte Seiten in der Praxis


Zwei der wichtigsten Begriffe in der Gestaltung von Webseiten, sind Usability (die Benutzbarkeit) und die Accessibility (die Zugänglichkeit). In diesem Special will ich verdeutlichen wie wichtig doch diese Dinge für einen guten, professionellen Webauftritt sind und wie inkonsequent sie von den meisten Seiten befolgt werden.

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 (http://www.yubb.de/artikel508.html) 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 (4997x gelesen)
Diese News stammt von der Seite http://www.yubb.de
Sie ist unter http://www.yubb.de/artikel512.html direkt aufrufbar.

Jegliche Reproduktion dieser Seite oder ihrer Inhalte ist strengstens untersagt.