Umsetzung

Eine barrierefreie Website - barrierefreies bzw. barrierearmes Webdesign - wird verschiedenen Anforderungen gerecht. Inhalt und Layout sind von einander getrennt. Das Layout ist skalierbar, Schriftgrößen sind variabel, das Schriftbild ist sauber und optisch klar. Navigationselemente sind in einfachen, leicht durchschaubaren Navigationsleisten zusammengefasst, ausschließlich mausgesteuerte Ereignisse werden vermieden. Überschriften und signalgebende Stichwörter schaffen eine klare Struktur und einen logischen Aufbau. Eine durchdachte Farbwahl bietet ausreichende Kontraste. Bei längeren Texten erfolgt eine Beschränkung auf das wirklich Wesentliche mit verständlichen, möglichst kurzen Sätzen ohne "schwierige" Wörter. Zur Nutzerführung werden Hilfen angeboten.
Stand 23.04.2010

Inhaltsübersicht:

  1. XHTML - Angaben im Dokumentenkopf
  2. XHTML - Angaben im Dokumentenkörper
  3. CSS - Formatzuweisungen

XHTML - Angaben im Dokumentenkopf

Der Dokumentenkopf enthält Informationen zur inhaltlichen Analyse sowie Angaben für Suchdienst-Systeme. Zum Dokumentenkopf gehören alle Angaben zwischen dem öffnenden und schließenden Tag (dt. Markierung) des <head>-Elementes.

Der Seitentitel

Eines der wichtigsten Elemente im Dokumentenkopf ist das <title>-Element, welches eine knappe und präzise Formulierung des Dokumenteninhaltes enthalten sollte, den Seitentitel. Der Text innerhalb dieses Elementes wird von sämtlichen Suchmaschinen in hohem Maße gewichtet und erscheint in den meisten Suchmaschinen-Ergebnislisten in, als Verweis gestalteter, fetter Schrift.

Lesen Sie mehr zu Der Seitentitel

Metatags

Zur näheren Beschreibung des jeweiligen Dokumentes stehen sog. Metatags zur Verfügung. Sie sind für den Nutzer im Browser nicht sichtbar und werden im Quelltext im Dokumentenkopf direkt unter dem <title>-Element notiert.

Lesen Sie mehr zu Metatags

Datei-Beziehungen

Das <link>-Element dient zum Abbilden von Dokumenten-Relationen, von Datei-Beziehungen. Dieses im Kopfbereich einer Seite einzubindende Element ist sehr vielfältig: Es kann auf Layout-, News- und inhaltlich zugehörige Dateien verweisen.

Lesen Sie mehr zu Datei-Beziehungen

Seitenanfang

XHTML - Angaben im Dokumentenkörper

Der im Browser sichtbare Inhalt steht zwischen dem öffnenden und schließenden Tag des <body>-Elementes. Das Beschreiben der Inhalte erfolgt mittels verschiedener Elemente, die z.B. Überschriften, Absätze, Listen, Tabellen und Grafiken kennzeichnen. Diese Elemente bringen Struktur in die Webseite, ermöglichen eine gute visuelle Darstellung und kommen der Suchmaschinen-Dokumentenanalyse entgegen.

Frames

Frames segmentieren das Browserfenster, wobei jeder Frame eine Datei oder ein weiteres Frameset enthält. Frames haben den Vorteil, dass nur ein einmaliger Navigationsaufbau erfolgt, was jedoch auch zu höheren Ladezeiten führen kann.

Lesen Sie mehr zu Frames

Container

Eine Alternative zum vorgenannten Frame-Aufbau ist das Aufteilen einer Seite in <div>-Elemente, sog. Container. Container können mehrere Elemente wie Text, Grafiken und Tabellen in einen gemeinsamen Bereich einschließen und über Style Sheets positioniert werden.

Lesen Sie mehr zu Container

Überschriften

Überschriften (engl. Headings) gliedern Themen in Abschnitte, es stehen die Elemente <h1> bis <h6> zur Verfügung. Diese Abstufung ist als Untergliederung zu verstehen, das <h1>-Element entspricht der obersten Ebene.

Lesen Sie mehr zu Überschriften

Listen

Zu unterscheiden sind Aufzählungslisten und nummerierte Listen. Aufzählungslisten sind unsortierte Listen, bei denen die Reihenfolge der Listeneinträge keine Rolle spielt. Nummerierte Listen sind sortierte Listen, die Reihenfolgen abbilden.

Lesen Sie mehr zu Listen

Tabellen

Für das Umsetzen barrierefreier Tabellen stehen Elemente und Attribute für Überschriften, Zusammenfassungen, Beschreibungen und Beziehungszuordnungen zur Verfügung.

Lesen Sie mehr zu Tabellen

Formulare

Texteingabefelder können ein- oder mehrzeilig sein. Die Länge eines Eingabefeldes ist an der durchschnittlichen Textlänge auszurichten, die ein Nutzer hier eingibt. Das erleichtert dem Nutzer die Orientierung.

Lesen Sie mehr zu Formulare

Grafiken

Schriftgrafiken werden meist eingesetzt, um das Corporate Design zu wahren. Informative Grafiken unterstützen den Inhalt und das Thema der Seite. Layoutgrafiken haben keinen Informationsgehalt.

Lesen Sie mehr zu Grafiken

Verweise

Verweise, auch Links oder Anker genannt, werden durch das <a>-Element mit den title- und alt-Attributen in das Dokument eingebunden. Besondere Gewichtung seitens der Suchmaschinen erhält der Linktext.

Lesen Sie mehr zu Verweise

Sprache

Insbesondere für lernbehinderte, leseschwache und fremdsprachige Nutzer ist es vorteilhaft, wenn allgemein gebräuchliche, einfache, kurze Wörter und Sätze verwendet werden.

Lesen Sie mehr zu Sprache

Seitenanfang

CSS - Formatzuweisungen

Formatzuweisungen erfolgen in der CSS-Datei. Nachfolgend werden exemplarische Formatierungen für Textgrößen, Verweise und Navigationsleisten sowie die Einbindung unterschiedlicher Layouts vorgestellt.

Schrift

In Bezug auf die barrierefreie Gestaltung von Webseiten ist es vor allem für ältere und leicht sehbehinderte Nutzer wichtig, Schriftgrößen bedürfnisorientiert einstellen zu können. Schriftgrößen können in absoluten und in relativen Werten angegeben werden.

Lesen Sie mehr zu Schrift

Verweise im Text

Verweise im Textfluss (engl. Embedded Links) sind gegenüber dem umfließenden Text deutlich hervorzuheben. Verweise können verschiedene Zustände annehmen. Diese können in CSS über sog. Pseudoelemente formatiert werden.

Lesen Sie mehr zu Verweise im Text

Navigationsleisten

Mit etwas aufwändigeren Angaben können komplette Navigationsleisten erstellt werden. Verweise als Bestandteil der Navigation sind einheitlich zu gestalten und müssen sich vom eigentlichen Inhalt der Webseite absetzen. Navigationsleisten bündeln Verweise inhaltlich und funktionell und bilden Informationsflüsse hierarchisch ab.

Lesen Sie mehr zu Navigationsleisten

Individuelle Layouts für unterschiedliche Endgeräte

Unter Zuhilfenahme von Style Sheets können für unterschiedliche Ausgabemedien auch unterschiedliche Layouts festgelegt werden. Durch die Einbindung mehrerer CSS-Dateien kann das Aussehen für die Bildschirmanzeige, die Druckansicht oder die Ansicht auf Mobiltelefonen optimiert werden.

Lesen Sie mehr zu Individuelle Layouts für unterschiedliche Endgeräte

Seitenanfang