Webdesign – Teil 3 – Barrierefrei
Es ist wieder so weit. Ich habe mir tatsächlich mal die Zeit genommen wieder etwas zu schreiben.
Wie schon früher erwähnt gebe ich für alle meine Hinweise und Anmerkungen keine Gewähr. Es entspricht alles meinen Erfahrungen und auch meiner persönlichen Arbeitsweise.
Diesmal geht es um folgende Themen:
- CSS-Layout
- Barrierefreiheit
Im zweiten Teil habe ich ein Seitengerüst aufgebaut und habe allen wichtigen Seitenbereiche mit eindeutigen und sprechenden Namen versehen:
DIV-Ebenen zu verwenden hat neben der Einhaltung des Standards auch Sinn für die Barrierefreiheit. Wenn ein Layout mit Tabellen gestaltet wird, müsste z.B. eine Software, welche die Seite vorliest jede Tabellenzeile einzeln durchlaufen, auch wenn diese nur Layout-Zwecke dient.
Dies kann man schon mal durch ein solches Gerüst einfach verhindern.
Aber nun kommen wir zum CSS. Mitlerweile kann man ohne eine zentrale CSS-Datei keine Webseite mehr gestalten. Es ist das ultimative Werkzeug des W3C-Standards, um Formatierungen an zentraler Stelle einzurichten und auch zweckgebunden einzusetzen.
Im Head der HTML-Seite wird der Verweis auf die externe CSS-Datei gesetzt:
Um innerhalb der CSS-Datei die Übersicht zu wahren und gleichzeitig die Hierarchie des Layouts hervorzuheben gehe in der folgenden Weise bei der Erstellung der CSS-Datei vor:
Zum einen definiere ich zunäst die globalen HTML-Formate.
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 1em;
background: #333366;
color: #222222;
}
h1, h2, h3, h4, h5, p, hr {
margin-top: 5px;
margin-bottom: 5px; }
Hiermit habe ich schonmal die volle Kontrolle über alle weiteren Formatierungen. Ich habe Schriftart, Farbe und Größe bestimmt und alle Abstände von Elementen zu Anfang auf 0 gesetzt, da ich diese für jedes Element selbst bestimmen möchte.
Anschließend baue ich Anhand meines DIV-Layouts meine Hierarchie auch für die Formatierungen nach. Hierbei rücke ich die Untergeordneten Elemente solange Sie ebenfalls eine eindeutige ID besitzen lediglich ein. Später setze ich die Vererbung für weitere HTML-Elemente auch direkt um:
#wrapper {
text-align: center; /* für IE */
}
#page {
width: 958px; /* 960px abzüglich dem Rand links+rechts */
margin: 0 auto; /* horizontal zentrieren, nur in Verbindung mit width */
background: #FFFFFF;
border: 1px solid #000000;
}
#header {
height: 100px;
background: #EEEEEE;
}
#content { }
#left {
float: left; /* alternativ kann man mit position arbeiten */
width: 198px; /* linke Spalte = Breite von Page - Breite von Right */
background: #F9F9F9;
}
#right {
float: left; /* Left und Right direkt nebeneinander angeordnet */
width: 760px;
}
#right h1 {
font-size: 1.4em;
color: #663333;
}
#footer {
clear: both; /* floatings auflösen */
height: 30px;
background: #EEEEEE;
}
Bisher konnte ich mit dieser Variante meine CSS-Dateien relativ sauber halten. Obwohl ich globale Formatierungen z.B. für Überschriften (h1-h5) gestalten kann, mache ich diese Formatierungen zu gerne auch für jeden Layout-Bereich einzeln. Die Datei wird dadurch evtl. etwas größer, aber die Formatierungen werden dadurch eindeutig und übersichtlich und auch der InternetExplorer bekommt weniger Anlass zum meckern.
Informationen über CSS erhält man sehr gut bei CSS4You.
Jetzt habe ich die ersten Inhalte also schön formatiert. Nun widme ich mich der Barrierefreiheit.
Was bedeutet Barrierefrei eigentlich? Ich versuche es mal ganz einfach zusammenzufassen. Der Begriff Barrierefrei wird im Zusammenhang mit Behinderungen genutzt. Z.B. wenn ein Supermarkt eine Rampe für Rollstuhlfahrer im Eingangsbereich hat und alle Gänge auch leicht mit Rollstühlen passierbar sind, dann bezeichnet man den Ort als barrierefrei.
Barrierefreie Internetseiten sind solche, die keine Hindernisse z.B. für Behinderte beinhalten und zusätzlich eine intuitive Bedienung besitzen. Hierfür wurden International Richtlinien aufgesetzt, um die Bedienbarkeit für den Benutzer zu verbessern. Wikipedia Artikel.
Für Webdesigner bedeutet das im Groben das man folgende Punkte beachten sollte:
- Keine Tabellen für das Layout verwenden.
- Standard HTML (z.B. als Strict XHTML) und zentrale CSS-Formatierungen verwenden.
- HTML-Struktur Einhalten: H1, p, b, i etc. anstantt span oder font verwenden
- Titel und Alt-Texte für Bilder und Links mit sprechenden Inhalten versehen
- Abbkürzungen mit dem Acronym-Tag mit der vollen Beschriebung versehen
- Keine Bilder (z.B. spacer.gif) für Layout-Zwecke einsetzen. Platzhalter können mit DIV-Elementen gesetzt werden
- Schriftgrößen nur bedingt mit festen Pixel/Punkten-Zahl angeben. Mit em als Einheit kann der Browser die Darstellung besser skalieren.
- Bei Hauptmenüpunkten Accesskeys verwenden (
<a href="" accesskey="s">linka>).Der Aufruf des Accesskeys ist evtl. je Browser unterschiedlich z.B. alt+strg+accesskey - Formularelemente mit Labels versehen und tabindex als Attribut für Bedienung einsetzen
Wenn man sich an diese Regeln etwas hält und noch nach dem W3C-Standard validiert ist, ist man schon auf der sicheren Seite, weil man dies z.B. auch gut als Marketing-Mittel verwenden kann.
Das sollte es nun erstmal gewesen sein. Ich werde diesen Text jetzt nicht mehr auf Rechtshraibfeler untersuchen und schluß machen.
Im letzten Teil (Teil 4) werde ich nochmal eine Reihe von kleinen Tipps und Hinweisen auflisten. Code-Snippets und andere Dinge, welche einem helfen können eine ordentliche Webseite zu gestalten.
Kommentare
Einen Kommentar schreiben