Benutzerfreundlich ein Webdesign gestalten

von Fries Websolutions

Denken sie daran, ihre Texte Benutzerfreundlich zu gestalten. Denn jeder der im Internet surft, wird verstärkt darauf achten. Das Navigieren durch ihre Seite sollte Spaß machen, denn wenn ein Benutzer für jede Seite auf Zusatzhilfen angewiesen ist, verliert er schnell die Lust am surfen.

Beachten sie auch bei optischen Gestaltung Ihrer Website, das es auch Benutzer mit Sehbehinderungen gibt, und auch diese Benutzer sollten mit ihrer Seite klarkommen. Denn das Internet ist doch ein offenes System, und als solches,  für alle und jeden gedacht. Bedenken sie, das ein benutzerfreundliches Webdesign immer allen zugute kommt. Dem Webdesigner, also ihnen, und der potentielle Zielgruppe die sie ansprechen wollen. Bedenken sie, das auch Besucher, mit einem Handicap Zugriff auf ihre Seite ermöglichen wollen.

Bilder
Bilder werden häufig genutzt, um Webseiten grafisch schön aussehen zu lassen. Es gibt da die unterschiedlichsten  Einsatz Möglichkeiten, zB. zu Designzwecken oder auch als erläuternde Grafik. Es ist leider nicht möglich, den Inhalt eines Bildes mit eingeschränkter Sehkraft zu begreifen. Deshalb sollten sie bei dem Einsetzen von Bildern darauf achten, Alternativen an zu bieten, damit ein Bildinhalt dennoch erfasst werden kann. Wie bei der Kennzeichnung eines Bildes mit dem Alt-Attribut, was au jeden Fall dazu gehört. Hierbei  kann man eine kurze Erklärung oder Beschreibung zu dem Dargestellten Bild angeben. Als alternative dazu kann man unter Umständen auch eine ausführlichere Erklärung mit Hilfe des longdescr-Attributes zu geben.

<img src="preise.gif"
alt="Preisliste unseres Angebotes"
longdescr="descr_preise.htm">

Beschreibende Titel
Ob bei Links oder Abkürzungen: Wenn man sie verstehen will, braucht man Hintergrundwissen. Bei dem benutzen eines Sprachbrowsers wird zum Beispiel bei einem Link,  die verlinkte Adresse angesagt - wenn diese wenig aussagekräftig ist, sollte dem Benutzer der Inhalt angesagt werden. Bei den Akronymen oder Abkürzungen, die man meist nur versteht, wenn man das nötige Hintergrundwissen hat, ist es ähnlich. Benutzen sie möglichst bei allen Links, Akronymen und Abkürzungen das title-Attribut mit einer Beschreibung. Beispiel:

<a href="abc.htm" title="Erfahren Sie mehr ueber uns">
<abbr title="und so weiter">usw.</abbr>
<acronym title="United Nations Organisation">UNO</acronym>

Formulare
Sollten auch beeinträchtigte Besucher auch Ihre Formulare nutzen können, sollten Sie auch hier einige Vorkehrungen zum besseren Verständnis treffen. Denn das FIELDSET-Element grenzt das Forumlar vom restlichen Inhalt ihrer Seite optisch und inhaltlich ab. Auch das LEGEND-Element unterstützt das Verstehen ihres Formulars. Sie können auch mit LABEL den Zusammenhang zwischen Beschriftung und Formularfeld besser verdeutlichen. Beispiel:

<fieldset>
<form ...>
<legend>Kontaktformular</legend>
<label for="kname">Name</label>
<input id="kname" ...><br>

<label for="kaddr">Adresse</label>
<input id="kaddr" ...>
</form>
</fieldset>

Seitenstruktur
Oft ist es auch für einen Benutzer ohne Behinderungen,  nur schwierig möglich herauszufinden, auf welcher Unterseite der Homepage,  man sich gerade befindet, oder welche Seite den Inhalt fortführt. Aus diesem Grund sollten sie alternative LINKs verwenden. Damit können sie andere Quellen bezeichnen, die den Kontext beschreiben - oder einfach nur auf die Startseite der Website führen. Diese sind in den meisten Browsern zwar nicht sichtbar, können aber bei Sprachbrowsern durchaus gute Dienste leisten. Beispiel:

<link href="startseite.htm" rel="start">
<link href="inhaltsverz.htm" rel="contents">
<link href="seite45.htm" rel="next">

Schriftgröße
Eine 10-Pixel große Schriftart mag bei manchem Design zwar optisch sehr gut wirken,  ist aber selbst für normale Benutzer eher schwer lesbar. Um so schlechter ist es, wenn sich die Schriftgröße in einem Browser nicht anpassen lässt, weil sie fest definiert wurde. Genau aus diesem Grund sollten sie auf eine feste Schriftgröße zugunsten von relativen Schriftgrößen verzichten.
Beispiel:

<style>
H1 {font-size:x-large;}
P {font-size:small; }
</style>

Aurale Gestaltung
Wenn man den Text-Inhalt etwas spannender für Benutzer von Sprachbrowsern zu machen will, sollte man auf die Verwendung von auralen CSS-Eigenschaften zurückgreifen. Damit können sie wichtige Bereiche hervorheben oder für Abwechslung im Sprachfluss sorgen.
Beispiel:

<style>
.wichtig {stress:80;}
.weiblich {voice-family:female; }
</style>

Effekte
Effekte wie zB. JavaScripts, Flash oder Java sind sicherlich eine willkommene Unterhaltung, aber sie sind genau so schlecht zugänglich für Benutzer, deren Browser diese Effekte nicht unterstützen. Es sollten für alle Fälle Alternativen in Form eines Textes oder als Download-Möglichkeit der benötigten Software angeboten werden.
Beispiel:

<script src="animation.js"></script>
<noscript>Die Animation zeigt den Anstieg der Arbeitslosenzahlen.
Im Jahr 1998 waren es ...</noscript>


Kontraste
Bitte achten Sie auf Kontraste. Wenn sie ihre Seite Farblich abgestimmt haben, kann das zwar sehr gut aussehen, aber es könnte auch zu einem Problem werden, wenn sie damit die Sicht beeinträchtigen. Sie sollten daher möglichst kontrastreiche Farben verwenden, dies gilt ganz besonders für die Schrift und Navigation ihrer Seite.

Frames
Mit Frames kann man sich Seiten gut in Inhalt und Navigation unterteilen. Wobei sie darauf achten sollten, das nicht alle Browser Frames unterstützen. Die meisten Benutzer von Sprachbrowsern, wissen dann nicht, wohin sie nun eigentlich geraten sind. Sie sollten für solche Zwecke einen NOFRAMES-Bereich anbieten, der zB. die Informationen wie zB. ein Inhaltsverzeichnis der Seiten,  oder auch einen Link zu einer anderen speziellen (ohne Frames gestalteten) Version der Seite führt.
Beispiel:

<frameset ...> ... </frameset>
<noframes>
<p>Unsere Seiten wurden mit Frames gestaltet, die
Ihr Browser leider nicht unterstützt. Bitte besuchen
Sie die <a href="noframe.htm">ohne Frames</a>
gestaltete Version oder wählen Sie aus unserem
Inhaltsverzeichnis:</p>
...
</noframes>