Barrierefreiheit mit CSS unterstützen

Auf dieser Seite möchte ich meine Erfahrungen der Anwendung von Cascading Style Sheets in Hinblick auf die Erstellung von barrierefreien Webseiten zusammenfassen in Form einer Checkliste. Auf diese Weise kann man eine weitreichende Minimierung des Quellcodes erreichen und Trennung der Strukur vom Design. Auch in Hinsicht des mobilen Internet sollte man bemüht sein den Quellcode zu reduzieren.

XHTML Dokument bereinigen

In einem XHTML oder HTML Dokument sollten nur noch folgende Attribute der Elemente vorkommen um eine Trennung der Struktur und des Designs wirklich zu erreichen.

Mit Sicherheit verwendbare Attribute

Diese Liste wird bei Bedarf modifiziert. Enthalten sind momentan die Attribute, welche auch dazu geeignet sind die Seiten barrierearmer zu gestalten. Da ich nun erkennen konnte das diese Thematik sehr komplex ist werde ich Seiten zu den Elementen und Attributen erstellen.

id ab XHTML 1.1. In früheren Doctypes wurde häufig das Attribut name zur Kennzeichnung von Sprungmarken verwendet.
class Attribute sollte man sehr sparsam verwenden
alt
title
summary beim table Element entfällt mit HTML5
abbr für Abkürzungen
lang beziehungsweise xml:lang zur Kennzeichnung der Sprache
height und weight bei img Elementen könnte man per Cascading Style Sheets angeben
longdesc sofern benötigt. Entfällt in HTML5
acesskey und tabindex beim a Element sofern benötigt.

Weitere Attribute

In Zweifelsfällen sollte man auf den folgenden Seiten klären ob das Attribut oder Element nicht ersetzbar ist.

Interne Cascading Style Sheets Angaben

Ebenso sollten im HTML Quellcode keine style Attribute (Beispiel: <div style="width:80%"></div>) verwendet werden und auch das interne CSS (Beispiel: <head><style>div {width:80%;}</style></head>) sollte man in ein externes überführen. Dadurch kann man dann zusätzlich aus dem Kopf des Dokumentes diese Metaangabe <meta http-equiv="Content-Style-Type" content="text/css" /> entfernen!

Dabei kann unter Umständen die externe Angabe auch als dataurl hilfreich sein. <link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keXttYXJnaW46MTBweDt9" />

Grundeinstellung vornehmen beim Universal Selektor

Michael Jendryschik gibt in seinem Buch Einführung in XHTML, CSS und Webdesign den Ratschlag * {margin:0;padding:0;} anzuwenden um die Voreinstellungen der Browser gleich zu setzen. Nach meinen bisherigen Erfahrungen würde ich sogar noch dazu tendieren font-family, font-size, color und unter Umständen background-color (nicht bei Angabe von background-image) für den Universal Selektor * vorzunehmen. Dieser Schritt ist optional zu sehen.

Elemente per Typ Selektor designen

Als zweiten Schritt sollte man durch Anwendung des Typ Selektors alle Elemente designen. In dem folgendem Beispiel sind einige Vorgaben um eine Tabelle zu formatieren.

@charset "UTF-8";
table {width:100%;}
caption {font-size:105%;}
td {border:1px solid #000000;}

Elemente per Verschachtelte Selektor designen

Verschachtelte Selektoren sind für Anfänger schwer zu verstehen und in den meisten Fällen reicht ein Design nur per Typ Selektoren aufzubauen aus.

Dabei ist man durch die 4 Kombinatoren in der Lage eine minimierte Struktur zu erreichen.

Attribut id anwenden

Bevor man nun das Attribut id anwendet sollte man prüfen ob eine Darstellung mit den beiden oben genannten Selektoren nicht auch möglich ist. Falls man über das Verständnis für attributabhängige Selektoren und Pseudoelemente verfügt, sollte man vorher auch prüfen ob darüber nicht auch eine Möglichkeit das Design zu erstellen besteht. Der Id Selektor darf mehrmals in einem Dokument verwendet werden aber immer nur einmal pro Bezeichnung. In vielen Fällen gibt es aber auch bereits existierende id Attribute aus den folgenden Gründen die man dann auch nutzen kann.

Sprungmarken sind id Attribute die durch einen Link aufgerufen werden. Solche Bereiche kann man mit der Pseudo Klasse :target dann auch ein spezielles Aussehen verpassen.
Der Einsatz von id Attributen bei Formularen um einen Bezug mit dem label Element her zu stellen kommt aus dem Bereich der Barrierefreiheit.
Bei den Mikrodaten werden id Attribute dazu genutzt Verweise von einem Mikrodatensatz zu einem anderen zu erstellen.
Bei SVG können bereits erstellte Definitionen über das id Attribut angesprochen werden.
Bei Einsatz von Javascript Skripte kann man ein id Attribut dazu nutzen dieses Element einzubinden.

Div Container

Div Container werden in einem Maß teilweise auf Internetseiten angewendet was abschreckend ist. Man hat die Möglichkeit auch andere Elemente zu formatieren per CSS. Unter HTML5 gibt es einige Elemente die Bereiche in Webseiten besser klaasifizieren können als Div Container.

<div id="header-wrapper">
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">Titelbeschreibung</h1>
</div>
<div class="descriptionwrapper">
<p class="description"><span>Textabschnitt</span></p>
</div>
</div>
</div>
</div>
</div>

Völlig ausreichend wäre hier folgende Quellcode weil man in der Lage ist auch das h1 und das p Element zu positionieren und ihnen das nötige Design zu geben.

<div>
<h1>Titelbeschreibung</h1>
<p>Textabschnitt</p>
</div>

Tabellen

Tabellen haben bei richtiger Anwendung durchaus ihre Berechtigung nicht verloren. Leider gibt es zu viele Tabellen die das Design nur beeinflussen.

Schlechtes Beispiel und erhöht stark den HTML Quellcode!

<table>
<tr><th>Hauptstadt Bundesland</th><th>Bundesland</th></tr>
<tr><td class="red">Bremen</td><td class="green">Bremen</td></tr>
<tr><td class="red">Düsseldorf</td><td class="green">Nordrhein-Westfalen</td></tr>
<tr><td class="red">München</td><td class="green">Bayern</td></tr>
</table>

CSS zum Beispiel

td.red {color:red;}
td.green {color:green;}

Dieses Beispiel mit Anwendung des Attribut id ist nur nötig bei mehreren unterschiedlichen Tabellen auf einer Seite! Bei einer Tabelle kann die Einstellung mit dem Typ Selektor und Verschachtelten Selektor vorgenommen werden.

Das mit HTML5 abgeschaffte summary Attribut kann bei Anwendung des Caption Elementes entfallen.

<table id="liste">
<caption>Hauptstädte der Bundesländer</caption> 
<thead>
<tr><th>Hauptstadt Bundesland</th><th>Bundesland</th></tr>
</thead>
<tbody>
<tr><td>Bremen</td><td>Bremen</td></tr>
<tr><td>Düsseldorf</td><td>Nordrhein-Westfalen</td></tr>
<tr><td>München</td><td>Bayern</td></tr>
</tbody>
</table>

CSS zum Beispiel

#liste td {color:red;}
#liste td+td {color:green;}

Attribut class anwenden

Bevor man nun das Attribut class anwendet sollte man prüfen ob eine Darstellung mit dem Id Selektor und den anderen Selektoren nicht auch möglich ist. Bei Verwendung von Mikroformaten wird man einen sinnvollen Einsatz der class Attribute kennenlernen. Auch das dynamische Setzen von class Attributen empfinde ich als vorteilhafter als die Verwendung von style Attributen und sehe in diesem Zusammenhang eine wirklich sinnvolle Anwendung der class Attribute.

Danach kann man dazu übergehen das Attribut class zu verwenden. Der Klassen Selektor hat entscheidene Vorteile aber auch Nachteile. Wenn man ihn mit dem Universalselektor * verwendet kann man verschiedenen Elementen auch mehrere Klassen Selektoren zuweisen. Vorher sollte man aber meiner Ansicht nach prüfen ob eine Anwendung mit verschachtelten Selektoren nicht auch das gewünschte Ergebnis liefert. Ein Nachteil der Anwendung von Klassen Selektoren ist beispielsweise das sie gerne dazu verleiten das CSS und das entsprechende XHTML Dokument mit überflüssigem Quellcode zu füllen. Der Vorteil mit Klassen Selektoren zu arbeiten ist sicherlich die leichtere Verständlichkeit der Funktion. Dabei werden aber solche Punkte wie die Spezifität nicht berücksichtigt, was in einigen Fällen zu weiteren Fehlern führt.

Man kann einem Element mehrere Werte eines Klassen Selektors zuweisen, indem man diese Werte durch ein Leerzeichen trennnt. Diese Schreibweise ist valide da ein Attribut in einem Element nur einmal vorkommen darf: <p class="red rand" >Beispiel</p>

CSS zum Beispiel

*.red {color:red;}
*.rand {border:10px solid green;}

Im Grunde sollte man wenn man die Punkte dieser Checkliste Schritt für Schritt durchgegangen ist nicht mehrere Klassen Selektoren nutzen müssen um sein Dokument per CSS zu designen.

Attributabhängige Selektoren

Attributabhängige Selektoren werden angewendet, wenn man richtige Abhandlungen schreibt! Weitere sinnvolle Anwendungen sind beispielsweise die Kennzeichnung von externen und internen Links. Meine erste Anwendung bestand darin die Größe von Bilder über ein Verzeichnis zu regeln. Wie leistungstark diese attributabhängigen Selektoren sind wurde mir auch erst sehr spät bewusst. Das Verständnis ermöglicht die Reduzierung von id und class Attributen. Man sollte aber nicht hergehen, obwohl es möglich ist, diese beiden Attribute durch attributabhängige Selektoren an zu sprechen.

Ausser in dem Fall, wenn man eine geringere Spezifität für einen Id Selektor erreichen möchte. #idname kann man auch als [id="idname"] definiert werden.

Pseudoklassen

Durch die Anwendung von Pseudoklassen ist man in der Lage in einigen Fällen Id oder Klassen Selektoren auch zu ersetzen. Auf diesem Weg kann man also eine weitere Minimierung der Struktur erreichen.