Kurzfassung

Dieses Dokument fasst die Fähigkeiten von CSS (Cascading Style Sheets) Level 2 ([CSS2]) zusammen, die direkt mit der Barrierefreiheit von Webdokumenten zusammenhängen. Manche der Accessibility-Eigenschaften, die in diesem Dokument beschrieben werden, waren auch bereits in CSS 1 ([CSS1]) vorhanden. Dieses Dokument wurde verfasst, damit sich andere Dokumente in durchgängiger Form auf die Barrierefreiheitseigenschaften von CSS beziehen können.

Status dieses Dokuments

Dieses Dokument ist eine Anmerkung, die durch das W3C veröffentlicht wurde. Diese Anmerkung wurde durch die EOWG (Education and Outreach Working Group) der WAI (Web Accessibility Initiative), die PFWG (Protocols and Formats Working Group) und die Arbeitsgruppe für CSS und Formatierungseigenschaften befürwortet.

Die Veröffentlichung einer W3C-Anmerkung impliziert nicht die Billigung aller W3C-Mitglieder. Eine Liste aktueller technischer Berichte und Publikationen einschließlich Arbeitsentwürfen und Anmerkungen kann unter https://www.w3.org/TR/ eingesehen werden.

Wie Stylesheets der Barrierefreiheit helfen

CSS dient der Zugänglichkeit in erster Linie durch die Trennung von Dokumentstruktur und Präsentation. Stylesheets wurden so entworfen, dass sie außerhalb des Markups genaue Kontrolle über Zeichenabstände, Textausrichtung, Objektpositionen, Audio- und Sprachausgabe, Schriftcharakteristiken &c. erlauben. Indem die Darstellung vom Markup getrennt wird, können Autoren das HTML ihrer Dokumente vereinfachen und säubern und die Dokumente dabei gleichzeitig zugänglicher machen.

CSS erlaubt Kontrolle über Abstand, Ausrichtung und Positionierung. Autoren können dadurch Elementmissbrauch vermeiden – die Praxis, ein strukturelles Element wegen seines stilistischen Effekts zu missbrauchen. Während beispielsweise in HTML blockquote- und table-Elemente Zitate und tabellarische Daten darstellen sollen, werden sie statt dessen häufig dazu verwendet, bestimmte visuelle Effekte wie Einrückung oder Ausrichtung zu erzeugen. Wenn spezielle Software wie Sprachsynthesizer auf derart falsch verwendete Elemente stößt, können die Ergebnisse für den Benutzer unverständlich oder gar unbrauchbar sein.

Stylesheets können allerdings nicht nur verhindern, dass Elemente, sondern auch, dass Bilder missbraucht werden: Manche Autoren verwenden zum Beispiel transparente (und damit unsichtbare) 1-Pixel-Bilder, um Inhalte zu positionieren. Dies bläst Dokumente nicht nur auf und vergrößert sie, sondern sorgt zudem dafür, dass sie langsam geladen werden und User-Agents, die nach alternativem Text (alt-Attribut) suchen, »irritiert« werden. CSS-Positionierungseigenschaften bedeuten, dass unsichtbare Bilder nicht länger benötigt werden, um die Positionierung zu kontrollieren.

CSS bietet genaue Kontrolle über Schriftgrößen, Farben und Stile. Einige Autoren verwenden Bilder, um Text in einer bestimmten Schrift darzustellen, wenn sie sich unsicher sind, ob die Schrift auf dem Client-Rechner installiert ist. Text in Bildern ist weder Spezialsoftware wie Screenreadern zugänglich, noch kann er von Suchrobotern erfasst werden. »Web Fonts« in CSS erlauben Benutzern größere Kontrolle über die clientseitigen Schriftinformationen, um dieses Problem zu beseitigen. Mit »Web Fonts« können sich Autoren auf Fallback-Mechanismen seitens des Clients verlassen, wenn die vom Autor bevorzugten Schriften nicht verfügbar sein sollten. Schriften können über die Client-Software mit größerer Genauigkeit ersetzt werden und sogar aus dem Internet heruntergeladen werden, je nachdem, wie es der Autor festgelegt hat.

CSS erlaubt es Benutzern, Autorenzuweisungen aufzuheben. Dies ist wichtig für Benutzer, die eine Seite nicht mit den vom Autor gewählten Schriften und Farben wahrnehmen können. CSS gestattet es Benutzern auch, Dokumente mit ihren bevorzugten Schriften, Farben &c. zu betrachten, indem sie diese in einem Nutzer-Stylesheet spezifizieren.

CSS unterstützt automatisch generierte Zahlen, Markierer und andere Inhalte, die Benutzern dabei helfen können, sich in einem Dokument zu orientieren. Lange Listen, Tabellen oder Dokumente sind leichter zu navigieren, wenn Zahlen oder andere kontextuelle Hinweise auf zugängliche Weise vorliegen.

CSS unterstützt auditive Stylesheets, die spezifizieren, wie ein Dokument klingen soll, wenn es in Sprache umgewandelt wird. Auditive Stylesheets (Kurzform: ACSS) gestatten es Autoren und Benutzern, die Lautstärke gesprochener Inhalte, Hintergrundklänge, räumliche Klangeigenschaften und eine Menge weiterer Eigenschaften zu spezifizieren, die synthetischer Sprache Effekte hinzufügen können, die analog zu denen sind, die Schriften bei der visuellen Ausgabe zugeordnet werden können.

CSS bietet exaktere Kontrolle über die Anzeige alternativer Inhalte, als HTML dies allein kann. CSS-2-Selektoren erlauben Zugriff auf Attributswerte, was dazu verwendet werden kann, alternative Inhalte anzubieten. Mit CSS 2 können Attributswerte in einem Dokument zusammen mit den Primärinhalten eines Elements gerendert werden.

CSS-Implementierungen

Zum Zeitpunkt der Veröffentlichung dieser Anmerkung wurde CSS von den weit verbreiteten Browsern noch nicht konsistent implementiert. Die jüngste Generation von Browsern weist jedoch eine solide Implementierung eines Großteils von CSS 1 und vielem von CSS 2 auf, und die Implementierungen scheinen zunehmend besser zu werden.

Die Vorteile der in diesem Dokument beschriebenen Merkmale und Eigenschaften gibt es nicht ohne eine saubere Implementierung von CSS 1 und CSS 2. Ein zugängliches Dokument mit CSS zu entwerfen beinhaltet es, sicherzustellen, dass das Dokument zugänglich bleibt, wenn Stylesheets deaktiviert oder nicht unterstützt werden.

Entwickler dürfen zugängliche Dokumente kreieren, die verbreitete Eigenschaften von CSS mit präsentationsbezogenen Merkmalen von HTML mischen, bis die meisten Browser CSS konsistent unterstützen. Dokumente, die solche präsentationsbezogenen HTML-Merkmale verwenden, müssen leicht umwandelbar sein – zum Beispiel müssen für Layoutzwecke gebrauchte Tabellen Sinn machen, wenn sie seriell gerendert werden.

Accessibility-Eigenschaften in CSS 2

Es folgt nun eine Liste von CSS-2-Eigenschaften (und den Abschnitten, in denen sie in der CSS-2-Spezifikation definiert werden), die die Barrierefreiheit betreffen. Die im Anschluss folgenden Sektionen zeigen auf, wie genau diese Eigenschaften Einfluss auf die Barrierefreiheit haben.

Abstände, Ausrichtung und Positionierung

text-indent (16.1); text-align (16.2); word-spacing und letter-spacing (16.4); font-stretch, (15.2.3); margin, margin-top, margin-right, margin-bottom und margin-left (8.3); float (9.5.1), position (9.3.1); top, right, bottom und left (9.3.2); empty-cells (17.6.1)

Überschreiben von Stilzuweisungen durch den Benutzer

!important (6.4.1); der inherit-Wert (6.2.1); Systemschriften (15.2.5); Systemfarben (18.2); Listenarten (12.6.2); dynamische Konturen (outline, outline-width, outline-style und outline-color) (18.4)

Generierte Inhalte

:before- und :after-Pseudoelemente (5.12.3, 12.1); content (12.2); cue, cue-before und cue-after (19.5)

Auditive Stylesheets

volume (19.2); speak (19.3); pause, pause-before und pause-after (19.4); cue, cue-before, cue-after (19.5); play-during (19.6); azimuth, elevation (19.7); speech-rate, voice-family, pitch, pitch-range, stress und richness (19.8); speak-punctuation und speak-numeral (19.9)

Zugriff auf alternative Inhalte

Attributselektoren (5.8); die Funktion attr() (12.2)

Web Fonts

Beachten Sie Kapitel 15 der CSS-2-Spezifikation.

Abstände, Ausrichtung und Positionierung

CSS 2 ermöglicht es Autoren, die visuelle Platzierung von Inhalten auf einer Seite durch Texteinrückung, Außenabstände, Floats sowie absolute und relative Positionierung zu steuern. Indem für visuelle Effekte CSS-Eigenschaften verwendet werden, können Autoren einfacheres HTML schreiben und ehemals für Positionierung gebrauchte Bilder und nicht-umbrechende Leerzeichen ( ) vermeiden.

Die folgenden Eigenschaften geben die Kontrolle über Abstände, Ausrichtung und Positionierung:

• text-indent, text-align, word-spacing, letter-spacing, font-stretch. Jede dieser Eigenschaften gestattet es, Abstände zu kontrollieren, ohne zusätzliche Leerzeichen hinzuzufügen. Anstatt zum Beispiel »H A L L O« zu schreiben (was Benutzer in der Regel als das Wort »hallo« erkennen, während Benutzer von Spracherkennungswerkzeugen die einzelnen Buchstaben hören würden), können Autoren denselben visuellen Effekt über die auf »HALLO« angewandte letter-spacing-Eigenschaft erzielen (Anmerkung des Übersetzers: Es erscheint an dieser Stelle ebenso empfehlenswert, »HALLO« nicht in Großbuchstaben zu schreiben, sondern hierfür statt dessen die text-transform-Eigenschaft anzuwenden).
• margin, margin-top, margin-right, margin-bottom, margin-left. Mit diesen Eigenschaften können Autoren Abstände auf allen vier Seiten eines Elements erzielen, ohne nicht-umbrechende Leerzeichen ( ) zu gebrauchen. Diese Leerzeichen sind kein standardkonformer Weg, um um ein Element herum Platz zu schaffen.
• float, position, top, right, bottom, left. Mit diesen Eigenschaften kann die Position von nahezu jedem Element bestimmt werden, und das unabhängig davon, wo das Element in einem Dokument erscheint. Autoren sollten Dokumente grundsätzlich so entwerfen, dass sie auch ohne Stylesheets Sinn ergeben (das heißt, dass das Dokument in einer »logischen« Reihenfolge verfasst wird), um dann Stylesheets zu verwenden, die die visuellen Effekte bestimmen. Die Positionierungseigenschaften können dazu verwendet werden, um Randhinweise (die automatisch nummeriert werden), Seitenleisten, frameähnliche Effekte, einfache Seitenköpfe und -füße &c. zu kreieren.
• Die empty-cells-Eigenschaft ermöglicht es, Tabellenzellen leer zu lassen und sie auf dem Bildschirm oder auf Papier dennoch mit einem Rahmen zu versehen. Eine Datenzelle, die leer sein soll, sollte nicht mit Leerraum oder nicht-umbrechenden Leerzeichen gefüllt werden, nur um eine bestimmte visuelle Darstellung zu erzielen.

Überschreiben von Stilzuweisungen durch den Benutzer

Um sicherzustellen, dass Benutzer CSS-Zuweisungen kontrollieren können, wurde die Bedeutung des in CSS 1 definierten !important-Operators in CSS 2 verändert. In CSS 1 hatten Autoren immer das letzte Wort, was Stilangaben anbelangte, aber in CSS 2 überwiegt jede in einem Nutzer-Stylesheet mit !important versehene Deklaration entsprechende Zuweisungen in einem Autoren-Stylesheet. Dies ist ein wichtiges Merkmal für Benutzer, die bestimmte Farbkombinationen oder -kontraste erfordern oder meiden müssen, oder solche, die große Schriften benötigen &c. So zum Beispiel spezifiziert die folgende Regel eine große Schriftgröße für Absätze, was jede analoge Autorenzuweisung aufheben würde:

p {
  font-size: 24pt !important;
}

Der CSS-2-Wert inherit, der für jede Eigenschaft verfügbar ist, sorgt für kompakte !important-Stilregeln, die das Meiste oder gar alles in einem Dokument regeln können. Die folgenden Regeln erzwingen beispielsweise, dass alle Hintergrundfarben weiß und alle Vordergrundfarben schwarz sind:

/*
Setzt innerhalb des Dokuments die
Schriftfarbe auf schwarz und die
Hintergrundfarbe auf weiß.
*/

body {
  color: black !important;
  background: white !important;
}

/*
Sorgt dafür, dass die Werte von
»color« und »background« von allen
anderen Elementen geerbt werden,
verstärkt durch !important.
Beachten Sie, dass dies durch
andere, spezifischere Zuweisungen
überschrieben werden kann.
*/

* {
  color: inherit !important;
  background: inherit !important;
}

CSS 2 beinhaltet auch die folgenden Nutzerkontrollfunktionen:

• Systemfarben (für den Gebrauch mit color, background-color, border-color und outline-color) und -schriften (für font) bedeuten, dass Benutzer ihre Systemfarben und Schriftpräferenzen auch auf Webdokumente anwenden können.
• Dynamische Konturen (outline-Eigenschaft) gestatten es Benutzern (zum Beispiel mit schlechter Sehkraft), Außenlinien um Inhalte zu setzen, die nicht das Layout berühren, sondern nur Informationen hervorheben.

Um zum Beispiel eine dicke schwarze Linie um ein Element zu ziehen, wenn es den Fokus erhält, und eine dicke rote, wenn es aktiv ist, können die folgenden Regeln verwendet werden:

:focus {
  outline: thick solid black;
}

:active {
  outline: thick solid red;
}

Generierte Inhalte

CSS 2 umfasst einige Mechanismen, die es ermöglichen, dass Inhalte von Stylesheets erzeugt werden:

• Die Pseudoelemente :before und :after sowie die content-Eigenschaft. Wenn sie zusammen verwendet werden, erlauben sie Autoren, Markierer (zum Beispiel Zähler und Zeichenketten wie »Ende des Beispiels« in den Beispielen unten) vor oder nach dem Inhalt eines Elements einzufügen.
• Die cue-, cue-before- und cue-after-Eigenschaften. Diese Eigenschaften erlauben es Benutzern, bestimmte Klänge vor oder nach dem Inhalt eines Elements abzuspielen.
• Listenstile, die aus Zahlen, Zeichen oder Bildern bestehen können (und in HTML üblicherweise mit dem li-Element assoziiert werden). CSS 2 ergänzt die in CSS 1 definierten Stile durch internationale Listenstile. Beachten Sie hierzu die list-style-type- und content-Eigenschaften.

Generierte Inhalte können als Markierer dienen, um Benutzern zu helfen, durch ein Dokument zu navigieren und sich zu orientieren, wenn sie nicht auf visuelle Hinweise wie die gegenwärtige Position der Scrollbalken, Frames mit einem Inhaltsverzeichnis &c. zugreifen können.

Das folgende Nutzer-Stylesheet würde die Worte »Ende des Beispiels« nach jedem mit einer speziellen Klasse versehenen Beispiel generieren:

div.example:after {
  content: 'Ende des Beispiels';
}

Benutzer können beispielsweise aber auch Absätze nummerieren, um ihre gegenwärtige Position in einem Dokument leichter zu ermitteln:

p:before {
  content: counter(paragraph) '. ';
  counter-increment: paragraph;
}

Auditive Stylesheets

Die auditiven Eigenschaften in CSS 2 bieten Benutzern, die nicht sehen können, und Benutzern von Screenreadern Informationen auf ähnliche Weise, wie Schriften Informationen visuell vermitteln. Das folgende Beispiel zeigt, wie verschiedene Klangzuweisungen (inklusive voice-family, was etwas wie eine »Audioschrift« ist) einen Benutzer wissen lassen können, dass die gesprochenen Inhalte einer Überschrift entsprechen:

h1 {
  voice-family: paul;
  stress: 20;
  richness: 90;
  cue-before: url(ping.au);
}

Die folgenden Eigenschaften sind Teil der auditiven Stylesheets in CSS 2.

• volume kontrolliert die Lautstärke gesprochenen Textes.
• speak steuert, ob Inhalte gesprochen werden, und falls ja, ob sie buchstabiert oder als einzelne Wörter gesprochen werden.
• pause, pause-before und pause-after kontrollieren Pausen vor oder nach vorgetragenen Inhalten. Dies ermöglicht es Benutzern, Inhalte zu trennen, was das Verständnis verbessern kann.
• cue, cue-before und cue-after spezifizieren, ob (und was für ein) Klang vor oder nach bestimmten Inhalten abgespielt wird, was hilfreich zur Orientierung sein kann (ähnlich einem visuellen Symbol).
• play-during kontrolliert Hintergrundklänge während des Rendern eines Elements (was in gewisser Weise einem Hintergrundbild nahekommt).
• azimuth und elevation bieten gewisse Klangdimensionen, was es Benutzern erlaubt, beispielsweise zwischen Stimmen zu unterscheiden.
• speech-rate, voice-family, pitch, pitch-range, stress und richness steuern die Qualität gesprochener Inhalte. Benutzer können feinjustieren, wie Inhalte tatsächlich auditiv präsentiert werden, indem sie diese Eigenschaften modifizieren.
• speak-punctuation und speak-numeral geben die Kontrolle darüber, wie Interpunktion oder Ziffern ausgesprochen werden, was einen gewissen Einfluss darauf hat, wie die Erfahrung des »auditiven Browsens« aussieht.

Darüber hinaus beschreibt die speak-header-Eigenschaft, wie Informationen in Tabellenköpfen ausgesprochen werden sollen.

Zugriff auf alternative Darstellungen von Inhalten

CSS 2 erlaubt Benutzern den Zugriff auf Alternativdarstellungen von Inhalten, die in Attributswerten hinterlegt sind, wenn die folgenden Selektoren, Pseudoelemente, Funktionen und Eigenschaften zusammen verwendet werden:

• Attributselektoren;
• die attr()-Funktion und die content-Eigenschaft;
• die Pseudoelemente :before und :after.

Im folgenden Beispiel wird der Wert des alt-Attributs des img-Elements (visuell, auditiv &c.) unmittelbar nach dem Bild gerendert:

img:after {
  content: attr(alt);
}

Beachten Sie, dass der Wert des Attributs (sofern definiert) dargestellt wird, auch wenn das Bild vielleicht nicht sichtbar ist, wenn der Benutzer beispielsweise die Anzeige von Bildern über die Benutzeroberfläche deaktiviert hat.

Medientypen

Die CSS-2-Medientypen (unter anderem gebraucht über @media-Regeln) gestatten es Autoren und Benutzern, Stylesheets zu entwerfen, die dafür sorgen, dass Dokumente je nach avisiertem Endgerät angemessen gerendert werden. Diese Stylesheets können die Darstellung von Dokumenten auf Sprachsynthesizern, Braille- oder TTY-Geräten optimieren. Die Verwendung von @media-Regeln kann dadurch, dass es User-Agents ermöglicht wird, ungeeignete Regeln zu ignorieren, zudem Downloadzeiten minimieren.

Über die Web Accessibility Initiative (WAI)

Die WAI des W3C bemüht sich durch fünf komplementäre Aktivitäten um die Barrierefreiheit im Internet. Diese Aktivitäten sollen:

1. Sicherstellen, dass Internettechnologien die Barrierefreiheit fördern;
2. Accessibility-Richtlinien erstellen;
3. Werkzeuge entwickeln, um die Evaluierung und Reparatur von Websites zu ermöglichen;
4. Fortbildung und Verbreitung koordinieren;
5. Forschung und Entwicklung betreiben.

Das internationale Planungsbüro der WAI ermöglicht die Annäherung von Industrie, Behindertenorganisationen, Organisationen aus der Forschung im Bereich Barrierefreiheit sowie Regierungen, die daran interessiert sind, ein zugängliches Internet zu schaffen. WAI-Sponsoren sind unter anderem die US National Science Foundation and Department of Education’s National Institute on Disability and Rehabilitation Research, das DG XIII Telematics for Disabled and Elderly Programme der Europäischen Kommission, das Telematics Applications Programme for Disabled and Elderly, die kanadische Regierung, Teile der kanadischen Industrie, IBM, Lotus und NCR.

Zusätzliche Informationen zur WAI sind unter https://www.w3.org/WAI/ verfügbar.

Über die Barrierefreiheitsrichtlinien der WAI

Barrierefreiheitsrichtlinien sind essentiell für die Entwicklung von Websites und internetbezogenen Anwendungen. Zusammen mit vielen weiteren Organisationen koordiniert die WAI die Arbeit an drei Arten von Richtlinien:

• Web Content Accessibility Guidelines 1.0 ([WAI-WEBCONTENT]) für zugängliche Websites;
• User Agent Accessibility Guidelines ([WAI-USERAGENT]) für zugängliche User-Agents (Browser, Multimedia-Software sowie damit verwendete assistive Technologien);
• Authoring Tool Accessibility Guidelines ([WAI-AUTOOLS]) für zugängliche Autorensoftware (Editoren, Seitenmanagementsoftware, Transformationswerkzeuge und Generatoren).

Über das World Wide Web Consortium (W3C)

Das W3C wurde gegründet, um das Internet zu seinem vollen Potential zu führen, indem verbreitete Protokolle entwickelt werden, die seine Entwicklung vorantreiben und Interoperabilität sicherstellen. Das W3C ist ein internationales Industriekonsortium, das gemeinsam vom MIT Laboratory for Computer Science (LCS) in den USA, dem National Institute for Research in Computer Science and Control (INRIA) in Frankreich und der Keio-Universität in Japan betrieben wird. Die vom Konsortium angebotenen Dienstleistungen umfassen ein Informationsdepot über das WWW sowohl für Entwickler als auch Benutzer, Referenz-Code-Implementierungen, um Standards abzubilden und voranzubringen, sowie diverse Prototypen und Beispielanwendungen, um den Gebrauch neuer Technologien zu demonstrieren. Aktuell sind mehr als 320 Organisationen Mitglieder des Konsortiums. Bitte beachten Sie https://www.w3.org/ für weitere Informationen über das W3C.

Referenzen

Eine Liste aktueller W3C-Empfehlungen sowie weiterer technischer Dokumente liegt unter https://www.w3.org/TR/ vor.

[CSS2]

Cascading Style Sheets, Level 2, B. Bos, H. W. Lie, C. Lilley und I. Jacobs, 17. Mai 1998.

[CSS1]

Cascading Style Sheets, Level 1, H. W. Lie und B. Bos, 17. Dezember 1996. Revidiert am 11. Januar 1999.

[HTML40]

HTML 4.0 Recommendation, D. Raggett, A. Le Hors und I. Jacobs, Herausgeber, 18. Dezember 1997. Revidiert am 24. April 1998.

[XML10]

Extensible Markup Language (XML) 1.0, T. Bray, J. Paoli, C.M. Sperberg-McQueen, Herausgeber, 10. Februar 1998.

[WAI-AUTOOLS]

Authoring Tool Accessibility Guidelines, J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, Herausgeber.

[WAI-WEBCONTENT]

Web Content Accessibility Guidelines 1.0, W. Chisholm, G. Vanderheiden und I. Jacobs, Herausgeber, 5. Mai 1999.

[WAI-USERAGENT]

User Agent Accessibility Guidelines, J. Gunderson und I. Jacobs, Herausgeber.