Umsetzung
Inhaltsübersicht:
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
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
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