Cascading Style Sheets (CSS) ist eine beschreibende Sprache für strukturierte Dokumente
(z.B. HTML und XML).
Durch die Trennung von Stil und Inhalt wird das Veröffentlichen und Betreuen von Webseiten wesentlich vereinfacht.
CSS wurde vor allem im Hinblick auf HTML
entwickelt, ist aber auch für XML-Dokumente anwendbar.
CSS ermöglicht es auch, Inhalte nach dem Ausgabemedium
(z.B. Druck, Handy) zu ändern.
Das ist nützlich, um zum Beispiel Weblinks beim Drucken extra aufzuführen und nicht
(wie oft bei HTML-Seiten) zu verbergen.
Oder um für ein Anzeigemedium wie ein Handy mit geringerer Auflösung die Anzeige zu
optimieren (geringe Seitenbreite und -höhe).
Die Fähigkeiten von CSS sind vielfältig:
Neben diversen, weit über HTML 4 hinausgehenden Fähigkeiten
im Farb- und Schriftbereich, bietet es etwa die Möglichkeit, alle Elemente frei zu positionieren,
Hintergrundbilder und Vorlesestimmen festzulegen und vieles mehr.
CSS gilt heutzutage als die Standard-Stylesheet-Sprache
für das Web.
Hier finden Sie Schulungsunterlagen zum Thema....
Folgende Inhalte werden schwerpunktmäßig in meinen Schulungen vermittelt:
"Nicht-Text"-Elemente auf Webseiten erklären!
1. ALT-Attribute für Bilder:
Dem XHTML-Standard zufolge muss
jedes Bild ein alt-Attribut erhalten. Bilder, die nur dem Layout
dienen, erhalten ein leeres alt-Attribut (<img src="leer.gif alt=""/>
), damit der
Screenreader
es als irrelevant ausfiltern kann.
2. Longdescriptions für Bilder:
Sofern der Inhalt eines Bilds zum Verständnis der Seite relevant ist, kann eine detaillierte
Beschreibung auf eine separaten HTML-Seite ausgelagert
werden. Das Bild-Attribut "longdesc" verweist auf diese Seite, damit ein
Screenreader
oder Mozilla sie finden kann (<img src="bild.jpg" alt="alternat. Bildtext"
)
longdesc="datei.html" />
3. TITLE-Attribute für Bilder und Links:
Das alt-Attribut wird oft für "Tooltips" (Quickinfo) missbraucht.
Dabei soll es eigentlich als Platzhalter für ein Bild dienen, wenn die Anzeige von Bildern
im Browser deaktiviert wurde oder ein
Screenreader
die Ausgabe übernimmt.
title-Attribute zeigen alle aktuellen
Browser dagegen konsequent als Quicklnfo-Hinweise an.
Abgesehen von Bildern lassen sich auch Hyperlinks mit title-Attributen
versehen
(<a href="index.html" title="Zur Hauptseite">
).
4. Tabellen zusammenfassen:
Bei barrierefreiem Web-Design dienen Tabellen nur noch zur Strukturierung von Daten.
Um deren Inhalt für
Screenreader
zusammenzufassen, empfiehlt sich eine Inhaltsangabe des darin folgenden Inhaltes mittels des
summary-Attributs
(<table summary="Diese Tabelle enthält unsere Preisliste">
).