EfA 2006 – Teil 3: Der Aufbau der Startseite
Nach dem vielen CSS der vergangenen Tage geht es nun um das HTML-Gerüst. In dieser Folge besprechen wir den Aufbau der neuen Startseite und die verschiedenen Accessibility-Eigenschaften. Die Startseite gilt für den weiteren Prozess als beispielhaft, da sie alle wesentlichen Bestandteile enthält, die sich auch auf den Folgeseiten befinden.
Autor: tc
Auch wenn der EfA-Jahrgang 2006 mit veränderter Optik erscheinen wird, hat sich am Aufbau der Seiten nicht viel geändert. Ausnahme: die in der ersten Folge beschriebenen Änderungen in der Informationsarchitektur spiegeln sich auf der Startseite wieder. Einige Navigationspunkte entfallen, andere kommen hinzu; neue Funktionen und Inhalte werden auf der Startseite in eigenen Bereichen eingeführt; Inhalte, die für Anbieter und Nutzer von besonderer Wichtigkeit sind, werden an prominenterer Stelle platziert.
Im oberen Bereich gibt es wie bisher einen Banner mit Namen und Logo der Initiative, gefolgt von einer Metanavigation mit Links in die wichtigsten Bereiche der Website: Link zur Startseite (dort natürlich nicht belegt) und Links in die Bereiche »news« mit unserem Weblog, zu einer Übersicht sämtlicher Artikel und zum Forum. Die Schnellsuche, die bisher ein verstecktes Dasein in der Navigationsspalte gefristet hat, nimmt den frei werdenden Platz der Linksammlung ein.
Das Gerüst
Der sichtbare Bereich der Seiten beginnt mit dem body-Tag. Dieser hat ein zusätzliches id-Attribut, das seinen Seitentyp kennzeichnet (in diesem Fall id="startseite", auf Folgeseiten dann id="blog", id="forum" usw.). Diese ID wird später benötigt, um mit sogenannten Kontextselektoren individuelle CSS-Angaben für die unterschiedlichen Seitentypen zuweisen zu können:
Nach dem body folgt unmittelbar ein DIV-Tag, das wir zum einen für spätere CSS-Formatierungen benötigen und das zum anderen notwendig ist, da die von uns verwendeten Sprungmarken a name="" id=""></a> nicht direkt im body, sondern nur innerhalb von Block-Level-Elementen erlaubt sind.
Darauf folgt der Banner-Bereich: das wichtigste – Name und Ziel der Initiative steht in einer <h1>, im Alternativtext der darin enthaltenen Grafiken: ›Einfach für Alle‹ und »Aktion Mensch-Initiative für barrierefreies Webdesign«. Die Auszeichnung als h1 bringt den Vorteil, dass die Alternativtexte bei abgeschalteten Bildern ebenfalls in prominenter Größe erscheinen und somit ihren korrekten Platz in der Hierarchie der Seite einnehmen.
Die Metanavigation
Auch diesmal ist die oberste Navigationsebene als Liste realisiert. Dies ist das erste Feature, dass als reines Accessibility-Merkmal angesehen werden kann, aber allen Nutzern hilft: innerhalb dieser Listenelemente, die als großflächige, klickbare Rechtecke gestaltet sind, befinden sich die Links in die wichtigsten Unterbereiche bei EfA. Bei herkömmlichen Links innerhalb dieser Rechtecke wäre nur der reine Linktext klickbar. Per CSS wurde der aktive Bereich jedoch auf die gesamte Fläche der jeweiligen Rechtecke ausgedehnt, so dass diese nun viel leichter zu treffen sind. Zusätzlich zu dem :hover-Effekt, der beim Überfahren mit der Maus den jeweiligen Link hervorhebt, wurde an Tastaturnutzer gedacht und der selbe Effekt mit :focus repliziert.
Der fünfte Punkt der Metanavigation ist die Suche, die wir in einer gesonderten Folge besprechen werden.
Hilfslinks für lokale Sprungmarken
Nach der Metanavigation folgen weitere Links: ein Style Switcher um das Aussehen der Seiten zu ändern und Skip Links zur Navigation innerhalb der Seite. Der Style Switcher basiert wie das Skript zur Schriftskalierung auf der bekannten Version des Vorgängers dieser Seiten und kann benutzt werden, um eine Druckansicht oder eine für die besonderen Bedürfnisse sehbehinderter Menschen angepasste Gestaltung (ein sogenanntes Zoom Layout) anzuzeigen.
Ein weiteres Entgegenkommen für Tastaturnutzer wird sichtbar, wenn man die Tastatur zur Navigation benutzt. Die angesprochenen Skip Links sind in grafischen Browsern zunächst via CSS aus dem sichtbaren Bereich der Seite hinausgeschoben:
skip1 a, #skip2 a {position: absolute;z-index: 2;width: 10em;overflow: hidden;top: -100px;left: -1000px;}
Sobald sie den Fokus erhalten (d. h. wenn der Benutzer per Tab-Taste zu diesen »hintabbt«) werden sie in den sichtbaren Bereich unterhalb der Navigation geschoben:
skip1 a:focus, #skip2 a:focus {position: absolute;z-index: 99;width: 12em;top: 9.5em;left: 3%;margin-left: 4px;text-decoration: underline;color: #000;background: #eee;font-size: .8em;}
Die Bemassung der Position gestaltete sich schwierig, da die Höhe der darüber liegenden Navigation in relativen Einheiten angegeben ist und sich somit bei einer Veränderung der Schriftgröße der gesamte Bereich nach unten verschiebt. Daher wurde die Position der Skip Links auch hier relativ zur Schriftgröße in em angegeben.
Tipp: bei der Errechnung solcher Positionen, besonders wenn es sich um gemischte Werte aus verschiedenen Einheiten handelt ist die Tabelle von reeddesign.co.uk eine wertvolle Hilfe.
In der nächsten Folge werden wir uns Stück für Stück durch die restliche Startseite vorarbeiten…
Diskutieren Sie mit!
Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.