Auf dieser Webseite werden CSS-Techniken der Techniken für WCAG 2.0: Techniken und Fehler für WCAG 2.0 aufgelistet. Für Informationen zu den Techniken siehe Einführung in die Techniken für WCAG 2.0. Für eine Liste anderer Techniken lesen Sie das Inhaltsverzeichnis.
Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie die visuelle Erscheinung über Stylesheets verbessert werden kann, während gleichzeitig eine bedeutungstragende Darstellung beibehalten wird, wenn die Stylesheets nicht angewendet werden. Durch die Benutzung der Positionierungs-Eigenschaften von CSS2 können Inhalte an jeder Position im Ansichtsfenster des Benutzers angezeigt werden. Die Benutzung struktureller Elemente stellt sicher, dass die Bedeutung des Inhalts immer noch bestimmt werden kann, auch wenn die Formatierung nicht zur Verfügung steht.
In diesem Beispiel wurde strukturelles Markup (definition lists) auf den Inhalt angewendet. CSS wurde benutzt, um den Inhalt in Spaltenform zu formatieren. Jede Klasse positioniert den Inhalt in Spalten und die Ränder wurden auf 0 gesetzt, um das Standardverhalten von Benutzeragenten, HTML-Definitionslisten mit einem eingerückten DD-Element anzuzeigen, außer Kraft zu setzen.
Hier ist der anzuzeigende Inhalt:
Code-Beispiel:
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</dd>
</dt>
</dl>
</div>Hier ist das CSS, das die oben genannten Elemente positioniert und formatiert:
Code-Beispiel:
.item1 {
left: 0;
margin: 0;
position: absolute;
top: 7em;
}
.item2 {
left: 0;
margin: 0;
position: absolute;
top: 8em;
}
.item3 {
left: 0;
margin: 0;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0;
margin: 0;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}
Wenn Stylesheets angewendet werden, dann werden die Daten in den zwei Spalten „Products“ und „Locations angezeigt.“ Wenn die Stylesheets nicht angewendet werden, dann erscheint der Text in einer Definitionsliste, die Struktur und Lesereihenfolge beibehält.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für Inhalt, der CSS zur Positionierung benutzt
Entfernen Sie die Formatierungs-Informationen aus dem Dokument oder schalten Sie im Benutzeragenten die Benutzung von Stylesheets aus.
Prüfen Sie, ob die strukturellen Beziehungen und die Bedeutung des Inhalts erhalten bleiben.
Test #2 ist wahr
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Alle Techniken, die CSS unterstützen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, den Linktext zu ergänzen, indem zusätzlicher Text hinzugefügt wird, der die einzigartige Funktion des Links beschreibt, aber diesen zusätzlichen Text so zu formatieren, dass er auf dem Bildschirm von Benutzeragenten, die CSS unterstützen, nicht gerendert wird. Wenn die Informationen im umliegenden Kontext gebraucht werden, um den angezeigten Linktext zu interpretieren, stellt diese Technik eine komplette Beschreibung der Eingabefunktion des Links zur Verfügung, während sie es gleichzeitig erlaubt, dass der weniger vollständige Text angezeigt wird.
Die Technik funktioniert, indem ein CSS-Selektor erstellt wird, um Text anzuvisieren, der versteckt werden soll. Die für den Selektor festgelegte Regel platziert den zu versteckenden Text in einer 1-Pixel-Box mit „overflow hidden“ und positioniert den Text außerhalb des Ansichtsfensters. Dies stellt sicher, dass der Text nicht auf dem Bildschirm angezeigt wird, für assistierende Techniken wie beispielsweise Screenreader oder Braillezeilen aber barrierefrei bleibt. Beachten Sie, dass die Technik nicht visibility:hidden- oder display:none-Eigenschaften benutzt, da diese den ungewollten Effekt haben können, zusätzlich zur Vermeidung des Darstellung auf dem Bildschirm den Text vor assistierenden Techniken zu verstecken.
Anmerkung 1:Diese Technik zum Verstecken des Linktextes wurde von einigen Screenreader-Benutzern und Unternehmes-Webautoren befürwortet. Sie hat sich auf manchen Websites als effektiv erwiesen. Andere Screenreader-Benutzer und Barrierefreiheitsexperten empfehlen sie nicht als allgemeine Technik, da die Ergebnisse überaus wortreich sein können und die Fähigkeit erfahrener Screenreader-Benutzer, die Wortfülle zu steuern, einschränken können. Die Arbeitsgruppe glaubt, dass die Technik bei Webseiten nützlich sein kann, die keinen sich wiederholenden Inhalt in den versteckten Textbereichen haben.
Anmerkung 2: Diese Technik kann in Kombination mit einer Style-Switching-Technik benutzt werden, um eine Seite darzustellen, die eine konforme Alternativversion für nicht-konformen Inhalt ist. Für weitere Informationen lesen Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen und Konforme Alternativversionen verstehen.
Die folgenden Beispiele benutzen den/die unten festgelegte(n) CSS-Selektor und -Regel:
a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } Dieses Beispiel beschreibt eine Nachrichten-Site, die eine Reihe von kurzen Synopsen von Berichten enthält, gefolgt von einem Link der „full story“ lautet. Versteckter Linktext beschreibt des Zweck des Links.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body>
<p>Washington has announced plans to stimulate economic growth.
<a href="#"> <span>Washington stimulates economic growth </span>
Full Story</a></p>
</body>
</html>Dieses Beispiel beschreibt eine Ressource, die elektronische Bücher in unterschiedlichen Formaten hat. Auf den Titel jedes Buchs folgen Links, die „HTML“ und „PDF“ lauten. Versteckter Text beschreibt des Zweck jedes Links.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes anchor-Element, das diese Technik benutzt:
Prüfen Sie, ob ein Element definiert wurde, das seine Anzeige auf ein Pixel beschränkt und den Text außerhalb des Bildschirms mit „overflow hidden“ positioniert
Prüfen Sie, ob das Element der Klasse im Inhalt des anchor enthalten ist
Prüfen Sie, ob der kombinierte Inhalt des anchor den Zweck des Links beschreibt
Alle oben genannten Tests sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie die visuelle Erscheinung der Laufweite im Text über Stylesheets verbessert werden kann, während gleichzeitig eine sinnvolle Textabfolge beibehalten wird. Die CSS letter-spacing-Eigenschaft hilft Entwicklern, die Menge an Leerräumen zwischen Zeichen zu steuern. Dies wird dem Hinzufügen von Leerzeichen zur Kontrolle der Laufweite vorgezogen, da Leerzeichen die Bedeutung und Aussprache des Wortes verändern können.
Das folgende CSS würde in einer Überschrift der Ebene 2 zwischen jedes Zeichen ein einem Leerzeichen entsprechenden Platz hinzufügen:
Code-Beispiel:
h2
{
letter-spacing: 1em;
}So for the markup:
Code-Beispiel:
<h2>Museum</h2>the rendered result might look something like:
Code-Beispiel:
M u s e u mRessourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes Wort, das den Eindruck erweckt, keine standardmäßige Laufweite zwischen Zeichen zu haben:
Prüfen Sie, ob die CSS letter-spacing-Eigenschaft benutzt wurde, um die Laufweite zu steuern.
Test #1 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Jede Technik, die CSS benutzen kann, um Bilder einzuschließen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, einen Mechanismus zur Verfügung zu stellen, um rein dekorative Bilder und Bilder, die zur visuellen Formatierung benutzt werden, zum Webinhalt hinzuzufügen ohne dass zusätzliches Markup innerhalb des Inhalts erforderlich ist. Dies ermöglicht es assistierenden Techniken, den Nicht-text-Inhalt zu ignorieren. Einige Benutzeragenten können auf Wunsch des Benutzers hin CSS ignorieren oder ausschalten, so dass per CSS eingebundene Hintergrundbilder einfach „verschwinden“ und die Bildschirmeinstellungen, wie beispielsweise vergrößerte Schrift oder Einstellungen zum stärkeren Kontrast, nicht stören.
Hintergrundbilder können mit den folgenden CSS-Eigenschaften eingeschlossen werden:
background,
background-image,
content, combined with the :before and :after pseudo-elements,
list-style-image.
Anmerkung: Diese Technik ist für Bilder, die Informationen vermitteln oder Funktionen bereitstellen oder für jegliche Bilder, die eine bestimmte Sinneserfahrung schaffen, nicht geeignet.
Das Stylesheet für eine Webseite legt ein Hintergrundbild für die ganze Seite fest.
Code-Beispiel:
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
...Das Stylesheet für eine Webseite benutzt die CSS background-Eigenschaft, um dekorative Rollover-Effekte zu erschaffen, wenn ein Benutzer mit dem Mauszeiger über einem Link schwebt.
Code-Beispiel:
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}Das Styleseet für eine Webseite benutzt die CSS background-Eigenschaft, um abgerundete Ecken an Elementen zu erstellen.
Code-Beispiel:
…
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<cite><a href="http://example.com/">anonymous coward</a> from Elbonia</cite>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
The HTML 4.01 specification states that the background attribute of the body element is deprecated
Prüfen Sie, ob es dekorative Bilder gibt
Prüfen Sie, ob sie mit CSS eingebunden wurden
Wenn #1 wahr ist, dann ist #2 wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS
Die Technik bezieht sich auf:
Wenn die Schriftgröße in absoluten Maßeinheiten wie Punkt oder Pixel angegeben wird, dann verändern die Menübefehle zur Textgröße in Internet Explorer 7 und früher nicht die Textgröße.
Wenn der Modus Hoher Kontrast in den Einstellungen zur Barrierefreiheit unter Windows eingestellt wurde, dann vergrößert IE6 die Größe des Seitentextes so, als ob eine Änderung des Prozentanteils via CSS für das äußerste Fenster festgelegt worden wäre. Das Standard-CSS-Layout-Verhalten führt dazu, dass eine relative Skalierung vervielfacht wird, also ist die Skalierung von Text innerhalb von Elementen auf subtile Art unterschiedlich. Firefox und IE7 ändern die Skalierung von Inhalt basierend auf den Systemeinstellungen nicht so, dass sie das CSS-Layout beeinflussen, also tritt dieser Effekt in jenen Browsern nicht auf.
Das Ziel dieser Technik ist die proportionale Festlegung der Schriftgröße des Textes, so dass Benutzeragenten Inhalte effektiv skalieren können. Wenn eine Schriftgröße für das body-Element festgelegt wird, dann erben alle anderen Elemente diesen Wert, außer er wird von einem spezifischeren Selektor außer Kraft gesetzt.
Dieses Beispiel definiert die Schriftgröße für das strong-Element, so dass sein Text immer größer ist als der umliegende Text, egal in welchem Kontext es benutzt wird. Unter der Annahme, dass Überschriften und Absätze unterschiedliche Schriftgrößen benutzen, sind die hervorgehobenen Worte in diesem Beispiel alle größer als ihr umliegender Text.
Code-Beispiel:
strong {font-size: 120%}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie alle CSS-Eigenschaften, die Schriftgrößen für jede festgelegte Regel definieren.
Prüfen Sie, ob der Wert eine Prozentzahl ist.
Test #2 ist wahr
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS
Die Technik bezieht sich auf:
Wenn die Schriftgröße in absoluten Maßeinheiten wie Punkt oder Pixel angegeben wird, dann verändern die Menübefehle zur Textgröße in Internet Explorer 7 und früher die Textgröße nicht.
Das Ziel dieser Technik ist es, eine benannte Schriftgröße festzulegen, welche die gewünschte, relative Schriftgröße Schriftgröße ausdrückt. Diese Werte geben Hinweise, so dass Benutzeragenten eine Schriftgröße wählen können, die relativ zur zur geerbten Schriftgröße ist.
Dieses Beispiel wählt eine größere Schriftgröße für strong-Elemente aus, so dass ihr Text immer größer ist als der umliegende Text, egal in welchem Kontext sie benutzt werden. Unter der Annahme, dass Überschriften und Absätze unterschiedliche Schriftgrößen benutzen, sind die hervorgehobenen Worte in diesem Beispiel alle größer als ihr umliegender Text.
Code-Beispiel:
strong {font-size: larger}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie alle CSS-Eigenschaften, welche die Schriftgröße der festgelegten CSS-Regel definieren.
Prüfen Sie, ob der Wert xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller oder larger lautet.
Test #2 ist wahr
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS
Die Technik bezieht sich auf:
Im Internet Explorer 6 führt die Benutzung von ems bei Schriftgrößen dazu, dass der Text mehr wächst als bei der Benutzung von Prozentzahlen oder benannten Schriftgrößen. Also kann text-size/largest dazu führen, dass der Text um mehr als 200% wächst und es Beschneidungsprobleme gibt.
Wenn die Schriftgröße in absoluten Maßeinheiten wie Punkt oder Pixel angegeben wird, dann verändern die Menübefehle zur Textgröße in Internet Explorer 7 und früher die Textgröße nicht.
Internet Explorer 7 ändert die Textgröße nur, wenn die style-Regel, die für den Text gilt, innerhalb eines style-Elements definiert wird; wenn man inline styles benutzt, d.h. wenn man das style-Attribut eines Element benutzt, dann wird die Änderung der Textgröße nicht unterstützt.
Das Ziel dieser Technik ist es, die Schriftgröße des Textes in em-Einheiten zu definieren, so dass Benutzeragenten Inhalte effektiv skalieren können. Da em eine Eigenschaft von Zeichensatz ist, skaliert es, wenn der Zeichensatz seine Größe ändert. Wenn eine Schriftgröße für das body-Element festgelegt wird, dann erben alle anderen Elemente diesen Wert, außer er wird von einem spezifischeren Selektor außer Kraft gesetzt.
Dieses Beispiel definiert die Schriftgröße für das strong-Element, so dass sein Text immer größer ist als der umliegende Text, egal in welchem Kontext es benutzt wird. Unter der Annahme, dass Überschriften und Absätze unterschiedliche Schriftgrößen benutzen, sind die fetten Worte in diesem Beispiel alle größer als ihr umliegender Text.
Code-Beispiel:
strong {font-size: 1.6em}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size. </p>
…Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie alle CSS-Eigenschaften, die Schriftgrößen für jede festgelegte Regel definieren.
Prüfen Sie, ob der Wert in em-Einheiten ausgedrückt wird.
Test #2 ist wahr
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS, HTML und XHTML
Die Technik bezieht sich auf:
Internet Explorer 6.0 und früher unter Windows unterstützt dynamische Pseudo-Klassen für Elemente mit Ausnahme von Hyperlinks nicht. Internet Explorer 7 unterstützt keine :focus styles bei Elementen mit Ausnahme von Hyperlinks. Fügen Sie die :active CSS -Pseudo-Klasse ein, um den gleichen Effekt wie :focus in Internet Explorer für (X)HTML-Links (ein Element) zu erreichen.
Firefox 1.5, Firefox 2.0 und SeaMonkey 1.1 für Windows unterstützen dynamische Pseudo-Klassen für Text-Eingabefelder, Text Areas, Radiobuttons, Kontrollkästchen, Select-Elemente, Absenden-/Zurücksetzen-Schaltflächen und Button-Elemente. Allerdings wird das Einstellen unterschiedlicher Farben oder Umrandungen, wenn ein Radiobutton oder ein Kontrollkästchen den Fokus erhält, nicht unterstützt.
Opera 9.02 für Windows unterstützt dynamische Pseudo-Klassen für Text-Eingabefelder, Text Areas, Radiobuttons, Kontrollkästchen, Select-Elemente und Absenden-/Zurücksetzen-Schaltflächen, nicht aber für Button-Elemente.
Firefox 2.0, Opera 9.02 und SeaMonkey 1.1 für Windows unterstützen außerdem benachbarte Sibling-Selektoren für Formularbeschriftungen. Firefox 1.5, Internet Explorer 6.0 und frühere Versionen für Windows unterstützen keine benachbarten Sibling-Selektoren für Formularbeschriftungen.
Das Ziel dieser Technik ist es zu zeigen, wie die visuelle Erscheinung via Stylesheets verbessert werden kann, um eine visuelle Rückmeldung zu geben, wenn ein interaktives Element den Fokus hat oder wenn ein Benutzer mit einem Zeigewerkzeug darüber schwebt. Die Hervorhebung des Elements, das den Fokus hat oder über dem man schwebt, kann Informationen geben wie zum Beispiel die Tatsache, dass das Element interaktiv ist oder aber den Anwendungsbereich des interaktiven Elements.
Die Bereitstellung der visuellen Rückmeldung kann über mehr als einen Modus möglich sein. Normalerweise wird sie erzielt, indem man eine Maus benutzt, um über dem Element zu schweben oder eine Tastatur, um zu dem Element zu tabben.
In diesem Beispiel wurden Maus- und Tastatur-Fokus-Indikatoren auf die Link-Elemente angewendet. CSS wurde benutzt, um eine Hintergrundfarbe anzuwenden, wenn die Link-Elemente den Fokus erhalten.
Hier ist der anzuzeigende Inhalt:
Code-Beispiel:
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">Services</a></li>
<li class="page_item"><a href="/projects">Projects</a></li>
<li class="page_item"><a href="/demos">Demos</a></li>
<li class="page_item"><a href="/about-us">About us</a></li>
<li class="page_item"><a href="/contact-us">Contact us</a></li>
<li class="page_item"><a href="/links">Links</a></li>
</ul>Hier ist das CSS, das die Hintergrundfarbe für die oben genannten Elemente ändert, wenn die den Maus- oder Tastatur-Fokus erhalten:
Code-Beispiel:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}In diesem Beispiel wird die :focus Pseudo-Klasse Benutzt, um die Formatierung, die auf Eingabefelder angewendet wird, wenn sie den Fokus erhalten, zu ändern, indem die Hintergrundfarbe geändert wird.
Code-Beispiel:
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00;
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6;
color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
Hier ist ein funktionierendes Beispiel dieses Codes: Example of highlighting elements that receive focus (Beispiel zur Hervorhebung von Elementen, die den Fokus erhalten).
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes Element, das den Fokus erhalten kann:
Schweben Sie über dem Element, indem Sie eine Maus benutzen.
Prüfen Sie, ob sich die Farbe des Hintergrunds oder des Rahmens ändert.
Bewegen Sie die Maus von dem Objekt weg bevor Sie den Tastatur-Fokus ausprobieren.
Benutzen Sie eine Tastatur und gehen Sie per Tab zu dem Element.
Prüfen Sie, ob sich die Farbe des Hintergrunds oder des Rahmens ändert.
Prüfen sie, die Farbänderungen des Hintergrunds oder des Rahmens zurückgesetzt werden, wenn das Element den Fokus verliert.
Tests #2, #5 und #6 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
(X)HTML, CSS
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es sicherzustellen, dass sich text-basierte Formular-Steuerelemente in der Größe verändern, wenn die Textgröße im Benutzeragenten geändert wird. Dies erlaubt es Benutzern, Text einzugeben und zu lesen, was sie in Eingabefelder eingegeben haben, weil der Text in der vom Benutzer gewünschten Größe angezeigt wird.
Text-basierte Formular-Steuerelemente beinhalten sowohl Eingabefelder (Text und Textarea) als auch Buttons.
Ein Nehmen-Sie-Kontakt-mit-uns-auf-Formular hat einige einleitende Informationen und dann Formular-Steuerelemente, damit Benutzer ihren Vornamen, Nachnamen, Telefonnummer und E-Mail-Adresse eingeben können. Der gesamte Text und alle Formular-Steuerelemente wurden auf skalierbare Art implementiert. Dies beinhaltet die Festlegung einer Schriftgröße für die Formular-Steuerelemente selber, da die Schriftgröße im Internet Explorer nicht geerbt wird.
Die XHTML-Komponente:
Code-Beispiel:
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />Die CSS-Komponente :
Code-Beispiel:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }Hier ist ein funktionierendes Beispiel dieses Codes: Example of resizing input with CSS (Beispiel zur Änderung der Größe von Eingaben mit CSS).
Dieses Beispiel funktioniert in IE mit seiner Textgrößen-Funktion. Allerdings skaliert es nicht in Firefox 2.0.
Die XHTML-Komponente:
Code-Beispiel:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />Die CSS-Komponente :
Code-Beispiel:
input.geomsize {
width: 1.2em;
height: 1.2em;}Hier ist ein funktionierendes Beispiel dieses Codes: Example of resizing radio buttons and checkboxes with CSS (Beispiel zur Größenänderung von Radiobuttons und Kontrollkästchen mit CSS).
Geben Sie Text in text-basierte Formular-Steuerelemente, die vom Benutzer eingegebenen Text erhalten, ein.
Vergrößern Sie die Textgröße um 200%.
Prüfen Sie, ob sich der Text in den text-basierten Formular-Steuerelementen um 200% vergrößert hat.
#3 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
Auf der Microsoft Windows Plattform benutzen Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 im „quirks mode“ und Internet Explorer 7 im „quirks mode“ ein „box model“, das von den CSS-Spezifikationen des W3C abweicht: in diesen Browser-Versionen erhöht der rechte und linke Innenabstand (padding) und der rechte und linke Rahmen nicht die gesamte Breite eines Elements, so dass der Raum für den Inhalt innerhalb eines solchen Elements enger ist. (Dieses Verhalten ist bekannt als „box model bug“.) Internet Explorer 5.5 unter Mac OS und Internet Explorer 6 und 7 unter Windows im „standards compliant mode“ benutzen das in den CSS-Spezifikationen des W3C definierte „box model“.
Webdesigner benutzen manchmal Platzhalter-Bilder (normalerweise 1x1 Pixel große, transparente GIFs) zur besseren Kontrolle über das Layout, zum Beispiel in Tabellen oder um einen Absatz einzurücken. Cascading Style Sheets (CSS) ermöglichen allerdings eine ausreichende Kontrolle über das Layout, um damit Platzhalter-Bilder zu ersetzen. Die CSS-Eigenschaften für Ränder und Innenabstand können alleine oder in Kombination benutzt werden, um das Layout zu steuern. Die margin-Eigenschaften ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' und in Kurzschrift 'margin') können bei jedem Element benutzt werden, das als Block angezeigt wird; sie fügen Platz außerhalb eines Elements hinzu. Die padding-Eigenschaften ('padding-top', 'padding-right', 'padding-bottom', 'padding-left' und in Kurzschrift 'padding') können bei jedem Element benutzt werden; sie fügen Platz innerhalb des Elements hinzu.
Das folgende Beispiel besteht aus zwei Teilen: dem CSS-Code, der einen Rand auf allen Seiten der Tabelle und einen Innenabstand für die Tabellenzellen festlegt; und dem HTML-Code für die Tabelle, der keine Platzhalter-Bilder benutzt und nicht innerhalb einer anderen Tabelle verschachtelt ist.
Code-Beispiel:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für diese Technik gibt es keine Tests.
Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
Diese Technik beschreibt, wie man Textblöcke links oder rechts ausrichtet, indem man die CSS text-align-Eigenschaft festlegt.
Im folgenden Beispiel wird der Text links ausgerichtet. Definieren Sie die Klasse im Stylesheet:
Code-Beispiel:
p.left {text-align: left}Rufen Sie die Klasse im Inhalt auf.
Code-Beispiel:
<p class="left"> Lorem ipsum dolor sit …</p>Im folgenden Beispiel wird der Text rechts ausgerichtet.
Code-Beispiel:
p.right {text-align: right}Rufen Sie die Klasse im Inhalt auf.
Code-Beispiel:
<p class="right"> Lorem ipsum dolor sit …</p>Prüfen Sie, ob der Text entweder links oder rechts ausgerichtet ist.
Test #1 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS
Die Technik bezieht sich auf:
Der Zweck dieser Technik ist es sicherzustellen, dass CSS auf eine Art und Weise benutzt wird, die es Benutzern erlaubt, Inhalt auf eine solche Art anzusehen, dass die Zeilenlänge durchschnittlich 80 Zeichen oder weniger betragen kann. Dies ermöglicht es Benutzern mit bestimmten Lese- oder Sehbehinderungen, die Probleme damit haben, an der richtigen Stelle zu bleiben, wenn sie lange Textzeilen lesen, den Inhalt effizienter anzusehen und mit ihm effizienter zu interagieren. Diese Technik erlaubt es auch, dass die Spaltenbreite größer wird, wenn sich die Schriftgröße vergrößert, was die Gefahr verringert, dass Beschneidungen auftreten, wenn sich die Textgröße vergrößert.
Beachten Sie, dass diese Technik nicht vom Autor verlangt, CSS zu benutzen, um die Breite von Textzeilen auf 80 Zeichen oder weniger in der Standardansicht zu begrenzen. Vielmehr hilft die Empfehlung, relative Maße in CSS-Layouts zu benutzen, sicherzustellen, dass Autoren Spaltenbreiten nicht auf eine solche Art festlegen, dies es für Benutzer unmöglich machen, Inhalte mit Zeilenlängen von 80 Zeichen oder weniger anzusehen.
In diesem Beispiel wird die div-Breite in ems im Stylesheet festgelegt.
Anmerkung: Die CSS-Eigenschaft max-width wird in Versionen von Internet Explorer 6 und niedriger nicht unterstützt.
Code-Beispiel:
#main_content {max-width: 70em}Der Textblock würde innerhalb des div im Inhalt platziert
Code-Beispiel:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>In diesem Beispiel wird die div-Breite in Prozent im Stylesheet festgelegt
Code-Beispiel:
#main_content {width: 90%}Der Textblock würde innerhalb des div im Inhalt platziert
Code-Beispiel:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Testen Sie um zu sehen, ob die Spalten in einer relativen Einheit definiert wurden.
Prüfen Sie, ob die Zeilenlänge auf 80 Zeichen oder weniger eingestellt werden kann, indem Sie das Browser-Fenster in der Größe verändern.
Tests #1 und #2 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
Viele Menschen mit kognitiven Behinderungen haben Probleme damit, Textzeilen zu folgen, wenn ein Textblock einen einfachen Zeilenabstand hat. Die Bereitstellung eines Abstands zwischen 1,5 bis 2 erlaubt es ihnen, eine neue Zeile leichter zu beginnen, sobald sie die vorhergehende beendet haben.
Das Element auf eine Zeilenhöhe von 1,5 einstellen. Legen Sie im Stylesheet die Charakteristika des Elements fest.
Code-Beispiel:
p { line-height: 150%; }Im Inhalt wird das Element nun das gesamte Dokument hindurch einen 1,5-fachen Zeilenabstand haben.
Code-Beispiel:
<p> Lorem ipsum dolor sit … </p>Eine Klasse auf eine Zeilenhöhe von 1,5 einstellen (1,5-facher Zeilenabstand). Definieren Sie die Klasse im Stylesheet.
Code-Beispiel:
p.tall {line-height:150%}Rufen Sie die Klasse im Inhalt auf.
Code-Beispiel:
<p class="tall"> Lorem ipsum dolor sit … </p>Eine Klasse auf einen 2-fachen Zeilenabstand festlegen. Definieren Sie die Klasse im Stylesheet.
Code-Beispiel:
p.tall {line-height:200%}Rufen Sie die Klasse im Inhalt auf.
Code-Beispiel:
<p class="tall"> Lorem ipsum dolor sit … </p>Öffnen Sie Inhalte in einem Browser.
Prüfen Sie, ob der Abstand zwischen Zeilen in Textblöcken zwischen 1,5 und 2 liegt.
Testverfahren #2 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie man CSS benutzen kann, um die visuelle Darstellung von Text zu kontrollieren. Dies erlaubt es Benutzer, die visuellen Charakteristika des Textes über den Benutzeragenten zu ändern, damit diese ihren Anforderungen entsprechen. Die Text-Charakteristika beinhalten Aspekte wie Größe, Farbe, Zeichensatz-Familie und relative Positionierung.
CSS kommt der Barrierefreiheit hauptsächlich durch die Trennung der Dokumentstruktur von der Präsentation zugute. Stylesheets wurden dazu entworfen, eine präzise Kontrolle über Zeichenabstand, Textausrichtung, Positionierung von Objekten auf der Seite, Audio- und Sprachausgabe, Zeichensatzcharakteristika usw. zu ermöglichen- und zwar außerhalb des Markups. Durch die Trennung der Gestaltung vom Markup können Autoren das Markup in ihren Inhalten vereinfachen und bereinigen, wodurch es gleichzeitig barrierefreier wird.
Text innerhalb von Bildern stellt verschiedene Probleme in Bezug auf die Barrierefreiheit dar, einschließlich der Unfähigkeit:
gemäß der Einstellungen im Browser skaliert zu werden
in Farben, die durch die Einstellungen im Browser oder durch Regeln in benutzerdefinierten Stylesheets festgelegt wurden, angezeigt zu werden
Betriebssystem-Einstellungen anzunehmen, wie beispielsweise hoher Kontrast
Es ist besser, echten Text für den Textanteil dieser Elemente zu benutzen und eine Kombination aus semantischem Markup und Stylesheets, um die entsprechende visuelle Darstellung zu erstellen. Damit dies erfolgreich funktioniert, wählen Sie Zeichensätze, die wahrscheinlich auf dem System des Benutzers zur Verfügung stehen und definieren sie Alternativ-Zeichensätze für Benutzer, die den ersten angegebenen Zeichensatz möglicherweise nicht haben. Neuere Maschinen und Benutzeragenten glätten oft den gesamten Text oder benutzen Kantenglättung, also ist es wahrscheinlich, dass Ihre Überschriften und Schaltflächen auf diesen Systemen gut aussehen, ohne dass man auf Bilder eines Textes zurückgreifen muss.
Die folgenden CSS-Eigenschaften sind nützlich, um Text zu formatieren und die Notwendigkeit für Text in Bildern zu umgehen:
Die font-family-Eigenschaft wird benutzt, um den Code-Aspekt in einer nichtproportionalen Zeichensatzfamilie anzuzeigen.
Die text-align-Eigenschaft wird benutzt, um den Text rechts vom Ansichtsfenster anzuzeigen.
Die font-size-Eigenschaft wird benutzt, um Text in einer größeren Größe anzuzeigen.
Die font-style-Eigenschaft wird benutzt, um Text in Kursivschrift anzuzeigen.
Die font-weight-Eigenschaft wird benutzt um festzulegen, wie dick oder dünn Zeichen im Text angezeigt werden sollten.
Die color-Eigenschaft wird benutzt, um die Farbe von Text oder Textcontainern anzuzeigen.
Die line-height-Eigenschaft wird benutzt, um die Zeilenhöhe für einen Textblock anzuzeigen.
Die text-transform-Eigenschaft wird benutzt, um die Groß- und Kleinschreibung von Buchstaben im Text zu steuern.
Die letter-spacing-Eigenschaft wird benutzt, um die Spationierung von Buchstaben im Text zu steuern.
Die background-image-Eigenschaft kann benutzt werden, um Text auf einem Nicht-Text-Hintergrund anzuzeigen.
Die first-line-Pseudo-Klasse kann benutzt werden, um die Darstellung der ersten Zeile in einem Textblock zu verändern.
Die :first-letter-Pseudo-Klasse kann benutzt werden, um die Darstellung des ersten Buchstabens in einem Textblock zu verändern.
Die :before- und :after-Pseudo-Klassen können benutzt werden, um dekorativen Nicht-Text-Inhalt vor oder nach Textblöcken einzufügen.
Die XHTML-Komponente:
Code-Beispiel:
<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>Die CSS-Komponente :
Code-Beispiel:
code { font-family:"Courier New", Courier, monospace }Die XHTML-Komponente:
Code-Beispiel:
<p class="right">This text should be to the right of the viewport.</p> Die CSS-Komponente :
Code-Beispiel:
.right { text-align: right; }Die XHTML-Komponente:
Code-Beispiel:
<p>09 <strong class="largersize">March</strong> 2008</p> Die CSS-Komponente :
Code-Beispiel:
strong.largersize { font-size: 1.5em; }Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.
Die XHTML-Komponente:
Code-Beispiel:
<p>09 <em class="highlight">March</em> 2008</p> Die CSS-Komponente :
Code-Beispiel:
.highlight{ color: red; }Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.
Die XHTML-Komponente:
Code-Beispiel:
<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology
Blog</a>.</p>Die CSS-Komponente :
Code-Beispiel:
.featuredsite{ font-style:italic; }Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.
Die XHTML-Komponente:
Code-Beispiel:
<p>This deal is available <span class="highlight">now!</span></p> Die CSS-Komponente :
Code-Beispiel:
.highlight { font-weight:bold; color:#990000; }Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.
Die XHTML-Komponente:
Code-Beispiel:
<p>09 <span class="caps">March</span> 2008</p> Die CSS-Komponente :
Code-Beispiel:
.caps { text-transform:uppercase; }Die CSS line-height-Eigenschaft wird benutzt, um die Zeilenhöhe für den Absatz in zweifacher Höhe des Zeichensatzes anzuzeigen.
Die XHTML-Komponente:
Code-Beispiel:
<p>Concern for man and his fate must always form the<br />
chief interest of all technical endeavors. <br />
Never forget this in the midst of your diagrams and equations. </p>Die CSS-Komponente :
Code-Beispiel:
p { line-height:2em; }Die CSS line-height-Eigenschaft wird benutzt, um die Zeilenhöhe für den Text in weniger als der Höhe des Zeichensatzes anzuzeigen. Die zweite Zeile des Textes ist nach der ersten Zeile des Textes positioniert und erscheint visuell als ob die Teil der ersten Zeile aber ein wenig abgesunken wäre.
Die XHTML-Komponente:
Code-Beispiel:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>Die CSS-Komponente :
Code-Beispiel:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }Die CSS letter-spacing-Eigenschaft wird benutzt, um die Buchstaben in der Überschrift weiter voneinander entfernt anzuzeigen.
Die XHTML-Komponente:
Code-Beispiel:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>Die CSS-Komponente :
Code-Beispiel:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }Die CSS letter-spacing-Eigenschaft wird benutzt, um die Buchstaben in der zweiten Textzeile näher aneinander anzuzeigen.
Die XHTML-Komponente:
Code-Beispiel:
<h1 class="upper2">News</h1>Die CSS-Komponente :
Code-Beispiel:
.upper2 { text-transform:uppercase; letter-spacing:1em; }Die CSS font-style-Eigenschaft wird benutzt, um die Text-Komponente eines Banners anzuzeigen und die background-image-Eigenschaft wird benutzt, um ein Bild hinter dem Text anzuzeigen.
Die XHTML-Komponente:
Code-Beispiel:
<div id="banner"><span id="bannerstyle1">Welcome</span>
<span id="bannerstyle2">to your local city council</span></div>Die CSS-Komponente :
Code-Beispiel:
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}Die CSS :first-line-Pseudo-Klasse wird benutzt, um die erste Textzeile in einem größeren, roten Zeichensatz anzuzeigen.
Die XHTML-Komponente:
Code-Beispiel:
<p class="startline">Once upon a time...<br />
...in a land far, far away... </p> Die CSS-Komponente :
Code-Beispiel:
.startline:first-line { font-size:2em; color:#990000; }Die CSS :first-letter-Pseudo-Klasse wird benutzt, um den ersten Buchstaben in einer größeren Schriftgröße, in rot und zentriert anzuzeigen.
Die XHTML-Komponente:
Code-Beispiel:
<p class="startletter">Once upon a time...</p> Die CSS-Komponente :
Code-Beispiel:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob CSS-Eigenschaften benutzt wurden, um die visuelle Darstellung von Text zu steuern
Test #1 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Seiten, die CSS benutzen.
Die Technik bezieht sich auf:
Die meisten Browser erlauben es dem Benutzer, die Farbeinstellungen zu ändern, um die CSS- und HTML-Farbschemata der Webseite außer Kraft zu setzen. Dies wird in allen Versionen von Internet Explorer, Firefox, Mozilla, Netscape und Opera ab Version 6 unterstützt.
Wenn festgelegte Farben in Netscape und Firefox-Versionen vor Firefox 3.0 außer Kraft gesetzt werden, werden die meisten Javascript Pop-Up-Felder und Dropdown-Menüs unbrauchbar. Pop-Up-Felder erhalten einen transparenten Hintergrund, so dass der Text des Feldes den Text auf der Seite überlagert und Dropdown-Menüs werden entweder transparent oder erhalten einen dunkelgrauen Hintergrund.
Internet Explorer 6 setzt Hintergrundfarben nicht außer Kraft, außer die gleiche Hintergrundfarbe wurde auch in den Systemeinstellungen ausgewählt.
In Safari gibt es keine Farbeinstellungen, also ist es nicht möglich, festgelegte Farben außer Kraft zu setzen. Ebenso zeigt Safari die Seite in schwarzem Text auf einem weißen Hintergrund an, wenn Farben nicht festgelegt werden, und ignoriert dabei jegliche Farbeinstellungen aus den Systemeinstellungen.
Einige Webseiten benutzen Farben, um unterschiedliche Gruppierungen zu kennzeichnen. Das Ziel dieser Technik ist, es Benutzern zu erlauben, bestimmte Farbkombinationen für den Text und den Hintergrund des Hauptinhaltes auszuwählen, während visuelle Hinweise zur Gruppierung und Struktur der Webseite erhalten bleiben. Wenn sich Benutzer über die Vorder- und Hintergrundfarben des gesamten Textes hinwegsetzen, dann kann es sein, dass visuelle Hinweise zur Gruppierung und Struktur der Webseite verloren gehen, was dazu führt, dass diese dann schwieriger zu verstehen und zu benutzen ist.
Wenn ein Autor die Farben für Text und Hintergrund des Hauptinhaltes nicht festlegt, dann ist es möglich, die Farben dieser Bereiche im Browser zu ändern, ohne dass es notwendig ist, die Farben mit einem Benutzer-Stylesheet außer Kraft zu setzen. Die Bestimmung der Text- und Hintergrundfarben von zweitrangigem Inhalt bedeutet, dass sich der Browser nicht über diese Farben hinwegsetzt.
Mit dieser Technik benutzt der Autor die standardmäßige Text- und Hintergrundfarbe des Hauptbereichs. Das hat zur Folge, dass die Farben komplett durch den Benutzeragenten über die Farbeinstellungen des Benutzers bestimmt werden. Der Benutzer kann sicherstellen, dass die Farbauswahl seine Bedürfnisse optimal erfüllt und die beste Lese-Erfahrung bereitstellt.
Eine HTML-Webseite benutzt CSS, um die Text- und Hintergrundfarben des gesamten sekundären Inhalts festzulegen, wie beispielsweise Navigationsleisten, Menüleisten und Inhaltsverzeichnis. Weder die Text- noch die Hintergrundfarbe des Hauptinhaltes wurde festgelegt. Der Benutzer stellt seine eigenen Farbeinstellungen im Browser ein, so dass er den Hauptinhalt in den Farben und mit dem Kontrast sieht, der für ihn am besten funktioniert. Die Unterscheidung zwischen separaten Bereichen der Seite nicht nach wie vor visuell offensichtlich.
Eine Musikzeitschrift hat einen Artikel mit blauem Text auf weißem Hintergrund. Die Site stellt in der Nähe des Beginns der Seite einen Link zur Verfügung, welcher der Seite ein unterschiedliches Stylesheet zuweist. In dem neuen Stylesheet wurden keine Farben für Text oder Hintergrund festgelegt.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Ändern Sie die Farben für Text, Links und Hintergrund in den Einstellungen des Browsers, so dass sie sich von der Standardfarbe und von den im sekundären Inhalt festgelegten Farben unterschieden.
Anmerkung: Wählen Sie nicht die Option, die dem Browser sagt, dass er die auf der Seite festgelegten Farben ignorieren soll.
Prüfen Sie, ob der Hauptinhalt die neuen Text-, Link- und Hintergrundfarben benutzt.
Prüfen Sie, ob die sich Farben des Textes, der Links und des Hintergrunds im sekundären Inhalt nicht geändert haben.
Tests #2 und #3 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Seiten, die CSS benutzen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist, es Benutzern zu ermöglichen, die Größe des Textes zu vergrößern, ohne dass sie horizontal scrollen müssen, um diesen Text zu lesen. Um diese Technik zu benutzen, legt der Autor die Breite des Textcontainers fest, indem er Prozentwerte benutzt.
Eine Zeitung hat Inhalt in der Mitte des Fensters. Die Breite des Containers für den Inhalt ist in Prozent der Seite angegeben, so dass der Text innerhalb des Browserfensters entsprechend der neuen Größe neu umbricht und sich keine Notwendigkeit ergibt, horizontal scrollen zu müssen, wenn eine Person mit niedrigem Sehvermögen die Schriftgröße vergrößert.
Prüfen Sie, ob alle Containerbreiten in Prozentwerten angegeben wurden.
Vergrößern Sie die Textgröße auf 200%.
Prüfen Sie um sicherzustellen, dass es nicht notwendig ist, horizontal zu scrollen, um irgendeine Textzeile zu lesen.
Prüfen Sie, ob der Text nach wie vor auf der Seite sichtbar ist.
Tests #1, #3 und #4 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Seiten, die CSS benutzen.
Die Technik bezieht sich auf:
Die meisten Browser erlauben es dem Benutzer, die Farbkonfiguration zu verändern, um damit die CSS- und HTML-Farbgebung des Autors außer Kraft zu setzen. Dies schließt IE, alle Versionen von Firefox, Mozilla und Opera nach Version 6 ein.
Wenn festgelegte Farben in Netscape und Firefox-Versionen vor Firefox 3.0 außer Kraft gesetzt werden, werden die meisten Javascript Pop-Up-Felder und Dropdown-Menüs unbrauchbar. Pop-Up-Felder erhalten einen transparenten Hintergrund, so dass der Text des Feldes den Text auf der Seite überlagert und Dropdown-Menüs werden entweder transparent oder erhalten einen dunkelgrauen Hintergrund.
Internet Explorer 6 setzt Hintergrundfarben nicht außer Kraft, außer die gleiche Hintergrundfarbe wurde auch in den Systemeinstellungen ausgewählt.
In Safari gibt es keine Farbeinstellungen, also ist es nicht möglich, festgelegte Farben außer Kraft zu setzen. Ebenso zeigt Safari die Seite in schwarzem Text auf einem weißen Hintergrund an, wenn Farben nicht festgelegt werden, und ignoriert dabei jegliche Farbeinstellungen aus den Systemeinstellungen.
Das Zweck dieser Technik ist es, Rahmen und Layout per CSS festzulegen und Text- und Hintergrundfarben gemäß der Browser- und/oder Betriebssystem-Einstellungen des Benutzers rendern zu lassen.(Lesen Sie bitte oben stehende Anmerkung in Bezug auf Safari). Dies erlaubt es Benutzern, den Text in den von ihnen benötigten Farben anzusehen, während andere Aspekte des Layouts und Seitendesigns wie beispielsweise Textspalten, Rahmen um Abschnitte herum oder vertikale Linien zwischen einem Menü und einem Hauptinhaltsbereich beibehalten werden. Es verhindert auch einige Darstellungsprobleme in einigen Browsern, wenn eine Seite Javascript Pop-Up-Boxen oder Aufklappmenüs enthält und die Farben außer Kraft gesetzt werden.
Rahmen- und Layout-Indikatoren helfen vielen Menschen mit kognitiven Behinderungen, genau wie es die Flexibilität über die Text- und Hintergrundfarben macht. Manchmal stehen diese beiden Bedürfnisse im Widerstreit, wenn der Benutzer die Auswahl des Autors für Text- und Hintergrundfarbe im Browser außer Kraft setzen muss und der Browser auch die Rahmen und das beabsichtigte Layout entfernt. Dies kann bedeuten, dass die Seite in einer einzigen Spalte mit einem Inhaltsblock unter dem anderen angezeigt wird, was zu unnötigen weißen Flächen (whitespace) und langen Textzeilen führen kann. Es kann außerdem bedeuten, dass Pop-Up-Boxen einen transparenten Hintergrund bekommen und so der Text der Box den Text der Seite überlagert; und Aufklappmenüs werden entweder transparent oder bekommen einen dunkelgrauen Hintergrund. Wenn ein Webautor die Farben von jeglichem Text und Hintergrund nicht festlegt, während er Rahmenfarben und Layout festlegt, dann ist es in den meisten gängigen Browsern möglich, die Farben von Text und Hintergrund zu ändern, ohne die anderen (vom Autor angegebenen) CSS Deklarationen zu beeinflussen.
Eine Webseite wird durch die Benutzung von HTML gestaltet. CSS wird benutzt, um Rahmenfarben um eigenständige Bereiche der Seite herum festzulegen und den Inhalt so zu entwerfen, dass das Menü links des Bereiches mit dem Hauptinhalt treibt. Weder Text- noch Hintergrundfarbe werden festgelegt. Die Benutzer legen ihre eigenen Farben im Browser fest. Sie können die Seite in Farben und mit Kontrasten ansehen, die für sie gut funktionieren, ohne dass dabei das Layout durcheinander gebracht wird.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Öffnen Sie die Webseite in einem Browser, der es Benutzern erlaubt, die Farben von HTML-Inhalten zu ändern.
Ändern Sie die Text-, Link- und Hintergrundfarben in den Browser-Einstellungen, so dass sie sich von den derzeit im Browser eingestellten unterscheiden.
Anmerkung: Stellen sie sicher, dass Sie nicht die Option wählen, die dem Browser sagt, dass er die auf der Seite festgelegten Farben ignorieren soll.
Kehren Sie zu der Seite zurück und prüfen Sie, ob die Seite in den neuen Text-, Link- und Hintergrundfarben angezeigt wird.
Prüfen Sie, ob jegliche Rahmen nach wie vor angezeigt werden und ob das Layout beibehalten wird.
Test #3 und Test #4 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Seiten, die CSS benutzen.
Die Technik bezieht sich auf:
Es kann Situationen geben, in denen ein Autor ein Layout benutzen muss, das horizontales scrollen erforderlich macht. In dem Fall ist es ausreichend, Optionen innerhalb des Inhalts zur Verfügung zu stellen, die zu einem Layout wechseln, das vom Benutzer nicht verlangt, horizontal zu scrollen, um eine Textzeile zu lesen. Dies kann man erreichen, indem man eine Standard-Technik zum Ändern des Styles benutzt.
Es sollte beachtet werden, dass es auch ausreichend ist, Inhalte auf eine solche Art zu entwerfen, dass horizontales scrollen erforderlich ist, um auf Inhalte zuzugreifen, aber dass es nicht notwendig ist, horizontal zu scrollen, um eine Textzeile zu lesen.
Zum Beispiel ist eine Tabellenkalkulation, die horizontales scrollen erfordert, akzeptabel, wenn für jede einzelne Spalte kein horizontales scrollen notwendig ist. (d.h. scrollen ist nur notwendig, um andere Spalten zu sehen, aber nicht für die linken und rechten Ränder jeder einzelnen Spalte. Ich finde es schwierig, dies auf eine komplett unzweideutige Art zu formulieren.)
Anmerkung: Diese Technik kann in Kombination mit einer Style-Switching-Technik benutzt werden, um eine Seite darzustellen, die eine konforme Alternativversion für nicht-konformen Inhalt ist. Für weitere Informationen lesen Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen und Konforme Alternativversionen verstehen.
Eine Immobilienfirma hatt einen Online-Jahresbericht, der vom Layout her identisch mit der Druckversion ist und als solches horizontales scrollen erforderlich macht, um eine Textzeile zu lesen. Es gibt auf der Seite ein Steuerelement, welches das Stylesheet ändert und ein Layout zur Verfügung stellt, das kein horizontales scrollen erfordert.
Eine Finanz-Tabellenkalkulation ist Online. Sie enthält Text, der Änderungen im Wohnungsmarkt im Januar erläutert. Rechts außerhalb des Bildschirms gibt es eine Spalte mit einer Erklärung der Änderungen im Markt im September. Der Benutzer kann horizontal zum September-Bereich scrollen und jede Textzeile lesen, ohne dass er weiter scrollen muss, wenn die Fenstergröße maximiert ist.
Öffnen Sie den Inhalt, der horizontales scrollen in einem bildschirmfüllenden Fenster erfordert.
Prüfen sie, ob es eine Option innerhalb des Inhalts gibt, um zu einem Layout zu wechseln, der es vom Benutzer nicht fordert, horizontal zu scrollen, um eine Textzeile zu lesen.
Aktivieren Sie die Option.
Prüfen Sie um sicherzustellen, dass es nicht notwendig ist, horizontal zu scrollen, um irgendeine Textzeile zu lesen.
Tests #2 und #4 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS benutzt mit HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es sicherzustellen, dass die Reihenfolge des Inhalts im Quellcode die gleiche ist, wie in der visuellen Darstellung des Inhalts. Die Reihenfolge des Inhalts im Quellcode kann vom Autor mit CSS zu jeder erdenklichen Anzahl an visuellen Darstellungen geändert werden. Jede Reihenfolge kann an sich sinnvoll sein, aber dies kann bei Benutzern von assistierenden Techniken zur Verwirrung führen. Dies könnte dadurch passieren, dass der Benutzer die vom Autor festgelegte Darstellung ausschaltet, indem er direkt vom Quellcode aus auf den Inhalt zugreift (wie beispielsweise mit einem Screenreader) oder indem er per Tastatur mit dem Inhalt interagiert. Wenn ein blinder Benutzer, der die Seite mit einem Screenreader, der dem Quellcode folgt, liest, zusammen mit einem sehenden Benutzer arbeitet, der die Seite in der visuellen Reihenfolge liest, dann können sie verwirrt werden, wenn sie in unterschiedlicher Reihenfolge auf Informationen treffen. Ein Benutzer mit einem verringerten Sehvermögen, der eine Vergrößerungssoftware in Kombination mit einem Screenreader benutzt, kann verwirrt sein, wenn es erscheint, als würde die Lesereihenfolge auf dem Bildschirm springen. Ein Tastaturbenutzer kann Probleme damit haben vorherzusehen, wo der Fokus als nächstes liegen wird, wenn die Reihenfolge des Quellcodes nicht der visuellen Reihenfolge entspricht.
Es kann auch Situationen geben, in denen die visuell dargestellte Reihenfolge notwendig für das Gesamtverständnis der Seite und wenn die Quellcode-Reihenfolge anders dargestellt wird, kann es viel schwieriger sein, sie zu verstehen.
Wenn die Quellcode-Reihenfolge der visuellen Reihenfolge entspricht, dann liest jeder den Inhalt in der gleichen (korrekten) Reihenfolge und interagiert damit in der gleichen (korrekten) Reihenfolge.
Anmerkung: Das tabindex-Attribut in HTML hat zwei Funktionen. Eine ist es, ein Element fokussierbar zu machen und die andere ist es, dem Element eine Position in der Fokus-Reihenfolge zuzuweisen. Ein tabindex von 0 macht ein Element fokussierbar, fügt es aber der Fokusreihenfolge in der Reihenfolge der Quellcode-Elemente hinzu. Die Fokusreihenfolge folge den positiven Werten des tabindex in aufsteigender Reihenfolge. Das Festlegen von tabindex-Werten, das in einer Reihenfolge, die sich von der Reihenfolge der Elemente im Document Object Model (DOM) unterscheidet, resultiert, kann bedeuten, dass die Reihenfolge für Benutzer mit assistierenden Techniken nicht korrekt ist. Dies liegt hauptsächlich daran, dass die tabindex-Eigenschaft im HTML oder XHTML und nicht im CSS festgelegt wird. Es kann sein, dass sich dies in zukünftigen Spezifikationen ändert. Es kann sich außerdem von der Reihenfolge der visuellen Darstellung unterscheiden.
Eine Online-Zeitung hat eine Navigationsleiste visuell in der oberen linken Ecke direkt unterhalb ihres Anfangs-Logos platziert. Im Quellcode erscheinen die Navigationselemente nach den Elementen, die das Logo kodieren.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Microsoft Internet Explorer Developer Toolbar. Ermöglicht die Überprüfung des vom Skript generierten DOM in Microsoft Internet Explorer.
Firebug. Ermöglicht die Überprüfung des vom Skript generierten DOM in Firefox.
Untersuchen Sie visuell die Reihenfolge des Inhalts auf der Webseite, so wie dies dem Endbenutzer präsentiert wird.
Untersuchen Sie die Elemente im DOM, indem Sie ein Werkzeug benutzen, das es ihnen erlaubt, das DOM zu sehen.
Stellen Sie sicher, dass die Reihenfolge des Inhalts in den Quellcode-Abschnitten der visuellen Präsentation des Inhalts auf der Webseite entsprechen. (z.B. ist die Reihenfolge für eine Seite in englischer Sprache von oben nach unten und von links nach rechts.)
Schritt 3 ist wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS
Die Technik bezieht sich auf:
Der Modus „hoher Kontrast“ in Internet Explorer 6 verändert prozent-basierte Zeichensätze in verschachtelten Tabellen so in der Größe, dass sie zu groß sind. Firefox und spätere Versionen von IE verändern Zeichensätze im Modus „hoher Kontrast“ nicht in der Größe und haben dieses Problem nicht.
Das Ziel dieser Technik ist es, die Breite und/oder Höhe von Containern, die Text enthalten oder die Texteingaben akzeptieren, in em-Einheiten festzulegen. Dies erlaubt es Benutzeragenten, die Größenänderungen von Text unterstützen, die Text-Container inline durch Änderungen in den Einstellungen zur Textgrößen in der Größe zu verändern.
Bei Breite und/oder Höhe von Text-Containern, die durch die Benutzung anderer Einheiten festgelegt wurde, besteht das Risiko, dass Text beschnitten wird, da dieser außerhalb der Container-Grenzen liegt, wenn die Größe des Textes vergrößert wurde.
Die Container steuern im Allgemeinen die Platzierung des Textes innerhalb der Webseite und und können Layout-Elemente, strukturelle Elemente und Formular-Steuerelemente enthalten.
In diesem Beispiel wird ein div-Element mit dem id-Wert "nav_menu" benutzt, um das Navigationsmenü auf der linken Seite des Hauptinhaltsbereiches der Webseite zu positionieren. Das Navigationsmenü besteht aus einer Liste mit Textlinks mit dem id-Wert "nav_list." Die Textgröße für die Navigationslinks und die Breite des Containers sind in em-Einheiten angegeben.
Code-Beispiel:
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }In diesem Beispiel haben die input-Elemente, die Text enthalten oder eine Texteingabe durch den Benutzer akzeptieren, den Klassennamen "form1" erhalten. CSS-Regeln werden angewendet, um die Schriftgröße in percent-Einheiten und die Breite für diese Elemente in em-Einheiten zu definieren. Dies ermöglicht es dem Text innerhalb des Formular-Steuerelements sich in der Größe zu verändern als Reaktion auf Änderungen in den Einstellungen zur Textgröße, ohne dass dieser abgeschnitten wird (da sich die Breite des Formular-Steuerelements selber auch entsprechend der Schriftgröße in der Größe verändert).
Code-Beispiel:
input.form1 { font-size: 100%; width: 15em; }In diesem Beispiel haben die select-Elemente den Klassennamen "pick" erhalten. CSS-Regeln werden angewendet, um die Schriftgröße in percent-Einheiten und die Breite in em-Einheiten zu definieren. Dies ermöglicht es dem Text innerhalb des Formular-Steuerelements sich in der Größe zu verändern als Reaktion auf Änderungen in den Einstellungen zur Textgröße, ohne dass dieser abgeschnitten wird.
Code-Beispiel:
input.pick { font-size: 100%; width: 10em; }In diesem Beispiel haben die input-Elemente, die Kontrollkästchen oder Radiobuttons definieren, den Klassennamen "choose" erhalten. CSS-Regeln werden angewendet, um die Breite und Höhe für diese Elemente in em-Einheiten zu definieren. Dies ermöglicht es dem Formular-Steuerelement, sich in der Größe zu verändern als Reaktion auf Änderungen in den Einstellungen zur Textgröße.
Code-Beispiel:
input.choose { width: 1.2em; height: 1.2em; }Identifizieren Sie Container, die Text enthalten oder eine Texteingabe erlauben.
Prüfen Sie, ob die Breite und/oder Höhe des Containers in em-Einheiten angegeben wurde.
Test #2 ist wahr
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
CSS, das mit client-seitigem oder server-seitigem Scirpting benutzt wird.
Die Technik bezieht sich auf:
Wenn irgendein Aspekt der Standard-Darstellung einer Webseite ein Erfolgskriterium nicht erfüllt, dann ist es möglich, diese Bedingung zu erfüllen, indem die Klausel „Alternativversion“ in den Konformitätsbedingungen (Konformitätsbedingung 1) benutzt wird. Der Aufruf eines Style Switchers über einen Link oder ein Steuerelement auf der Seite, der die Darstellung anpassen kann, so dass alle Aspekte der Seite auf der angegebenen Stufe konform sind, ermöglicht es Autoren bei einigen Bedingungen darauf zu verzichten, mehrfache Versionen der gleichen Informationen bereitzustellen.
Das Ziel dieser Technik ist es zu demonstrieren, wie man CSS in Kombination mit Scripting benutzen kann, um konforme Alternativversionen einer Webseite bereitzustellen. Bei dieser Technik stellt der Autor alternative Ansichten des Inhalts bereit, indem er Steuerelemente zur Verfügung stellt, die das CSS anpassen, das dazu benutzt wird, um die visuelle Darstellung des Inhalts zu steuern. Steuerelemente, die innerhalb der Webseite zur Verfügung gestellt werden, erlauben es den Benutzern, die Darstellung auf eine Art und Weise auszuwählen oder zu verändern, so dass das Erfolgskriterium auf der angegebenen Stufe erfüllt wird. Dadurch können vom Benutzer unterschiedliche visuelle Darstellungen ausgewählt werden in Situationen wie beispielsweise den Folgenden:
der Benutzer ist möglicherweise nicht dazu in der Lage, Browser- oder Betriebssystem-Einstellungen anzupassen aufgrund fehlender Vorkenntnisse oder Rechte
der Text wird auf eine Art zur Verfügung gestellt, die nicht auf Browser- oder Betriebssystem-Einstellungen anspricht (wie zum Beispiel Text innerhalb eines Bildes)
die Standard-Darstellung des Inhalts enthält keinen ausreichenden Kontrast für einige Benutzer
Damit diese Technik erfolgreich benutzt wird, müssen drei Dinge wahr sein.
Der Link oder das Steuerelement auf der Originalseite muss selber das Erfolgskriterium, das über die alternative Darstellung erfüllt werden soll, erfüllen. Wenn zum Beispiel ein Style-Switcher benutzt wird, um eine vergrößerte Schriftgröße zur Verfügung zu stellen und das Steuerelement selber wird in kleiner Schrift dargestellt, dann kann es sein, dass Benutzer nicht in der Lage sind, das Steuerelement zu aktivieren und die alternative Darstellung anzusehen.
Die neue Seite muss all die gleichen Informationen und Funktionalitäten wie die Originalseite enthalten.
Die neue Seite muss konform zu allen Erfolgskriterien für die gewünschte Stufe der Konformität sein. Ein alternatives Stylesheet kann zum Beispiel nicht benutzt werden, um eine Bedingung zu erfüllen, wenn dies dazu führt. dass eine andere Bedingung dann nicht länger konform ist.
Wenn man einen Style-Switcher benutzt ist es wichtig, die folgenden Herausforderungen und Einschränkungen in Betracht zu ziehen:
Die Anzahl und die Art der Änderungen, die ein Benutzer machen kann, wird durch den Umfang der Steuerelemente, die vom Autor der Webseite zur Verfügung gestellt werden, begrenzt. Es sollte eine Auswahl an Darstellungen und Einstellungen zur Verfügung gestellt werden, damit die Bedürfnisse einer möglichst breit gefächerten Zielgruppe adressiert werden können. Es ist allerdings auch wichtig, dass Autoren die Interaktionen zwischen Einstellungen und die Komplexität für die Benutzer in Betracht ziehen, die aus der Bereitstellung einer großen Anzahl an Optionen für Benutzer resultieren kann.
Die Beibehaltung von Benutzereinstellungen von einer Seite zur nächsten kann man erreichen, indem ein Cookie auf der Maschine des Benutzers gespeichert wird (lesen Sie den Abschnitt Ressourcen für weitere Informationen) oder indem man ihre Einstellungen in ein Profil aufnimmt, das auf dem Webserver gespeichert wird, indem ein Query String Parameter weitergegeben wird, oder durch andere Methoden.
Die technische Methode, die benutzt wird, um einen Style Switcher zu implementieren, kann von der Unterstützung und der Verfügbarkeit einer oder mehrerer Techniken auf der Maschine des Benutzers abhängig sein (zum Beispiel erfordern viele client-seitige Lösungen Unterstützung für sowohl JavaScript als auch CSS). Sofern man nicht wegen der Konformität auf diese Techniken angewiesen ist, sollten Autoren es in Betracht ziehen, server-seitige Techniken zu benutzen, wenn die client-seitige Unterstützung und Verfügbarkeit dieser Techniken nicht sichergestellt werden kann. Alternativ kann die Benutzung von Techniken, die sicherstellen, dass sich Inhalte elegant umgestalten, wenn eine oder mehrere der benutzten Techniken nicht zur Verfügung stehen, eine effektive Möglichkeit sein, Seiten zu verbessern, wenn man für die Konformität nicht auf die Unterstützung dieser Techniken angewiesen ist.
Dies ist das Beispiel einer Seite, die Links bereitstellt, um Text- und Hintergrundfarben für die Seite per JavaScript zu ändern. Die Links sollten nur eingefügt werden, wenn JavaScript von dem System des Benutzers unterstützt wird und darauf zur Verfügung steht. Andernfalls führt die Auswahl der Links nicht zu den gewünschten Änderungen. Dies kann erreicht werden, indem man Script benutzt, um die Links selber einzufügen (was bedeutet, dass die Links nur dann präsent wären, wenn Scripting unterstützt wird und verfügbar ist).
Der folgende Code zeigt die vom JavaScript abhängigen Farbänderungs-Links und einen Code-Ausschnitt von anderen Inhalten auf der Webseite, die damit verbundenen Stylesheet-Regeln und das JavaScript, welches das benutzte Stylesheet ändert, wenn ein Farbänderungs-Link ausgewählt wird.
Das Beispiel gilt nur für die aktuelle Seitenansicht. In einer Produktionsumgebung wäre es ratsam, diese Einstellung in einem Cookie oder einem server-seitigen Profil zu speichern, so dass Benutzer diese Auswahl nur einmal pro Site treffen müssten.
Die XHTML-Komponenten:
Code-Beispiel:
In <head> section:
<link href="main.css" rel="stylesheet" type="text/css" />
<link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
In <body> section:
<div id="colorswitch">
<p>Change colors:</p>
<ul class="inline">
<li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;"
id="altColors1">dark blue on white</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;"
id="altColors2">yellow on black</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;"
id="altColors3">black on pale yellow</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;"
id="altColors4">black on white</a></li>
<li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;"
id="default">Reset to default</a></li>
</ul>
</div>
<div id="mainbody">
<h1>Conference report</h1>
<p>Last week's conference presented an impressive line-up of speakers...</p>
</div>
Die CSS-Komponenten:
Code-Beispiel:
In main.css:
body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
#mainbody {
padding: 1em;
}
#colorswitch {
float: right;
width: 12em;
border: 1px #000066 solid;
padding:0 1em 1em 1em; margin:0;
}
#colorswitch p {
padding-top:.5em;
font-weight:bold;
}
In defaultColors.css:
body, p {
color:#000000;
background-color:#FFFFFF;
}
h1, h2, h3 {
color:#990000;
background-color:#FFFFFF;
}
In altColors1.css:
body, h1, h2, h3, p, a {
color:#000066;
background-color:#FFFFFF;
}
In altColors2.css:
body, h1, h2, h3, p, a {
color:#FFFF33;
background-color:#000000;
}
In altColors3.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFF99;
}
In altColors4.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFFFF;
}
Die JavaScript-Komponenten:
Code-Beispiel:
function changeColors (newCSS)
{
document.getElementById('currentCSS').href = newCSS;
}Es gibt ein funktionierendes Beispiel dieses Codes: Using a JavaScript control to apply a different external CSS file (Benutzung eines JavaScript-Steuerelementes, um eine andere externe CSS-Datei anzuwenden).
Dieses Beispiel kann für einfache Änderungen in einem Inhaltsabschnitt benutzt werden und ist möglicherweise für komplexe Sites oder Seiten weniger praktikabel. Das Beispiel benutzt ein client-seitiges JavaScript, um den Namen der Klasse zu ändern, um die Farbwahl des Benutzers (aus einer definierten Reihe von Optionen) als Hintergrund zur Hervorhebung von bestimmten Inhalten visuell darzustellen.
Anmerkung: Der folgende Code beinhaltet JavaScript-Aufrufe innerhalb des XHTML-Codes, um bei dem Verständnis dieser Technik zu helfen. Der Autor wird allerdings dazu ermutigt, aktuelle Best Practice zum Einfügen von JavaScript zu benutzen (lesen Sie dazu die Ressourcen für weitere Informationen zu „Unobtrusive JavaScript and progressive enhancement“).
Die XHTML-Komponenten:
Code-Beispiel:
<h1>Product comparison</h1>
<p>The products you selected to compare are listed below.
Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">Change hightlight color: </p>
<ul class="inline">
<li><a href="#" onClick="changeColor('hghltLightYellow');return false;"
class="hghltLightYellow">light yellow</a></li>
<li><a href="#" onClick="changeColor('hghltBrightYellow');return false;"
class="hghltBrightYellow">bright yellow</a></li>
<li><a href="#" onClick="changeColor('hghltLightBlue');return false;"
class="hghltLightBlue">light blue</a></li>
<li><a href="#" onClick="changeColor('hghltBrightBlue');return false;"
class="hghltBrightBlue">bright blue</a></li>
<li><a href="#" onClick="changeColor('hghltLightRed');return false;"
class="hghltLightRed">light red</a></li>
<li><a href="#" onClick="changeColor('hghltDrkRed');return false;"
class="hghltDrkRed">dark red</a></li>
</ul>
<table width="400" border="1">
<tr>
<td> </td>
<th scope="col">Product 1</th>
<th scope="col">Product 2</th>
</tr>
<tr>
<th scope="row">Aspect 1</th>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Aspect 2</th>
<td class="hghltLightYellow">Yes</td>
<td class="hghltLightYellow">No</td>
</tr>
<tr>
<th scope="row">Aspect 3</th>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
Die CSS-Komponenten:
Code-Beispiel:
body { color:#000000; background-color:#FFFFFF; }
.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }
.inlinePara {display:inline; }
.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }
Die JavaScript-Komponenten:
Code-Beispiel:
function changeColor(hghltColor)
{
// collects table data cells into an array
var els = document.getElementsByTagName('td');
// for each item in the array, look for a class name starting with "hghlt"
// if found, change the class value to the current selection
// note that this script assumes the 'td' class attribute is only used for highlighting
for (var i=0; i<els.length; i++)
{
if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
}
}
Es gibt ein funktionierendes Beispiel dieses Codes: Using a client-side JavaScript to change a CSS property (Benutzung eines client-seitigen JavaScripts, um eine CSS-Eigenschaft zu ändern).
Dieses einfache Beispiel benutzt PHP $_GET, um eines von zwei verfügbaren externen Stylesheets zuzuweisen. Eine ähnliche Funktionalität könnte erreicht werden, indem man eine Auswahl an PHP-Funktionen benutzt. Das Beispiel gilt nur für die aktuelle Seitenansicht. In einer Produktionsumgebung wäre es ratsam, diese Einstellung in einem Cookie oder einem server-seitigen Profil zu speichern, so dass Benutzer diese Auswahl nur einmal pro Site treffen müssten.
Bei dem folgenden Code handelt es sich um PHP, aber eine ähnliche Vorgehensweise würde mit einer Vielzahl von server-seitigen Techniken funktionieren.
Die PHP- und XHTML-Komponenten:
Code-Beispiel:
At the beginning of the PHP page:
<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
{
$thestyle = "style2";
}
else
{
$thestyle = "style1";
}
?>
In the <head> section:
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
In <body> section:
<?php
if ($thestyle == "style1") {
echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
}
else {
echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
}
?>
<div id="mainbody">
<h1>Conference report</h1>
<p>Last week's conference presented an impressive line-up of speakers...</p>
</div>
Die CSS-Komponenten:
Code-Beispiel:
In style1.css:
body, p { color:#000000; background-color:#FFFFFF; }
h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
In style2.css:
body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
Es gibt ein funktionierendes Beispiel dieses Codes: Using PHP $_GET to apply a different external CSS file (Benutzung von PHP $_GET, um eine andere externe CSS-Datei anzuwenden).
Das unten stehende Beispiel benutzt zwei Dateien
eine Java Server Page (JSP) mit dem Formular und dem Code, der das Formular verarbeitet und
eine include-Datei mit Funktionen, die von der vorhergehenden Seite und auf anderen Seiten, die den gleichen Style benutzen, angewendet werden.
Der server-seitige Code gibt ein normales Link-Element aus für das Stylesheet, das der Benutzer auswählt, und Link-Elemente mit „alternatives Stylesheet“ für die anderen Styles. Der Code kann daher als Alternativprozess für den client-seitigen Code im zweiten Beispiel benutzt werden.
Die JSP-Seite mit dem Formular:
Code-Beispiel:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
%><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Change Style</title>
<%
String fStyle = "";
String styleName = "style";
String defaultStyle = "default";
Cookie[] cookies = request.getCookies();
// get style from post request parameters
if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
fStyle = request.getParameter("styleSelect");
// code that validates user input (security) not shown
if (fStyle.equals("nostyle")) { // user prefers no author style
} else { // user requests author style
out.println(createStyleLinks(fStyle).toString());
}
storeStylePreferenceCookie(request, response, fStyle);
} else if (request.getMethod().equals("GET")) {
// GET request; get style from cookie; else default style links
// get style from cookie
if (cookies != null) {
// get style from cookies
fStyle = getStyleFromCookies(cookies);
if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
out.println(createStyleLinks(fStyle).toString());
} else { // no cookie for style; process request for style preference
// default style links
out.println(createStyleLinks(defaultStyle).toString());
}
} else { // GET request without cookies: default styles
out.println(createStyleLinks(defaultStyle).toString());
}//end else cookies
}
%>
</head>
<body id="home">
<form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
<p><label for="styleSelect">Select style: </label>
<select id="styleSelect" name="styleSelect">
<option value="default">Default (shades of green)</option>
<option value="wonb">White on black</option>
<option value="bonw">Black on white</option>
</select>
<input type="submit" value="Change Style" />
</p>
</form>
</body>
</html>
Die styleswitcher.jsp-Datei, die in der vorhergehenden Datei enthalten ist:
Code-Beispiel:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
/**
* Get the links (link elements) to the CSS files based on cookies, ...
*/
private String getStyleLinks(HttpServletRequest request) {
String styleLinks = "";
Cookie[] cookies = request.getCookies();
String defaultStyle = "default";
String tempStyle = "";
// GET request; get style from cookie; else default style links
// get style from cookie
if (cookies != null) {
// get style from cookies
tempStyle = getStyleFromCookies(cookies);
if ( tempStyle.equals("NULL_STYLE") ) {
// no cookie for style; process request for style preference
// default style links
styleLinks = createStyleLinks(defaultStyle).toString();
} else { // user requests author style
styleLinks = createStyleLinks(tempStyle).toString();
}
} else { // GET request without cookies: default styles
styleLinks = createStyleLinks(defaultStyle).toString();
}//end else cookies
return styleLinks;
}
/**
* Get style cookie from request
*/
private String getStyleFromCookies( Cookie[] cookies ) {
String fStyle = "NULL_STYLE";
for (int i = 0; i < cookies.length; i++) {
Cookie cookie = cookies[i];
String name = cookie.getName();
if ( name.equals("style") ) {
fStyle = cookie.getValue();
// code that validates cookie value (security) not shown
}
}
return fStyle;
}
/**
* Store the style preference in a persistent cookie
*/
private void storeStylePreferenceCookie(HttpServletRequest request,
HttpServletResponse response, String theStyle) {
final int ONE_YEAR = 60 * 60 * 24 * 365;
Cookie styleCookie = new Cookie("style", theStyle);
styleCookie.setMaxAge(ONE_YEAR);
response.addCookie(styleCookie);
}
/**
* Create the link elements for the stylesheets
*/
private StringBuffer createStyleLinks(String prefStyle) {
StringBuffer theStyleLinks = new StringBuffer();
//two-dimensional array with identifiers (adding '.css' gives the name of the CSS file)
// and strings for the title attribute of the link element
// the identifiers must correspond to the in the "value" attributes in the "option"
// elements in the style switcher form
String [] [] styles = {
{ "default", "Default style"},
{ "wonb", "White on black"},
{ "bonw", "Black on white"}
};
// loop over 2dim array: if styles[i][1] matches prefStyle,
// output as normal, else as alternate stylesheet
for (int i = 0; i < styles.length; i++) {
if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
.append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
} else { // output other stylesheets as alternate stylesheets
theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
.append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
.append("\" type=\"text/css\" />").append("\n");
}
} // end for loop
return theStyleLinks;
}
%>
Andere JSP-Seiten können diesen Code anhand des folgenden Include- und Scriptlet-Codes benutzen:
Code-Beispiel:
<%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Die Auswahl eines Benutzers kann über die Seiten hinweg und von einem Besuch zum anderen bestehen bleiben, indem die Informationen über einen Cookie auf dem Computer des Benutzers gespeichert werden. Diese Funktionalität setzt voraus, dass Cookies unterstützt werden und auf dem Computer des Benutzers erlaubt sind. Cookies können erstellt, gelesen, verändert und gelöscht werden, indem man client-seitige Scripts, wie zum Beispiel Javascript, oder server-seitige Scripts, wie zum Beispiel CGI-Scripts, benutzt. Wenn man auf client-seitige Techniken setzt, dann ist die Unterstützung und die Verfügbarkeit der Technik auf dem Computer des Benutzers erforderlich, zusätzlich zur Unterstützung und dem Erlauben von Cookies.
Informationen über das Erstellen und die Benutzung von Cookies kann man im Web finden. Hier sind einige Vorschläge:
Es wird empfohlen, dass Autoren auf die Unterstützung von Cookies hin testen und ein zusätzliches Steuerelement zur Verfügung stellen, wenn Cookies nicht unterstützt werden. Dieses zusätzliche Steuerelement sollte Informationen über das Fortbestehen der Auswahl, wie beispielsweise „Auswahl auf alle Seiten anwenden“, enthalten. Die Nachricht oder die Seite, die dem Benutzer angezeigt wird als Antwort auf die Auswahl des zusätzlichen Steuerelementes, gibt Informationen über die Erfordernis von Cookies und die Möglichkeiten, dieses Problem zu lösen. Für den Fall, dass der Benutzer nicht in der Lage ist, die Unterstützung von Cookies zu aktivieren, fügen Sie eine Erklärung hinzu, was es für ihn bedeutet, wenn er sich dazu entscheiden, weiterhin auf der Site zu surfen und geben Sie Informationen dazu, wie er seinen Benutzeragenten anpassen kann, um ähnliche Ergebnisse zu erzielen.
Zum Beispiel: „Ihr Browser ist nicht so konfiguriert, dass er Cookies annimmt. Auf dieser Site sind Cookies erforderlich, um Ihre ausgewählten Änderungen über alle Seiten der Site hinweg anzuwenden. Um herauszufinden, wie man Cookies auf Ihrem Computer aktiviert, besuchen Sie How to Enable Cookies. Beachten Sie, dass dies voraussetzen könnte, dass Sie administrative Rechte für den von Ihnen benutzen Computer haben. Ohne die Unterstützung von Cookies können Ihre Einstellungen nicht bestehen bleiben, um andere Seiten auf dieser Site einzuschließen. Wir bemühen uns, diese Funktionalität zur Verfügung zu stellen, ohne dass wir auf die Fähigkeiten Ihres Computers angewiesen sind. In der Zwischenzeit können Sie die Änderung für jede Seite, die Sie besuchen, auswählen.“
Die aktuelle Best Practice zur Implementierung von JavaScript in einer HTML- oder XHTML-Seite ist es, dies auf eine Art zu benutzen, die das Verhalten des Inhalts von seiner Struktur und Darstellung trennt. Die Begriffe ‚Progressive Verstärkung‘ und 'Unauffälliges JavaScript' werden oft benutzt, um Skripte zu beschreiben, welche die Funktionalität der Seite verstärken oder verbessern, dies aber dennoch so elegant umsetzen, dass der Inhalt weiterhin funktioniert, auch wenn JavaScript nicht unterstützt wird.
Hier sind einige empfohlene Ansatzpunkte für weitere Informationen:
Prüfen Sie, ob die Webseite Steuerelemente enthält, die es den Benutzern erlauben, alternative Darstellungen auszuwählen.
Prüfen Sie, ob das Steuerelement die Darstellung verändert.
Verifizieren Sie, dass die daraus entstehende Seite eine konforme Alternativversion der Originalseite ist.
Alle oben genannten Tests sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.
Alle Techniken, die CSS unterstützen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie man CSS benutzen kann, um strukturierten HTML-Text durch Bilder von Text ersetzen kann auf eine Art und Weise, die es den Benutzern ermöglicht, Inhalte entsprechend ihrer Vorlieben anzusehen. Um diese Technik anzuwenden, beginnt der Autor damit, eine HTML-Seite zu erstellen, die semantische Elemente benutzt, um die Struktur der Seite auszuzeichnen. Dann entwickelt der Autor zwei oder mehr Stylesheets für diese Seite. Ein Stylesheet stellt den HTML-Text als Text dar und das zweite benutzt CSS-Funktionen, um einen Teil des HTML-Textes durch Bilder von Text zu ersetzen. Schließlich stellt der Autor, durch die Benutzung von server-seitigem oder client-seitigem Scripting, ein Steuerelement zur Verfügung, das es dem Benutzer erlaubt, zwischen den verfügbaren Ansichten zu wechseln.
Diese Technik kann angewendet werden, um Erfolgskriterium 1.4.5 oder 1.4.9 zu erfüllen, wenn eine Präsentation, die keine Bilder von Text enthält, zur Verfügung steht, so lange das Steuerelement der Benutzerschnittstelle, das zur Verfügung gestellt wird, damit Benutzer zu einer alternativen Darstellung wechseln können, die relevanten Kriterien erfüllt. Wenn möglich sollten Autoren die Darstellung, die keine Bilder von Text enthält, als Standard-Darstellung liefern. Darüber hinaus sollte das Steuerelement, das zum Wechseln benutzt wird, in der Nähe des Beginns der Seite platziert sein.
Es wurde eine Vielzahl von „Bild-Austausch“-Techniken entwickelt, um eine Vielzahl an Problemen bei Benutzeragenten, Konfiguration und Kompatibilität mit assistierenden Techniken zu adressieren (lesen Sie in den Ressourcen für weitere Informationen). Obwohl es eine Vielzahl von Vorgehensweisen gibt, die Autoren benutzen können, um Text zu ersetzen, ist es wichtig, die Kompatibilität mit assistierenden Techniken zu berücksichtigen; ob die Technik korrekt arbeitet, wenn Scripting, CSS, Bilder (oder Kombinationen dieser Punkte) abgeschaltet wird. Da es schwierig sein kann, eine einzelne Lösung zu finden, die in allen Fällen funktioniert, empfiehlt diese Technik die Benutzung eines Steuerelementes, das es Benutzern erlaubt, zu einer Darstellung zu wechseln, die keine Bild-Austausch-Technik beinhaltet.
Anmerkung: Diese Technik kann in Kombination mit einer Style-Switching-Technik benutzt werden, um eine Seite darzustellen, die eine konforme Alternativversion für nicht-konformen Inhalt ist. Für weitere Informationen lesen Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen und Konforme Alternativversionen verstehen.
Die Site eines Design-Studios benutzt einen Style-Switcher, der es Benutzern erlaubt, zwei Darstellungen ihrer Homepage anzusehen. In der Standard-Version wurde der Überschriften-Text durch Bilder eines Textes ersetzt. Ein Steuerelement auf der Seite erlaubt es Benutzern, zu einer Version zu wechseln, welche die Überschriften als Text darstellt.
Die CSS-Komponente :
Code-Beispiel:
...
<div id="Header">
<h1><span>Pufferfish Design Studio</span></h1>
<h2><span>Surprising Identity and Design Solutions</span></h2>
</div>
...Das CSS für die Darstellung, die Bilder eines Textes enthält, folgt. Beachten Sie, dass das CSS die Positionierung benutzt, um die Inhalte der Überschriften-Elemente außerhalb des Bildschirms zu platzieren, so dass der Text weiterhin für Benutzer von Screenreadern zur Verfügung steht.
Code-Beispiel:
...
#Header h1 {
background-image: url(pufferfish-logo.png);
height: 195px;
width: 290px;
background-repeat: no-repeat;
margin-top: 0;
position: absolute;
}
#Header h1 span {
position: absolute;
left: -999em;
}
#Header h2 {
background-image: url(beauty.png);
background-repeat: no-repeat;
height: 234px;
width: 33px;
margin-left: 8px;
position: absolute;
margin-top: 250px;
}
#Header h2 span {
position: absolute;
left: -999em;
}
Das CSS für die Darstellung, die keine Bilder von Text enthält.
Code-Beispiel:
...
#Header h1 {
font: normal 200%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #000099;
background: #ffffff;
}
#Header h2 {
font: normal 160%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #336600;
background: #ffffff;
}Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob die Webseite eine Steuerelement enthält, das es Benutzern erlaubt, eine alternative Darstellung auszuwählen.
Prüfen Sie, ob, wenn das Steuerelement aktiviert wird, die sich daraus ergebende Seite Text (durch Software bestimmten Text) an all den Stellen, an denen Bilder von Text benutzt worden waren, enthält.
Alle oben genannten Tests sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.