Schnellnavigation

Seiteninhalt
Navigation
Rubriken
Hilfe

Webdesign: barrierefrei - BAHLKE UND HANUSCH

Sachverständige für Schäden an Gebäuden

Heute ist Montag, 06. September 2010.

Rubriken (Hauptmenü)

Barrierefreiheit

Hindernisse auf Internetseiten vermeiden und beseitigen

Mit standardkonformem Webdesign schaffen Sie die Voraussetzungen eines barrierefreien Zugangs. Mit Beachtung der Empfehlungen und Forderungen der BITV werden Ihre Internetseiten barrierefrei. Gegliedert nach Barriereformen finden Sie hier einige einführende Informationen.

Flur eines Einfamilienhauses mit angewendelter Holztreppe zum Dachgeschoss In Analogie zu den aufgeführten Barrieren erfolgt hier eine Zusammenstellung in der gleichen Gliederung für das Vermeiden von Barrieren auf Internetseiten.

Gruppierungen

Wie Sie Barrieren auf Internetseiten vermeiden können, haben wir versucht zu erläutern, nach Kategorien sortiert. Wählen Sie bitte eine der Kategorien aus der folgenden Liste. Betrachten Sie die jeweiligen Ausführungen bitte als Anregung - ohne jeden Anspruch auf Vollständigkeit.

Optische Barrieren

Schriftgröße

Es kann nicht von einer Standardmonitorgröße ausgegangen werden. Die mit dem jeweiligen Benutzerbildschirm eingestellte Auflösung lässt Schriften mal größer und mal kleiner erscheinen. Auch wenn von gängigen Auflösungen ausgegangen wird, sind die individuellen Monitoreinstellungen und auch die Einstellungen der jeweiligen Browser nicht bekannt.

Definieren Sie eine Standardausgabegröße für die Inhalte der Internetseiten. Ausgehend von dieser Standardgröße werden für die einzelnen Textabschnitte, unter Berücksichtigung des Schrifttyps, die Größen in relativen Maßeinheiten festgelegt.

Beachten Sie, dass Versionen des Internet Explorers Größenangaben in Pixel als Festgröße interpretieren, womit die Zoom-Funktionen des Browsers nicht ansprechen. Vermeiden Sie also Pixelangaben für die Schrift.

Mit den Internetseiten sollen Informationen weitergegeben werden. Wählen Sie die Schrift daher nicht zu klein.

Ein Beispiel für die entsprechenden CSS-Definitionen könnte wie folgt aussehen:


/* Grundeinstellungen definieren
   (gleiche Grundlage bei allen Browsern */
...
body, div, h1, h2, h3, h4, h5, h6, p,
...
{
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 100.01%;
...
 padding: 0;
 margin: 0;
}

/* Grunddefinition der Schriftgroesse */
body
{
...
 font-size: 69%;
...
}

/* Beispiele fuer Absatzformatierungen
   (Ueberschrift 1 und Standardabsatz) */

h1
{
 font-size: 1.8em;
 line-height: 1.6667em;
...
 margin: 0.8333em 0;
}

p
{
 font-size: 1.2em;
 line-height: 1.25em;
 margin: 1.25em 0;
}

Farbabstufungen (Kontrast)

Für eine lesbare Internetseite ist nicht nur ein vermeintlich ansprechendes Farbkonzept zu wählen. Bei der Wahl der Farben ist insbesondere darauf zu achten, dass sich zwischen Vorder- und Hintergrund ausreichende Farbabstände ergeben. Kriterien sind hierbei:

die Farbdifferenz,
die Helligkeitsdifferenz und
die Farbsättigung.

Im Internet finden Sie Tools, mit deren Hilfe Sie die vorgenannten Kriterien prüfen oder Fehlsichtigkeiten simulieren können. Ein gutes Beispiel eines solchen Tools finden Sie z.B. unter www.paciellogroup.com/resources/contrast-analyser.html.

Bilder und Grafiken

Grafiken und Bilder können auf Internetseiten drei verschiedene Funktionen erfüllen:

Inhaltsgrafiken,
Layoutgrafiken,
Navigationsgrafiken.

Inhaltsgrafiken

Mit Inhaltsgrafiken sind Grafiken und Bilder gemeint, die zum eigentlichen Seiteninhalt gehören. Sie stellen also bestimmte Inhalte dar, die den Text des Inhaltes zusätzlich mit Informationen versorgen.

Um den Inhalt des Bildes auch denen zugänglich zu machen, die das Bild nicht sehen können, sind derartige Grafiken entsprechend auszuzeichnen. In XHTML sieht das i.e. so aus:


...
<img src="..img/wiese.jpg"
alt="Sommerwiese mit Kornblumen" title=""
height="150" width="250" />
...

Mit dem alt-Attribut geben Sie eine Beschreibung des Bildinhaltes und mit dem title-Attribut erzeugen Sie einen Informationstext, der beim Überfahren des Bildes mit der Maus angezeigt wird. Das title-Attribut ist hier als leerer Wert definiert, weil z.B. Versionen des Internet Explorers bei fehlendem title-Attribut das alt-Attribut missbrächlich wie das title-Attribut verwenden. Wenn der Internet Explorer nicht wäre, könnte hier eigentlich auf das title-Attribut verzichtet werden. Das alt-Attribut ist immer anzugeben.

Inhaltsgrafiken können aber auch solche sein, die anstelle von Überschrifttexten eingefügt werden sollen. Die Nutzung von Grafiken zu diesem Zweck ist umstritten - aber möglich. Hierfür sei empfohlen, das alt-Attribut mit dem gleichen Wortlaut wie dem der Überschrift zu versehen. Ein Beispiel:


...
<img src="..img/ueberschrift_02a.gif"
alt="Überschrift 2a" title=""
height="24" width="200" />
...

Layoutgrafiken

Layoutgrafiken meinen Grafiken zur Formatierung des Bildschirm-Layouts von Internetseiten. Sie stammen aus der Anfangszeit des WWW, als die Möglichkeiten zur Seitengestaltung für Webdesigner noch sehr eingeschränkt waren.

Nach heutigem Standard würde die Einbindung einer solchen Grafik in ein XHTML-Dokument so aussehen:


...
<img src="..img/abstandhalter.gif"
alt="" title=""
height="5" width="5" />
...

Auf eine Erläuterung des Quelltextes wird hier verzichtet, denn derartige Grafiken sind nicht Bestandteil des eigentlichen Seiteninhaltes und haben heute somit im Quelltext von Internetseiten nichts mehr zu suchen.

Navigationsgrafiken

Oft ist es erwünscht, für die Navigationselemente (Schaltflächen) grafische Elemente zu verwenden, um das Layout von Internetseiten ein wenig aufzupeppen. Das bedeutet, dass diese Grafiken nicht dem Inhalt sondern der Gestaltung dienen und somit nichts im Quelltext der Internetseite zu suchen haben. In XHTML sieht das für die Navigation i.e. so aus:


...
<div id ="navigation">
 <ul>
  <li class="schalter_01">
   <a href="../inhalt/">Inhaltsverzeichnis</a>
  </li>
  <li class="schalter_02">
   <a href="../kontakt/">Kontaktinformationen</a>
  </li>
  <li class="schalter_03">
   <a href="../impressum/">Impressum</a>
  </li>
 </ul>
</div>
...

Die Navigation ist eine ungeordnete Liste, die in einem Container, hier namens “navigation”, eingebettet ist. Jedem Listenelement ist eine Klasse, hier von “schalter_01” bis “schalter_03”, zugeordnet. Mehr steht nicht im Quelltext. Der Rest, der dafür sorgt, dass die Liste schön und bebildert aussieht, wird mit CSS definiert. Wie das aussieht, soll hier nicht weiter ausgeführt werden.

Erwartungshaltungen bei Aktionen

Um Hyperlinks grafisch so auszuzeichnen, dass visuell bereits erkennbar wird, was für ein Ziel sich dahinter verbirgt, wird dem Verweis einfach eine Grafik zugeordnet.

Da diese Grafik aber nicht für jeden zugänglich ist, erfolgt zusätzlich eine Beschreibung zum Verweisziel. Wie das sowohl in XHTML als auch in der Formatierung (CSS) aussehen kann, ist hier anhand eines Verweises zu einer exteren Internetseite auszugsweise erläutert:

Die Anweisungen in XHTML


...
<a href="http://www.beispiel.de/"
 title="externe Seite">Beispiel</a>
...

Der Hyperlink wird beschrieben mit dem Hinweis, dass das Verweisziel das Ziel eines externen Internetangebotes ist. Dabei wird hier der Begriff “externe Seite” als Schlüsselbegriff verwendet, wie gleich zu sehen ist.

Die Anweisungen in CSS


...
a[title^="externe Seite"]
{
 background-image: url("http://www.beispiel.de/extern.gif");
 background-repeat: no-repeat;
 background-position: left center;
 padding-left: 1.5em;
}
...

Bei dem Beispiel aus den CSS-Anweisungen wurde auf weitere Effekte für die Verweisgestaltung verzichtet. Was steht nun also in den CSS-Zeilen?

Dem Hyperlink wird eine Grafik als Hintergrundgrafik zugewiesen. Das erfolgt aber nur dann, wenn das title-Attribut den Wert “externe Seite” beinhaltet, was in unseren Beispielen der Fall ist. Um dem Bild genügend Platz vor oder hinter dem Verweis zu geben, in unserem Beispiel vor dem Verweis, wird dieser Platz mit der CSS-Anweisung “padding-left” hergestellt.

Kategorieübersicht
Seitenanfang

Sprachliche Barrieren

Allgemeines zur Sprache im Internet

Die Wahl der Sprache ist stark von der Zielgruppe abhängig. Handelt es sich um ein Internetangebot mit allgemeinen Informationen sollte die Wahl der Formulierungen leichter sein als beispielsweise in einem Fachforum, welches eine Vorbildung auf dem besprochenen Gebiet voraussetzen kann. Dennoch: das Internet als öffentlicher Bereich sollte jedem zugänglich sein. Die Kompetenz von Seitenbesuchern ist nicht einzuschätzen, wesswegen die Wahl der Formulierungen möglichst einfach gehalten werden sollte.

Wichtig vor allem ist es, mitzuteilen, um welche Sprache es überhaupt geht. Muss sich eine Besucherin oder ein Besucher auf eine Fremdsprache einstellen oder handelt es sich um muttersprachliche Informationen.

Hauptsprache eines Internetdokuments (XHTML)

Bevor es losgeht, jemandem etwas mitzuteilen, sollte man sich auf einen Sprachraum einigen. In einem XHTML-Dokument sieht das i.e. so aus:


...
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
...

Dem Wurzelelement eines XHTML-Dokumentes wird so mitgeteilt, dass alle folgenden Ausführungen in deutscher Sprache erfolgen werden.

Neben der vorgenannten Definition erfolgen weitere Sprachangaben, die ja auch mit bestimmten Schriftsätzen verbunden sind, im Kopfbereich des XHTML-Dokumentes:


<meta name="language"
 content="de" />
...
<meta http-equiv="content-type"
  content="text/html; charset=iso-8859-1" />

Es wird also mitgeteilt, dass das Dokument in deutscher Sprache verfasst ist, und dass der hierfür erforderliche Schriftsatz (ISO 8859-1) vorgesehen ist.

Umgangssprache

Eine Grundvoraussetzung für barrierefreies Webdesign ist die Wahl einer leicht verständlichen Sprache in möglichst kurzen Sätzen. Als Beispiel könnte die Sprachwahl eines Sachverständigen dienen, der mit einem Gutachten einem fachlichen Laien komplizierte Sachverhalte verständlich darzulegen hat.

Auch Zweideutigkeiten oder Wortspiele sind nicht jedem verständlich, um so weniger, wenn zusammenfassende oder einleitende Inhalte mit derartigen Wortgebilden versehen sind.

Abkürzungen und Akronyme

Eine Spezialität der Schriftsprache sind Abkürzungen und Akronyme. Akronyme sind Kunstwörter, die sich aus den Anfangsbuchstaben mehrerer Wörter zusammensetzen (z.B. UNO oder DIN).

Abkürzungen und Akronyme sind im Quelltext als solche immer auszuzeichnen, ggf. ergänzt um die Sprache, sofern es sich nicht um die Standardsprache des Dokuments handelt. Beim ersten Auftauchen einer Abkürzung oder eines Akronyms ist eine Erklärung der Bedeutung erforderlich.

Beispiele für die Auszeichnung anhand eines Akronyms sehen in XHTML so aus:


...
<!-- erstmaliges Erscheinen im Dokument -->
 <acronym title="Deutsche IndustrieNorm">DIN</acronym>
...
<!-- wiederholtes Erscheinen im Dokument -->
 <acronym>DIN</acronym>
...

Fremdsprachen und Fachbegriffe

Sprachliche Bereiche, die von der Standardsprache des Dokuments abweichen, sind als solche zu kennzeichnen. Auch hier gilt, dass beim erstmaligen Auftreten eines fremdsprachlichen Begriffs eine Erläuterung, hier also eine sinnvolle Übersetzung, anzubieten ist.

Anhand eines Beispiels eines XHTML-Dokumentes könnte das so aussehen:


...
<!-- erstmaliges Erscheinen im Dokument -->
 <span lang="en" xml:lang="en"
  title="Programm zum Anzeigen von
   Internetseiten">Browser</span>
...
<!-- wiederholtes Erscheinen im Dokument -->
 <span lang="en" xml:lang="en">Browser</span>
...

Kategorieübersicht
Seitenanfang

Akustische Barrieren

Um Menschen mit einem anderen muttersprachlichen Hintergrund oder mit Sprach- oder Hörbeeinträchtigungen einen verständlichen Zugang zum Internet zu gewähren, ist eine einfach verständliche Schriftsprache zu wählen.

Für einen besseren Gesamtüberblick über den Inhalt der jeweiligen Internetseite bieten sich auch kurze Zusammenfassungen im Dokument an.

Kategorieübersicht
Seitenanfang

Motorische Barrieren

Ein barrierefreier, zumindest aber barrierearmer Zugang zu einer Website wird durch eine möglichst flexible Navigationshandhabung sichergestellt. Diese zeichnet sich im Wesentlichen durch folgende Merkmale und Eigenschaften aus:

Neben der Bedienbarkeit mit der Maus ist die Steuerung für den Zugriff auf die Seiteninhalte und die Navigation durch die Tastatur sicherzustellen.
Navigationselemente sollten ausreichend groß sein, um deren Nutzung zu erleichtern.
Die Navigationsstruktur sollte einer Logik folgen, die sich auf allen Seiten in gleicher Weise wiederspiegelt.
Navigationselemente sollten statisch sein, d.h. dass bei Schaltflächen auf nervöse Bewegungen zu verzichten ist (Wer kennt nicht die wackelnden Briefkästen und Telefone aus den frühen Tagen des Internets?).
Bieten Sie erweiterte Navigationsmöglichkeiten an. Diese bestehen z.B. in der Schnellnavigation, die dem Nutzer einen schnellen Zugriff auf bestimmte Dokumentbereiche ermöglicht, oder in der Definition von Tastaturkurzbefehlen, die zusätzliche Navigationshilfen darstellen. In den Hilfestellungen auf diesen Seiten finden Sie Erläuterungen darüber, wie sowohl die Schnellnavigation als auch zusätzliche Tastaturkurzbefehle auf den Internetseiten des Ingenieurbüros umgesetzt wurden.

Kategorieübersicht
Seitenanfang

Demografische Barrieren

Um altersbedingte Zugangseinschränkungen zu Internetangeboten zu vermeiden, gilt eigentlich das, was unter den verschiedensten Aspekten zuvor bereits beleuchtet wurde, ergänzt um einen kleinen Hinweis:

Die Macher und die Betreiber von Internetseiten sollten sich der umgangssprachlichen Gewohnheiten mit den Eltern oder Großeltern besinnen, bevor sie loslegen, die Inhalte ihrer Internetseiten mit neudeutschen Begriffen zu übersähen.

Kategorieübersicht
Seitenanfang

Technische Barrieren

Überholte Hardware und veraltete Software

Es ist immer davon auszugehen, dass Internetseiten auch auf alten Rechnern mit kleineren Bildschirmen und in älteren Browsern funktionieren müssen, und darüber hinaus auch mittels alternativer Techniken (z.B. Screenreader).

Unterziehen Sie Ihre Internetseiten umfangreichen Tests in verschiedenen technischen Umgebungen. Im Internet finden Sie zahlreiche Tools, die Sie bei dieser mühseligen aber wichtigen Arbeit unterstützen. Einige der erforderlichen Tests sollten sein:

Test der Website in verschiedenen Browsern und verschiedenen Versionen der einzelnen Browser,
Test der Website unter verschiedenen Betriebssystemen,
Test des Erscheinungsbildes mit verschiedenen Bildschirmgrößen und Bildschirmauflösungen,
Rechtschreibungs- und Grammatikprüfung,
Prüfen des Quelltextes (HTML, XHTML usw.) auf standardkonforme Verwendung,
Prüfen der Formatierungen (CSS) auf standardkonforme Verwendung,
Prüfen des Farbkonzepts auf standardkonformen Kontrast und ausreichende Helligkeit,
Fehlertests für verwendete Programmier- und Scriptsprachen,
Prüfen von Ladezeiten der einzelnen Seiten,
Überprüfung der Gültigkeit verwendeter Hyperlinks,
Überprüfung auf Einhaltung der Empfehlungen und Richtlinien zur Barrierefreiheit (BITV, WAI-Guidelines).

Kategorieübersicht
Seitenanfang

Gewohnheiten

Barrierefreiheit bedeutet auch, verschiedenen Nutzergewohnheiten beim Zugang zum Internet Aufmerksamkeit zu schenken. Das erledigt sich aber fast nebenbei, wenn Sie sämtliche vorgenannten Hinweise und Erläuterungen angemessen berücksichtigen.

Kategorieübersicht

Seitenanfang oder
Seiteninhalt