PC Magazin Classic XXL Geheime Tools von Microsoft (Vorschau)

127
dem wir einen Inhaltsbereich definieren. Diesen
nennen wir container. Innerhalb dieses
Containers erstellen wir einen Kopfbereich
und einen Bereich für den Content. Alle Breiten
sind in Prozent angegeben. Höhenangaben
für die Kopfzeile, in der sich später auch
die Navigation befindet, sind eindeutig, um
das Layout auch bei Veränderungen nicht völlig
durcheinander zu bringen.
Barrierefreies Webdesign
Grundlagen zum Aufbau einer barrie
refreien Webseite
Ein Absatz
Die CSS-Definition dazu:
#container {
margin: 0 auto;
text-align: left;
width: 80%;
}
#kopfbereich {
height: 268px;
position: relative;
width: 100%;
}
#mitte {
background: none repeat scroll 0 0
#FFFFFF;
font-size: 75%;
line-height: 2;
padding: 0 25px 25px 40px;
#inhalt {
float: left;
width: 60%;
}
4 Farbblindheit berücksichtigen
Laut der WCAG-Definition soll die visuelle
Präsentation von Texten und Grafiken ein
Kontrastverhältnis zwischen Vordergrundund
Hintergrundfarbe von mindestens 4,5:1
aufweisen. Dies entspricht dem Standard AA.
Um den Standard AAA und damit die erweiterte
Kontrastanforderung zu erreichen, muss
das Kontrastverhältnis sogar 7:1 betragen. Bei
großformatiger Schrift (ab 18 Punkt) verringert
sich die Kontrastanforderung auf 3:1 für den
Standard AA und 4,5:1 für AAA.
Als Hintergrundfarbe für den Content-Bereich
haben wir in unserem Beispiel Weiß gewählt.
Der übrige Bereich der Seite kann farblich frei
gestaltet werden und muss sich nicht an die
Kontrastregeln halten. Wir haben hier eine dezente
Farbe gewählt. Die Schriftfarbe definieren
wir in einem dunklen Grau. Damit wird der
AAA-Standard erfüllt.
body {
padding: 0;
margin: 0;
font: 100%
verdana,arial,helvetica,sans-serif;
background: #e5ebf0;
color: #333;
}
5 Legen Sie Schriftarten
und Schriftgrößen fest
Verwenden Sie möglichst serifenlose Schriften
(= Schriften ohne feine Abschlusstriche),
um die Lesbarkeit am Bildschirm zu erhöhen.
In diesem Beispiel verwenden wir Verdana, da
es sich um eine Betriebssystem-übergreifend
weit verbreitete Standardschrift mit relativ
großer Laufweite handelt. Geben Sie die
Schriftgröße nicht in px, sondern in em an. Die
Maßeinheit em wird im Schriftsatz zur Bestimmung
der Zeichenbreite in Abhängigkeit von
der Schriftgröße verwendet; sie entspricht in
etwa der Breite des Buchstabens M.
Nur dann ist gewährleistet, dass der Nutzer
den Text skalieren kann. Eine Schriftgröße von
16px entspricht dabei 1em.
p, div, h1, h2, h3, h4, h5, h6, button,
ol, ul, li {
font-family:
verdana,arial,helvetica,sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
}
6 Versehen Sie Bilder, Grafiken und
Multimedia-Inhalte mit Alt-Attributen
Vermeiden Sie Grafiken und Bilder möglichst.
Sollten Sie nicht darauf verzichten können,
versehen Sie jedes Bild mit einem ALT-Attribut.
Screenreader lesen den Inhalt des ALT-Tags
vor und liefern so zumindest eine Beschreibung.
Ist kein Alternativtext angegeben, wird
der Dateiname vorgelesen, was meist nicht
sehr eindeutig und hilfreich ist. Benutzern
ohne Screenreader wird die ALT-Beschreibung
von den meisten herkömmlichen Browsern
als Tool-Tipp angezeigt. Zusätzlich können
Sie das Attribut longdesc benutzen, um eine
ausführliche Inhaltsangabe mitzuliefern.
Ganz besonders gilt das auch für multimediale
Inhalte wie Videos und Animationen. Diese
Art der Präsentation ist in Webseiten, die
Menschen mit körperlichen Einschränkungen
zugänglich gemacht werden sollen, immer
problematisch. Verzichten Sie also darauf.
7 Gewährleisten Sie die
Bedienbarkeit über die Tastatur
Steuerelemente der Seite sollten für den Benutzer
auch ohne Einsatz der Maus bedienbar
sein. Das gilt insbesondere für die Navigation
und Formulare. Über eine entsprechende CSS-
Definition sollten Links nicht nur mit einem
hover- und active-Element versehen werden,
sondern auch die Deklaration focus erhalten.
In unserem Beispiel sehen die CSS-Klassen
so aus:
#hauptnavi1 {
position: absolute;
top: 0;
right: 25px;
margin: 0;
padding: 0;
background: #fff;
list-style: none;
}
#hauptnavigation {
position: absolute;
bottom: 0;
left: 25px;
margin: 0;
padding: 0;
background: #fff;
list-style: none;
}
#hauptnavigation a:link, a:visited {
background: #000033;
color: #ffffff;
}
Gleiche Bildschirmauflösung – zwei Ansichten: Sind die Größenangaben in em definiert, kann der
Benutzer die Texte individuell vergrößern.
www.pc-magazin.de PC Magazin 1/2012