Einstieg in Barrierefreies Webdesign

CSS bietet aber eine Vielzahl von Eigenschaften an, mit denen man nahezu alle typografischen Einstellungen vornehmen kann, wie Zeilen-, Wortabstand, Initialen usw. Im Gegensatz zu dem veraltetem HTML-Element font, stehen somit dem Webdesigner mehr Optionen zur Verfügung eine eigene Typografie zu erstellen. In Hinsicht auf die Barrierefreiheit, muss man bei der Typografie der Webseite auch auf eine gute Lesbarkeit geachtet werden, da dies auch durch die BITV vorgeschrieben wird.

Schriftarten

Da weder HTTP noch HTML oder CSS eine Möglichkeit besitzen ganze Schriftsätze zu übertragen und es dadurch zu gesetzlichen Grauzonen kommen würde (der Benutzer könnte die heruntergeladenen Schriftsätze für eigene Bedürfnisse weiterverwenden), muss man sich auf einige wenige Schriftarten und -familien beschränken, die auf allen Betriebssystemen wie Microsoft Windows, Linux-Distributionen oder Apple Mac OS vorhanden sind. Ein Problem ist aber, dass unterschiedliche Systeme auch unterschiedliche Schriftarten haben.

Die Firma Microsoft hatte im Jahre 1996 versucht mit "TrueType Core Fonts for the Web" einen "Quasi-Standard" an Schriftsätzen im www einzurichten, was ihr auch gelungen ist. Diese Fonts sind für jeden und jedes gängige System frei verfügbar und daher weit verbreitet und die Meisten in diesem Paket sind auf das Medium Bildschirm spezialisiert und somit am besten auf dem Bildschrim wahrnehmbar. Daher empflieht es sich diese zu verwenden, die da wären:

Schriften mit Serfien

Times New Roman, Georgia, Andale Mondo

Serifenlose Schriften

Arial, Comic Sans Serif, Impact, Trebuchet MS, Verdana

Unpropotionale Schriften

Courier New

Symbolschriften

Webdings (Webdings)

Da sie aber "nur" weit verbreitet sind, kann nicht sicher gestellt werden, dass wirklich alle Browser und Betriebssysteme diese Schriftart haben. Deswegen sollte man auch einige "Core Fonts" von Apple (Geneva,..) und Linux (Helvetica, Times,..) miteinfließen lassen. In CSS lassen ganz leicht mehrere Alternativen für eine Schriftart anlegen, in dem man diese mit einem Komma voneinander trennt.

p { font-family: Georgia, Times, serif; }

Der Browser geht nun den von links nach rechts, die ihm angebotenen Schriftarten im Wert durch, und verwendet die für den Selektor, der als erster mit den eigenen Systemschriftarten identisch ist. In dem oberen Beispiel wählt der Browser in einem Linuxsystem mit Standardinstallation, die Schriftart Times, da Georgia nicht zu seinem Reportoire gehört. Ein Browser unter Windows würde an dieser Stelle die Schriftart Georgia auswählen, falls diese vorhanden ist.

Sehr wichtig für die Barrierefreiheit und auch die Typografie ist die letzte Alternativschriftart. Sie sollte immer die Schriftgattung wie serif, sans-serif oder monospace angeben, wie das obere Beispiel zeigt. Je nach dem ob die anderen Alternativen serif, seriflose oder unpropotionale Schriften sind. Durch sie wählt der Browser seine serife, serifenlose oder unpropotionale Standardschrift für den Selektor aus. Zwar bleibt die Wirkung einer bestimmten Schrift nicht mehr erhalten, die Anmutung aber kann durch die entsprechende Gattung erhalten bleiben. Ohne diese Angaben am Ende dieser Deklaration, könnte es zur ungewünschten Schriftmischung aus Serif- und serifenlosen Schriften kommen, die sehr negativ die Ästhetik in der Typografie beeinflussen und auch die Wahrnehmung stören. Da Browser leider kein ästhetisches Empfinden haben, wählen die meisten als Standardschriftart eine Serifschrift, wie zum Beispiel Times New Roman, wenn keiner der Alternativen passt.

Die CSS-Spezifikation kennt noch zwei weitere Schriftgattungen, cursive ( = Schreibschrift) und fantasy ( = Fantasieschrift). Doch die meisten Webbrowser haben für diese Gattungen standardmäßig eine serifenlose oder Serifenschrift gewählt, wodurch in der Praxis diese beiden Gattungen eher nutzlos sind.

Zwar könnte es möglich sein, dass ein Benutzer oder ein System für den Browser als serife Standardschrift eine Serifenlose auswählt, solche Schnitzer kann aber ein Webdesigner nicht verhindern oder gar beheben.

Auszeichnungen

In einer barrierenfreien Webseite sollten für die Auszeichnung nur die HTML-Elemente em und strong verwendet werden, siehe nicht empfehlenswerte HTML-Elemente. Das em - Element sollte für ästhetische Auszeichnungen und das strong - Elemente für optische Auszeichnungen verwendet werden. Mit den CSS-Eigenschaften legt man die Eigenschaften fest, die diese Auszeichnungen haben sollen. Die CSS - Eigenschaften sind da sehr vielfältig und reichen von Schriftfarbe über Schriftdicke bis hin zu Unterstreichungen. Dabei sollte man achten, dass die Eigenschaften nicht aus dem em-Element eine optische Auszeichnung machen und umgekehrt.

Hier sind einige Bespiele, wie Auszeichnungen unter CSS aussehen könnten.

Lorem ipsum dolor sit amet

font-weight:bold;

Lorem ipsum dolor sit amet

font-variant:small-caps;
font-style:italic;

Lorem ipsum dolor sit amet

color:red;
letter-spacing:.5em;

Lorem ipsum dolor sit amet

color:red;
background-color:yellow;

Lorem ipsum dolor sit amet

border-left:5px solid red;
border-right:5px solid red;

Lorem ipsum dolor sit amet

border-bottom:1px dashed blue;

Wie man sieht, bieten die CSS - Eigenschaften eine Vielzahl an Möglichkeiten Text auszuzeichnen, die weit über die Möglichkeiten von herkömmlichen und nicht für Barrierefreihet geeigneten HTML - Elemente wie font, i oder b hinnausgehen.

Abstände

CSS kennt für Buchstaben-, Wort-, und Zeilenabstände bzw. Zeilenhöhe entsprechende Eigenschaften. Für Buchstabenabstand verwendet man die Eigenschaft letter-spacing, für Abstände zwischen Wörten benutzt man die Eigenschaft word-spacing und um eine Zeilenhöhe und Zeilenabstand anzugeben steht die Eigenschaft line-height zur Verfügung. Mit diesen Eigenschaften hat der Webdesigner nun eine Kontrolle über den Weißraum und somit einen Einfluß auf die Ästhetik und Anmutung der Webseite.

Man sollte für diese Abstände nur relative Maßeinheiten, da man als Webdesigner gar nicht wissen kann, welche unterschiedlichen Schriften nun beim Benutzer verwendet werden und somit man auch nicht die spezifischen Breiten oder Höhen der Schrift kennen kann. Durch die Verwendung von relativen Maßeinheiten können sich die Maßangaben an die Schrift anpassen und somit unliebsame Überraschungen, wie überscheidene Buchstaben oder Zeilen vermieden werden.

letter-spacing

Mit dieser Eigenschaft legt man den Abstand zwischen Buchstaben, also die Laufweite fest. Als Standardwert giltet "normal" was auch "0" entspricht, also der normalen Laufweite der Schrift.

Positive Werte erhöhen die Laufweite, wie die folgenden Beispiele zeigen.

letter-spacing:0.5em;
letter-spacing:1em;
letter-spacing:2em;

Negative Werte verringern die Laufweite, wobei man nur sehr geringe negative Werte verwenden sollte, da es sonst unleserlich wird.

letter-spacing:-0.1em;
letter-spacing:-.05em;
letter-spacing:-1em;

Beachten sollte man, dass die Laufweite sehr entscheidend ist für die Wahrnehmung und Lesbarkeit. Deswegen sollte man die Eigenschaft letter-spacing sehr dezent einsetzen, zum Beispiel für Überschriften oder Auszeichnungen.

word-spacing

Die Eigenschaft word-spacing stellt den Abstand zwischen den Wörtern her und verhält sich ähnlich wie letter-spacing. Der Einsatz dieser Eigenschaft sollte sehr gut überlegt sein, denn nur die aktuellste Version des Internet Explorers unterstützt diese Eigenschaft, während so gut wie alle alternativen Browser sie unterstützen. Außerdem kann eine Kombination mit der Textausrichtung "justify" (mit der Eigenschaft text-align) zu unschönen Effekten führen. Siehe das Beispiel für die Kombinationen von word-spacing mit text-align.

Auch diese Eigenschaft sollte sehr dezent und nur für Überschriften oder Auszeichnungen verwendet werden.

line-height

Diese Eigenschaft gibt die Zeilenhöhe an und kann zum Anlegen von Weißräumen und Durchschüssen verwendet werden. Wiederrum sollte man für diese Eigenschaft relative Werte verwenden, aber ohne eine Maßeinheit! Line-height kann als eine der wenigen Eigenschaft auch Multiplikatoren als Wert empfangen. Der Grund liegt an der Art, wie die Eigenschaften an die Kindelemente vererbt werden.

Obwohl relative Maßeinheiten angegeben worden sind, werden die Werte der line-height als absolut weitervererbt. Demnach kann, je nach gewählten Eigenschaften, der Zeilenabstand bei Kindelementen sehr gering werden, obwohl ein hoher Wert mit 1.5em angegeben worden ist. Eine line-height - Eigenschaft ohne Multiplikator hingegen vererbt nur den Multiplikator weiter und keine absoluten Werte. Zur Veranschaulichung dient das folgende Beispiel mit Unterschied zwischen relativen Einheiten und Multiplikator. Demnach sollten stets Multiplikatoren für die line-height - Eigenschaft verwendet werden. Denn dieser nimmt die Schrifthöhe und multipliziert diese mit dem gewähltem Faktor.

Meistens werden für einen sinnvollen Durchschuss Zeilenabstände wie eineinhalbfacher oder doppelter Zeilenabstand verwendet, die leicht mit dem Multiplkator einzustellen sind.

Eineinhalbfacher Zeilenabstand

line-height:1.5;

Doppelter Zeilenabstand

line-height:2;

Initialen und Einzüge

Mit CSS lassen sich auch leicht Initialen und Einzüge realisieren und mit geringerem Aufwand als mit einem herkömmlichen Tabellenlayout.

Einzüge

Für Einzüge hat man unter CSS die Eigenschaft text-indent. Auch für diese sollte man, wie bei den Abständen, nur relative Maße nehmen für eine bessere Skalierung. So kann eine Deklaration "text-indent:2em;" so aussehen:

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam

Es sind sogar negative Einzüge möglich. Dazu gibt man der text-indent einen negativen Wert und gibt noch der Regel noch eine paddling-left - Eigenschaft mit, mit dem gleichem Wert wie text-indent - aber positiv! - oder einen größeren.

.negativerEinzug {
  text-indent:-2em;
  padding-left:2em;
}

Foglich sieht das so aus:

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam

Initialen

Ein beliebtes Mittel um die Anmutung eines Textes zu unterstützen sind Initialen, dass heißt besondere Auszeichnung des ersten Buchstaben eines Textes. Zuallererst muss man diesen ersten Buchstaben selektieren, was am einfachsten mit dem Pseudoelement first-letter funktioniert. Meistens wird nur für den ersten Absatz eines Textes eine Initiale eingesetzt. Eine simple Initiale könnte dann so aussehen.

p.ersterAbsatz:first-letter { font-size:200%; }

Dadurch wird die Schriftgröße des ersten Buchstabens im Absatz mit der Klasse ersterAbsatz um das Doppelte vergrößert. Möchte man aber nun, dass der Text auch die Initiale umfließt, reicht die Deklaration float:left; aus. Eventuell muss man noch für den Internet Explorer, die line-height - Eigenschaft auf normal stellen. Auch sinnvoll wären Angaben zu den Außen- oder Innenabständen der Initiale, am besten wären für diesen Fall relative Maße.

p.ersterAbsatz:first-letter {
  font-size:200%;
  float:left;
  line-height:normal;
  margin:.5em;
}

Man kann nun diese Regel noch mit weiteren Deklarationen ausführen. Zum Beispiel eine andere Schriftart, andere Schrift- und Hintergrundfarben, man könnte auch eventuell mit Image-Replacement arbeiten, um prachtvollere oder individuellere Initialen umzusetzen.

Satzausrichtung

Es gibt unter HTML das Attribut align, mit dem man Text links-, rechtsbündig und zentriert ausrichten kann, dieses Attribut ist aber nur in den Varianten Transitional und Frames erlaubt, was auch dem Credo der strikten Trennung von Layout und Strukur entspricht.

Die Werte left und right richten den Text jeweils links- und rechtsbündig aus und erzeugen auch einen Flattersatz. Am häufigsten ist die linksbündige Ausrichtung, weswegen sie auch der Standardwert von text-align ist, und entspricht dem gewohnten Schriftbild der meisten Benutzer und ist somit gut lesbar.

Rechtsbündiger Text erscheint eher ungewöhnlich und wird als schwieriger lesbar als linksbündiger Text empfunden. Es sollte daher nur selten eingesetzt werden, zum Beispiel für Zitate, Bildbeschreibungen oder Randbemerkungen.

Unter CSS ist, im Gegensatz zum entsprechenden HTML - Attribut, die Ausrichtung als Blocksatz möglich, durch den Wert justify. Das Problem bei Blocksätzen unter CSS ist, dass man keine Kontrolle über die entstehenden Lücken hat, da ja jeder Browser unterschiedliche Schriften hat und die auch unterschiedlich groß rendern kann. Diese Lücken haben einen negativen Einfluss auf den Lesefluss. Die größten und auffälligsten Lücken entstehen, wenn die Breite des Textes niedrig sind. Daher ist eher vom Blocksatz abzuraten, es sei denn man hat eine absolute Breite des Textes und eine feste Höhe der Schrift.

Zentrierungen mittels dem Wert center sollten nur für Überschriften oder für Hervorhebungen, zum Beispiel bei Zitaten benutzt werden. Auch sind sie ein nettes Zierelement für Gedichte oder ähnliches.

Weitere typografische Eigenschaften

CSS kennt viele Eigenschaft, die für die Typografie und auch Barrierefreiheit interessant sind.

text-decoration

Diese Eigenschaft legt fest, ob und wie ein Text unterstrichen wird. Der Wert underline unterstreicht den Text, overline zieht einen Strich über den Text und line-through streicht den Text durch. Eingesetzt wird diese Eigenschaft auch, um durch den Wert none die Unterstreichung von Hyperlinks aufzuheben.

Weiterhin kennt diese Eigenschaft auch den Wert blink. Da aber blinkender Text sehr unleserlich ist und aufdringlich und penetrant wirkt, sollte man auf eine solche Deklaration im Sinne der Barrierefreiheit verzichten. Auch durchgestrichener Text sollte nicht in einer barrierenlosen Seite eingesetzt werden, da diese auch die Lesbarkeit beeinträchtigten kann.

Alternativ kann auch die Eigenschaft border-bottom oder auch border-top benutzt werden um ähnliche Effekte zu erzeugen. Außerdem haben dies Eigenschaften mehr Optionen, was Farbe, Form und Dicke der Striche betrifft.

font-variant und text-transform

Ein beliebtes Stilmittel um Textpassagen hervorzuheben oder für Überschriften sind Großbuchstaben oder Kapitälchen. Die Deklarationen font-variant:small-caps; und text-transform:uppercase; sind nur auf dem ersten Blick identisch, denn erstere stehen für Kapitälchen und die zweite setzt einfach alle Buchstaben groß.

Am sinnvollsten wäre es stets Kapitälchen einzusetzen, da diese Variante angenehmer zu lesen ist und auch Umlaute besser umgesetzt werden als in der Deklaration für Großbuchstaben. Die Eigenschaft text-transform kennt auch weitere Werte, die in den Beispielen für font-variant und text-transform vorgestellt werden. Wichtig ist vor allem, bei Großbuchstaben nur diese Varianten zu benutzen und nicht im HTML - Quelltext Großbuchstaben zu schreiben, da ansonsten einige Screenreader den Text nicht richtig vorlesen können.