0251 / 590 837 15

Benutzerfreundliches Webdesign

Haben Sie schonmal versucht ohne Ihre Augen durch das Internet zu navigieren? Mit wird das vielleicht leicht fallen, aber einige Benutzer können es leider nicht anders. Eine Reihe von Tipps, was Sie tun können um Ihre Webseiten auch Nutzern mit Behinderungen (besser) zugänglich zu machen, erfahren Sie hier.

Bilder

Bilder sind eine häufig genutzte Möglichkeit um Webseiten grafisch etwas aufzupeppen. Aber ob als Design oder erläuternde Grafik ist es dennoch oft nicht möglich den Inhalt des Bildes ohne das Augenlicht zu begreifen. Deshalb sollten Sie bei Bildern (IMG) unbedingt darauf achten weitere Möglichkeiten zu bieten um den Inhalt dennoch verstehen zu können. Auf jeden Fall sollte dazu die Kennzeichnung des Bildes mit dem alt-Attribut gehören. Hier können Sie eine kurze Erklärung oder Beschreibung zu dem Dargestellten angeben. Des Weiteren empfiehlt es sich unter Umständen eine ausführlichere Erklärung mit Hilfe des longdescr-Attributes zu geben. Beispiel:

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

Beschreibende Titel

Ob bei Links, Akronymen oder einfach nur Abkürzungen: Wer Sie verstehen will braucht Hintergrundwissen. Benutzern eines Sprachbrowsers wird als Beispiel bei einem Link die verlinkte Adresse angesagt - ist diese wenig aussagekräftig verpasst der Benutzer vielleicht gerade den gesuchten Inhalt. Ebenso ist es bei Akronymen (ACRONYM; z.B. HTML, UNO, WWW) oder Abkürzungen (ABBR; z.B. usw., gez., MfG) die man unter Umständen nur versteht, wenn man dazu Hintergrundwissen besitzt. Deshalb sollten Sie möglichst bei allen Links, Akronymen und Abkürzungen das title-Attribut mit einer Beschreibung verwenden. Beispiel:

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

Formulare

Damit beeinträchtigte Besucher auch Ihre Formulare nutzen können sollten Sie auch hier Vorkehrungen zum besseren Verständnis treffen. Das FIELDSET-Element grenzt das Forumlar vom restlichen Inhalt der Seite optisch und inhaltlich ab. Des Weiteren unterstützt das LEGEND-Element das Verstehen des Formularnutzens. Ausserdem können Sie mit LABEL's 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 Benutzer ohne Behinderungen nur schlecht möglich heraus zu finden, auf welcher Unterseite der Homepage sie sich gerade befinden oder welche Seite den Inhalt fort führt. Aus diesem Grund sollten Sie alternative LINK's verwenden. Damit können Sie andere Quellen bezeichnen die z.B. den Context näher erläutern oder einfach nur auf die Startseite der Website führen. Diese sind in den meisten Browsern zwar nicht sichtbar, können z.B. bei Sprachbrowsern durchaus gute Dienste tun. 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 Schriftgröße sieht bei manchem Design zwar sehr gut aus - ist aber selbst für normale Benutzer eher schwer lesbar. Umso schlechter, wenn sich die Schriftgröße im Browser nicht anpassen lässt, weil sie fest definiert wurde. Aus diesem Grunde sollten Sie auf feste Schriftgrößen (z.B. 12px oder 8pt) zu gunsten von relativen Schriftgrößen (z.B. smaller oder x-large) verzichten. Beispiel:

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

Aurale Gestaltung

Um auch den (Text-)Inhalt etwas spannender für Benutzer von Sprachbrowsern zu machen sollten Sie auf die Verwendung von auralen CSS-Eigenschaften zurückgreifen. so können Sie wichtige Passagen hervorheben oder für Abwechslung im Sprachfluss sorgen. Beispiel:

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

Effekte

Effekte wie JavaScript s, Flash oder Java sind sicherlich eine willkommene Unterhaltung aber auch ebenso schlecht zugänglich für Benutzer deren Browser diese nicht unterstützen. Für alle diese sollten Sie Alternativen z.B. in Form eines Textes oder Möglichkeiten zum Download der benötigten Software anbieten. Beispiel:

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

Kontraste

Achten Sie auf Kontraste. Farblich abgestimmte Seiten sehen zwar gut aus, können aber auch zu einem Problem werden, wenn die Sicht beeinträchtigt ist. Verwenden Sie daher möglichst kontrastreiche Farben - ganz besonders für Schrift und Navigation.

Frames

Mit Frames lassen sich Seiten gut in Inhalt und Navigation unterteilen. Allerdings sollten Sie darauf achten, dass nicht alle Browser Frames unterstützen und die meisten Benutzer von Sprachbrowsern dann nicht wissen wohin sie nun eigentlich geraten sind. Bieten Sie für solche Zwecke einen NOFRAMES-Bereich an, der z.B. Informationen wie ein Inhaltsverzeichnis der Seiten oder einen Link zu einer speziellen (ohne Frames gestalteten) Version der Seiten führt. Beispiel:

<frameset ...> ... </frameset>
<noframes>
 <p>Unsere Seiten wurd 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> 

Weitere Informationen

Weitere Punkte um Webseiten für Menschen mit Behinderungen zugänglich zu machen erarbeitet das W3C unter dem Namen "Web Accessibility Initiative". Die Arbeitsgruppe erstellt Richtlinien und Checklisten zum Gestalten von Webseiten, Web-Tools und Benutzer-Agenten (Browser).