Auf dieser Webseite werden Client-seitige Scripting-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.
Zeitliche Begrenzungen, die durch client-seitiges Scripting gesteuert werden.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist, es dem Benutzer zu ermöglichen, die standardmäßige zeitliche Begrenzung auszudehnen, indem ein Mechanismus zur Verfügung gestellt wird, um die Zeit zu verlängern, wenn Skripte Funktionalitäten zur Verfügung stellen, die eine zeitliche Begrenzung haben. Um es dem Benutzer zu ermöglichen, um eine längere zeitliche Begrenzung zu bitten, kann das Skript (zum Beispiel) ein Formular bereitstellen, das es dem Benutzer erlaubt, eine größere zeitliche Begrenzung einzugeben oder darauf hinzuweisen, dass mehr Zeit benötigt wird. Wenn der Benutzer gewarnt wird, dass die zeitliche Begrenzung bald abläuft (siehe SCR16: Bereitstellung eines Scripts, das den Benutzer warnt, dass eine zeitliche Begrenzung bald abläuft), dann kann dieses Formular aus dem Warndialog heraus bereitgestellt werden. Der Benutzer kann die zeitliche Begrenzung auf mindestens die 10-fache Zeit der Standardzeit ausdehnen, entweder indem man es dem Benutzer erlaubt anzugeben, wie viel zusätzliche Zeit benötigt wird, oder indem man es dem Benutzer wiederholt ermöglicht, die zeitliche Begrenzung auszudehnen.
Eine Webseite enthält aktuelle Statistiken zum Aktienmarkt und ist so eingestellt, dass sie sich automatisch aktualisiert. Wenn der Benutzer vor der ersten Aktualisierung gewarnt wird, steht ihm eine Option zur Verfügung, um den Zeitraum zwischen den Aktualisierungen zu vergrößern.
In einem Online-Schachspiel bekommt jeder Spieler eine zeitliche Begrenzung, um jeden Zug abzuschließen. Wenn der Spieler gewarnt wird, dass die Zeit für seinen Zug beinahe abgelaufen ist, wird dem Benutzer eine Option zur Verfügung gestellt, um die Zeit zu erhöhen.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Warten Sie auf einer Webseite, die Scripte benutzt, um eine zeitliche Begrenzung in Kraft zu setzen, bis die zeitliche Begrenzung abgelaufen ist.
Stellen sie fest, ob eine Option zur Verfügung gestellt wurde, um die zeitliche Begrenzung auszudehnen.
#2 ist wahr und es wird mehr Zeit zur Verfügung gestellt, um die Interaktion abzuschließen.
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.
HTML und XHTML mit Scripting-Unterstützung.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie man geräte-unabhängige Events benutzt, um ein dekoratives Bild zu ändern als Reaktion auf einen mouse- oder focus-Event. Benutzen sie die onmouseover und onmouseout-Events, um ein dekoratives Bild zu ändern, wenn sich die Maus auf ein Element auf der Seite bewegt oder sich davon entfernt. Benutzen Sie außerdem die onfocus- und onblur-Events, um das Bild zu wechseln, wenn das Element den Fokus erhält oder verliert.
Das unten stehende Beispiel hat ein dekoratives Bild vor einem anchor-Element. Wenn der Benutzer die Maus über den anchor-Tag bewegt, dann wird das dekorative Bild vor dem Anchor geändert. Wenn sich die Maus von dem Anchor weg bewegt, wird das Bild wieder zurück zu seiner Originalversion geändert. Der gleiche Bildänderungseffekt tritt auf, wenn der Benutzer dem Anchor-Element den Tastatur-Fokus gibt. Wenn es den Fokus erhält, dann ändert sich das Bild, wenn es den Fokus verliert, dann wird das Bild wieder zurück geändert. Dies erreicht man, indem man die onmouseover-, onmouseout-, onfocus- und onblur-Event-Handler an das anchor-Element bindet. Der Event-Handler ist eine JavaScript-Funktion, genannt updateImage(), die das src-Attribut des Bildes ändert. Das updateImage() wird als Reaktion auf die onmouseover-, onmouseout-, onfocus- und onblur-Events aufgerufen.
Jedes Bild erhält eine einzigartige id. Diese einzigartige id wird an updateImage() weitergegeben, zusammen mit einem booleschen Wert, der darauf hinweist, welches Bild zu benutzen ist: updateImage(imgId, isOver);. Der boolesche Wert ‚true‘ wird weitergegeben, wenn sich die Maus über dem Anchor-Element befindet oder dieses den Fokus hat. Der Wert ‚false‘ wird weitergegeben, wenn sich die Maus von dem Anchor-Element entfernt oder dieses den Fokus verliert. Die Funktion updateImage() benutzt die id des Bildes, um das Bild zu laden und ändert dann das src-Attribut anhand des booleschen Wertes. Beachten Sie, dass das Bild ein leeres alt-Attribut hat, da es für dekorative Zwecke ist.
Anmerkung: Es ist am besten, Bilder zu benutzen, die eine ähnliche Größe haben, und die height- und width-Attribute auf dem image-Element anzugeben. Dies verhindert, dass das Layout der Seite verändert wird, wenn das Bild aktualisiert wird. Dieses Beispiel benutzt Bilder, die eine identische Größe haben.
Code-Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Changing Image Source in a Device Independent Manner</title>
<script type="text/javascript">
/* This function will change the image src of an image element.
* param imgId - the id of the image object to change
* param isOver - true when mouse is over or object has focus,
* false when mouse move out or focus is lost
*/
function updateImage(imgId, isOver) {
var theImage = document.getElementById(imgId);
if (theImage != null) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
// These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
if (isOver) {
theImage.setAttribute("src","yellowplus.gif");
}
else {
theImage.setAttribute("src","greyplus.gif");
}
}
}
</script>
</head>
<body>
<p>Mouse over or tab to the links below and see the image change.</p>
<a href="http://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
<img src="greyplus.gif" border="0" alt="" id="wai">
W3C Web Accessibility Initiative</a> &
<a href="http://www.w3.org/International/" onmouseover="updateImage('i18n', true);"
onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
onblur="updateImage('i18n',false);">
<img src="greyplus.gif" border="0" alt="" id="i18n">
W3C Internationalization</a>
</body>
</html>Laden Sie die Webseite und testen Sie die Events per Tastatur und indem Sie eine Maus benutzen.
Prüfen Sie, ob das „Standard“-Bild wie erwartet angezeigt wird, wenn die Webseite geladen wird.
Benutzung der Maus
Bewegen Sie die Maus über das Element, das die Event-Handler enthält (in diesem Beispiel ist es ein anchor-Element). Prüfen Sie, ob sich das Bild zu dem erwarteten Bild ändert.
Bewegen Sie die Maus von dem Element weg. Prüfen Sie, ob sich das Bild zurück zu dem „Standard“-Bild ändert.
Benutzung der Tastatur
Benutzen sie die Tastatur, um den Fokus auf das Element zu setzen, das die Event-Handler enthält. Prüfen Sie, ob sich das Bild zu dem erwarteten Bild ändert.
Benutzen Sie die Tastatur, um den Fokus von dem Element zu entfernen (normalerweise, indem man den Fokus zu einem anderen Element bewegt). Prüfen Sie, ob sich das Bild zu dem „Standard“-Bild ändert.
Verifizieren Sie, dass das Layout der anderen Elemente auf der Seite nicht tangiert wird, wenn das Bild geändert wird.
Alle Schritte für die 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.
Scripting-Techniken, die Scripting-Warnmeldungen für eine nicht-notfallmäßige Kommunikation benutzen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, dem Benutzer einen Dialog anzuzeigen, der eine Nachricht (Warnmeldung) enthält. Wenn die Warnmeldung angezeigt wird, erhält sie den Fokus und der Benutzer muss die OK-Schaltfläche in dem Dialog aktivieren, um sie auszublenden. Da diese Warnmeldungen dazu führen, dass sich der Fokus ändert, können sie den Benutzer verwirren, besonders wenn sie für nicht-notfallmäßige Informationen benutzt werden. Warnmeldungen für nicht-notfallmäßige Zwecke wie zum Beispiel die Anzeige des Zitats des Tages, hilfreiche Anwendungstipps, oder der Countdown zu einem besonderen Ereignis, werden nicht angezeigt, außer der Benutzer aktiviert sie durch eine Option, die auf der Webseite zur Verfügung gestellt wird.
Diese Technik weist eine globale JavaScript-Variable zu, um die Vorlieben des Benutzer zur Anzeige von Warnmeldungen zu speichern. Der Standardwert ist ‚false‘. Es wird eine wrapper-Funktion erstellt, um den Wert dieser Variable vor der Anzeige einer Warnmeldung zu prüfen. Alle Aufrufe zur Anzeige einer Warnmeldung werden an diese wrapper-Funktion gerichtet, statt die alert()-Funktion direkt aufzurufen. Früh auf der Seite wird dem Benutzer eine Schaltfläche zur Verfügung gestellt, um die Anzeige von Warnmeldungen auf der Seite freizuschalten. Diese Technik funktioniert auf einer pro-Besuch-Basis. Jedes Mal, wenn die Seite geladen wird, sind die Warnmeldungen deaktiviert und der Benutzer muss sie von Hand aktivieren. Alternativ könnte der Autor Cookies benutzen, um die Vorlieben des Benutzer über die Sitzungen hinweg zu speichern.
Das unten stehende Skript zeigt alle zehn Sekunden ein Zitat in einer Warnmeldungsbox an, wenn der Benutzer die Schaltfläche „Warnmeldungen anstellen“ („Turn Alerts On“) auswählt. Der Benutzer kann die Zitate wieder abstellen, indem er „Warnmeldungen ausstellen“ („Turn Alerts Off“) wählt.
Code-Beispiel:
<script type="text/javascript">
var bDoAlerts = false; // global variable which specifies whether to
// display alerts or not
/* function to enable/disable alerts.
* param boolean bOn - true to enable alerts, false to disable them.
*/
function modifyAlerts(isEnabled) {
bDoAlerts = isEnabled;
}
/* wrapper function for displaying alerts. Checks the value of bDoAlerts
*and only calls the alert() function when bDoAlerts is true.
*/
function doAlert(aMessage) {
if (bDoAlerts) {
alert(aMessage);
}
}
// example usage - a loop to display famous quotes.
var gCounter = -1; // global to store counter
// quotes variable would be initialized with famous quotations
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
if (++gCounter >= quotes.length) {
gCounter = 0;
}
doAlert(quotes[gCounter]);
setTimeout("showQuotes();", 10000);
}
showQuotes();
</script>Bieten Sie innerhalb des Body der Seite eine Möglichkeit, die Warnmeldungen an- und auszuschalten. Unten sehen Sie ein Beispiel:
Code-Beispiel:
<body>
<p>Press the button below to enable the display of famous quotes
using an alert box<br />
<button id="enableBtn" type="button" onclick="modifyAlerts(true);">
Turn Alerts On</button><br />
<button id="disableBtn" type="button" onclick="modifyAlerts(false);">
Turn Alerts Off</button></p>Hier ist ein funktionierendes Beispiel dieses Codes: Demonstration of Alerts (Demonstration von Warnmeldungen).
Für eine Webseite, die nicht-notfallmäßige Unterbrechungen durch die Benutzung einer JavaScript-Warnmeldung unterstützt:
Laden Sie die Webseite und verifizieren Sie, dass keine nicht-notfallmäßigen Warnmeldungen angezeigt werden.
Verifizieren Sie, dass es einen Mechanismus gibt, um die nicht-notfallmäßigen Warnmeldungen zu aktivieren.
Aktivieren Sie die nicht-notfallmäßigen Warnmeldungen und verifizieren Sie, dass die Warnmeldungen angezeigt werden.
Für eine Webseite, die nicht-notfallmäßige Unterbrechungen durch die Benutzung einer JavaScript-Warnmeldung unterstützt, sind die oben stehenden Tests 1, 2 und 3 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.
Es gibt zeitliche Begrenzungen, die von einem Skript gesteuert werden.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Benutzer zu benachrichtigen, dass die Zeit zur Fertigstellung einer Interaktion fast abgelaufen ist. Wenn Skripte Funktionalitäten, die zeitliche Begrenzungen haben, bereitstellen, kann das Skript eine Funktionalität enthalten, um den Benutzer vor den unmittelbar bevorstehenden zeitlichen Begrenzungen zu warnen und um einen Mechanismus bereitzustellen, mehr Zeit zu erbitten. 20 Sekunden oder mehr, bevor die zeitliche Begrenzung auftritt, stellt das Skript einen Bestätigungsdialog zur Verfügung, der besagt, dass eine zeitliche Begrenzung unmittelbar bevorsteht und fragt, ob der Benutzer mehr Zeit benötigt. Wenn der Benutzer mit „Ja“ antwortet wird die zeitliche Begrenzung zurückgesetzt. Wenn der Benutzer mit „Nein“ antwortet oder gar nicht reagiert, darf die zeitliche Begrenzung ablaufen.
Diese Technik umfasst zeitliche Begrenzungen, die über die window.setTimeout()-Methode festgelegt wurden. Wenn zum Beispiel die zeitliche Begrenzung so eingestellt wurde, dass sie in 60 Sekunden abläuft, dann können Sie die zeitliche Begrenzung auf 40 Sekunden setzen und den Bestätigungsdialog bereitstellen. Wenn der Bestätigungsdialog erscheint, wird eine neue zeitliche Begrenzung für die verbleibenden 20 Sekunden festgelegt. Mit dem Ablauf der „zeitlichen Begrenzung der Schonfrist“ würden die Schritte, die beim Ablauf der 60-Sekunden dauernden zeitlichen Begrenzung in der ursprünglichen Planung eingeleitet worden wären, eingeleitet.
Eine Seite mit Kursnotierungen des Aktienmarktes benutzt ein Skript, um die Seite alle fünf Minuten zu aktualisieren um sicherzustellen, dass die neuesten Statistiken weiterhin zur Verfügung stehen. 20 Sekunden bevor der fünf-minütige Zeitraum abläuft erscheint ein Bestätigungsdialog, der fragt, ob der Benutzer mehr Zeit benötigt, bevor sich die Seite aktualisiert. Dies ermöglicht es dem Benutzer, sich über die bevorstehende Aktualisierung bewusst zu sein und diese wenn gewünscht zu vermeiden.
Code-Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Stock Market Quotes</title>
<script type="text/javascript">
<!--
function timeControl() {
// set timer for 4 min 40 sec, then ask user to confirm.
setTimeout('userCheck()', 280000);
}
function userCheck() {
// set page refresh for 20 sec
var id=setTimeout('pageReload()', 20000);
// If user selects "OK" the timer is reset
// else the page will refresh from the server.
if (confirm("This page is set to refresh in 20 seconds.
Would you like more time?"))
{
clearTimeout(id);
timeControl();
}
}
function pageReload() {
window.location.reload(true);
}
timeControl();
-->
</script>
</head>
<body>
<h1>Stock Market Quotes</h1>
...etc...
</body>
</html>Auf einer Webseite, die eine zeitliche Begrenzung hat, die von einem Skript gesteuert wird:
Laden Sie die Seite und stellen Sie einen Kurzzeitmesser auf 20 Sekunden weniger als die zeitliche Begrenzung.
Wenn der Kurzzeitmesser abläuft prüfen Sie, ob ein Bestätigungsdialog, der vor der bevorstehenden zeitlichen Begrenzung warnt, angezeigt wird.
#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.
Inhalte, die Benutzereingaben validieren.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Benutzereingaben anhand von client-seitigem Scripting zu validieren, während die Werte für jedes Feld eingegeben werden. Wenn Fehler gefunden werden beschreibt eine Warnmeldung die Art des Fehlers in Textform. Sobald der Benutzer die Warnmeldung ausblendet ist es hilfreich, wenn das Skript den Tastaturfokus auf das Feld, bei dem der Fehler aufgetreten ist, setzt.
Das folgende Skript prüft, ob ein gültiges Datum in das Formular-Steuerelement eingegeben wurde.
Code-Beispiel:
<label for="date">Date:</label>
<input type="text" name="date" id="date"
onchange="if(isNaN(Date.parse(this.value)))
alert('This control is not a valid date.
Please re-enter the value.');" />Für Formularfelder, die eine bestimmte Eingabe erfordern:
Geben Sie ungültige Daten ein
Stellen Sie fest, ob eine Warnmeldung, die den Fehler beschreibt, zur Verfügung gestellt wird.
#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.
HTML und XHTML mit Unterstützung für Scripting. Diese Technik benutzt das try/catch-Konstrukt von JavaScript 1.4.
Die Technik bezieht sich auf:
Diese Technik wurde unter Windows XP sowohl mit Firefox 1.5 und IE 6 unter der Benutzung von JAWS 7.0 und WindowEyes 5.5 getestet. Beachten sie, dass JavaScript im Browser aktiviert sein muss.
Das Ziel dieser Technik ist es zu zeigen, wie man einen onchange-Event mit einem select-Element korrekt benutzt, um andere Elemente auf der Webseite zu aktualisieren. Diese Technik führt nicht zu einer Änderung des Kontextes. Wenn es auf einer Webseite ein oder mehrere select-Elemente gibt, kann ein onchange-Event auf einem davon die Optionen bei anderen select-Elementen auf der Webseite aktualisieren. Alle Daten, die für die select-Elemente erforderlich sind, werden in die Webseite aufgenommen.
Es ist wichtig zu beachten, dass das select-Element, das geändert wird, in der Lesereihenfolge der Webseite nach dem auslösenden select-Element kommt. Damit wird sichergestellt, dass assistierende Techniken die Änderung aufgreifen und die Benutzer auf die neuen Daten treffen, wenn das geänderte Element den Fokus erhält. Diese Technik ist auf die Unterstützung von JavaScript im Benutzeragenten angewiesen.
Dieses Beispiel enthält zwei select-Elemente. Wenn im ersten select ein Punkt ausgewählt wird, werden die Auswahlmöglichkeiten in dem anderen select entsprechend aktualisiert. Das erste select-Element enthält eine Liste mit Kontinenten. Das zweite select-Element wird eine partielle Liste mit Ländern, die sich auf dem ausgewählten Kontinent befinden, enthalten. Mit dem Kontinent-Select ist ein onchange-Event verbunden. Wenn sich die Auswahl des Kontinents ändert, dann werden die Punkte im dem Länder-Select geändert, indem JavaScript über das Document Object Model (DOM) benutzt wird. Alle benötigten Daten - die Liste der Länder und Kontinente - sind auf der Webseite enthalten.
Überblick über den unten stehenden Code
countryLists array-Variable, welche die Liste der Länder für jeden Kontinent in dem auslösenden select-Element enthält.
countryChange()-Funktion, die durch den onchange-Event des Kontinent-select-Elements aufgerufen wird.
Der XHTML-Code zur Erstellung der select-Elemente im Body der Webseite.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<title>Dynamic Select Statements</title>
<script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
countryLists["empty"] = ["Select a Country"];
countryLists["North America"] = ["Canada", "United States", "Mexico"];
countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Asia"] = ["Russia", "China", "Japan"];
countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the countryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>
<body>
<noscript>This page requires JavaScript be available and enabled to function properly</noscript>
<h1>Dynamic Select Statements</h1>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
</body>
</html>Hier ist ein funktionierendes Beispiel: Dynamic Select (Dynamische Auswahl)
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
(derzeit keine aufgelistet)
Navigieren Sie zu dem auslösenden select-Element (in diesem Beispiel das zur Auswahl des Kontinents) und ändern Sie den Wert des select.
Navigieren Sie zu dem select-Element, das von dem Auslöser aktualisiert wird (in diesem Beispiel das zur Auswahl des Landes).
Prüfen sie, ob die zusammenpassenden Werte in dem anderen select-Element angezeigt werden.
Navigieren Sie zu dem auslösenden select-Element, navigieren Sie durch die Optionen aber ändern Sie den Wert nicht.
Prüfen Sie, ob die zusammenpassenden Optionswerte immer noch in dem verbundenen Element angezeigt werden.
Es wird empfohlen, die select-Elemente mit einer assistierenden Technik zu testen um zu verifizieren, dass die Änderungen bei dem verbundenen Element erkannt werden.
Schritte #3 und #5 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.
Gilt für alle Inhalte, die Skripte benutzen, um Funktionalitäten zu implementieren.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, die Benutzung von sowohl Tastatur-spezifischen als auch Maus-spezifischen Events mit Code, der eine verbundene Scripting-Funktion hat, zu erläutern. Die Benutzung von sowohl Tastatur-spezifischen als auch Maus-spezifischen Events zusammen stellt sicher, dass Inhalt mit einer Vielzahl an Geräten bedient werden kann. Beispielsweise kann ein Skript bei Feststellung eines Tastendrucks die gleiche Handlung ausführen, die ausgeführt wird, wenn eine Maus-Schaltfläche gedrückt wird. Diese Technik geht über die Anforderung des Erfolgskriteriums für den Zugriff per Tastatur hinaus, indem nicht nur der Zugriff per Tastatur, sondern auch der Zugriff über andere Geräte vorgesehen ist.
Häufig benutzte Event-Handler in JavaScript umfassen onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Einige Maus-spezifische Funktionen haben eine logische entsprechende Tastatur-spezifische Funktion (wie zum Beispiel 'onmouseover' und 'onfocus'). Es sollte ein Tastatur-Event-Handler, der die gleiche Funktion wie der Maus-Event-Handler ausführt, zur Verfügung gestellt werden.
Die folgende Tabelle gibt Empfehlungen zur Paarung von Tastatur-Event-Handlern mit Maus-Event-Handlern.
| Benutzen Sie... | ...mit |
|---|---|
mousedown | keydown |
mouseup | keyup |
click [1] | keypress [2] |
mouseover | focus |
mouseout | blur |
1 Obwohl click hauptsächlich ein Maus-Event-Handler ist, verarbeiten die meisten HTML- und XHTML-Benutzeragenten diesen Event, wenn das Steuerelement aktiviert wird, egal ob es per Maus oder Tastatur aktiviert wurde. Daher ist es in der Praxis nicht notwendig, diesen Event zu duplizieren. Er ist der Vollständigkeit halber hier aufgeführt, da nicht-HTML-Benutzeragenten dieses Problem haben.
2 Da der keypress-Event-Handler auf jede Taste reagiert, sollte die Event-Handler-Funktion zuerst kontrollieren und sicherstellen, dass die Eingabetaste gedrückt wurde bevor damit fortgefahren wird, den Event zu verarbeiten. Andernfalls läuft der Event-Handler jedes Mal, wenn der Benutzer eine Taste drückt, sogar wenn die Tabulatortaste gedrückt wird, um das Steuerelement zu verlassen, und dies ist normalerweise nicht gewünscht.
Einige Maus-spezifische Funktionen (wie zum Beispiel dblclick und mousemove) haben keine entsprechende Tastatur-spezifische Funktion. Dies bedeutet, dass einige Funktionen unter Umständen für jedes Gerät unterschiedliche implementiert werden müssen (zum Beispiel die Aufnahme einer Reihe von Schaltflächen, um per Tastatur die äquivalenten, implementierten Maus-spezifischen Funktionen auszuführen).
In diesem Beispiel eines Bildlinks wird das Bild geändert, wenn der Benutzer den Zeiger über dem Bild positioniert. Um Tastaturbenutzern ein ähnliches Erlebnis zu bereiten, wird das Bild auch geändert, wenn der Benutzer per Tab dorthin geht.
Code-Beispiel:
<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>Dieses Beispiel zeigt ein Bild, für das die Tastatur benutzt werden kann, um die Funktion zu aktivieren. Der Maus-Event onclick wird durch den passenden Tastatur-Event onkeypress dupliziert. Das tabindex-Attribut stellt sicher, dass die Tastatur einen Tabstop auf dem Bild hat. Beachten Sie, dass in diesem Beispiel die nextPage()-Funktion prüfen sollte, ob die auf der Tastatur gedrückte Taste die Eingabetaste war, ansonsten wird auf alle Tastendrücke reagiert, während das Bild den Fokus hat, was nicht das gewollte Verhalten ist.
Code-Beispiel:
<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif"
alt="Go to next page"> Anmerkung: Dieses Beispiel benutzt tabindex auf einem img-Element. Auch wenn dies derzeit ungültig ist, wird dies als vorübergehende Technik bereitgestellt, um dafür zu sorgen, dass die Funktion funktioniert.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Finden Sie alle interaktiven Funktionalitäten
Prüfen Sie, ob auf alle interaktiven Funktionalitäten über die Tastatur alleine zugegriffen werden kann
#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.
ECMAScript, das innerhalb von HTML und XHTML benutzt wird
Die Technik bezieht sich auf:
Dieses Beispiel wurde erfolgreich unter Windows XP mit IE 6 und Firefox 1.5.0.1 unter der Benutzung von sowohl JAWS 7 als auch WindowEyes 5.5 getestet. Beachten Sie, dass, wenn neue Inhalte auf einer Seite hinzugefügt werden, Screenreader unter Umständen nicht automatisch die neuen Inhalte sprechen. Setzen Sie den Fokus auf das neue Element um sicherzustellen, dass neue Inhalte gesprochen werden, oder stellen Sie sicher, dass es unterhalb der aktuellen Position hinzugefügt wird, so dass es angetroffen wird, wenn der Benutzer damit fortfährt, die Seite zu durchqueren.
Das Ziel dieser Technik ist zu zeigen, wie man Funktionen des Document Object Model (DOM) benutzt, um Inhalte auf einer Seite hinzuzufügen anstatt document.write oder object.innerHTML zu benutzen. Die document.write()-Method funktioniert nicht mit XHTML, wenn sie mit dem korrekten MIME type (application/xhtml+xml) ausgeliefert wird und die innerHTML-Eigenschaft ist nicht Teil der DOM-Spezifikation und sollte daher vermieden werden. Wenn die DOM-Funktionen benutzt werden, um Inhalte hinzuzufügen können Benutzeragenten auf das DOM zugreifen, um den Inhalt abzurufen. Die createElement()-Funktion kann benutzt werden, um Elemente innerhalb des DOM zu erstellen. createTextNode() wird benutzt, um Text, der Elementen zugeordnet ist, zu erstellen. Die appendChild()-, removeChild()-, insertBefore()- und replaceChild()-Funktionen werden benutzt, um Elemente und Knoten hinzuzufügen und zu entfernen. Andere DOM-Funktionen werden benutzt, um den erstellten Elementen Attribute zuzuweisen.
Anmerkung: Wenn Sie fokussierbare Elemente in das Dokument einfügen, fügen Sie keine tabindex-Attribute hinzu, um explizit die Tab-Reihenfolge festzulegen, da dies zu Problemen führen kann, wenn fokussierbare Elemente in der Mitte eines Dokumentes eingefügt werden. Lassen Sie dem neuen Element die Standard-Tabreihenfolge zuweisen, indem Sie nicht explizit ein tabindex-Attribut festlegen.
Dieses Beispiel zeigt die Benutzung von client-seitigem Scripting zur Validierung eines Formulars. Wenn Fehler gefunden werden, werden entsprechende Fehlermeldungen angezeigt. Das Beispiel benutzt die DOM-Funktionen, um Fehlermitteilungen, die aus einem Titel, einem kurzen Absatz, der erklärt, dass ein Fehler aufgetreten ist, und einer Liste mit Fehlern in einer geordneten Liste bestehen, hinzuzufügen. Der Inhalt des Titels wird als Link geschrieben, so dass er benutzt werden kann, um die Aufmerksamkeit des Benutzers auf den Fehler zu ziehen, indem die Fokus-Methode benutzt wird. Jeder Punkt in der Liste wird ebenfalls als Link geschrieben, der den Fokus auf das fehlerhafte Formularfeld setzt, wenn man dem Link folgt.
Der Einfachheit halber validiert das Beispiel nur zwei Textfelder, es kann aber leicht erweitert werden, um zu einem generischen Formular-Handler zu werden. Die client-seitige Validierung sollte nicht das einzige Mittel zur Validierung sein und sollte durch server-seitige Validierung unterstützt werden. Der Nutzen der client-seitigen Validierung liegt darin, dass Sie dem Benutzer eine unmittelbare Rückmeldung geben können und es ihm damit ersparen, darauf zu warten, dass die Fehler vom Server zurückkommen; außerdem hilft es dabei unnötigen Datenverkehr zum Server zu reduzieren.
Hier ist das Skript, das Event-Handler zu dem Formular hinzufügt. Wenn Scripting aktiviert ist, wird die validateNumbers()-Funktion aufgerufen, um die client-seitige Validierung durchzuführen bevor das Formular an den Server geschickt wird. Wenn Scripting nicht aktiviert ist, wird das Formular sofort an den Server geschickt, also sollte die Validierung auch auf dem Server implementiert sein.
Code-Beispiel:
window.onload = initialise;
function initialise()
{
// Ensure we're working with a relatively standards compliant user agent
if (!document.getElementById || !document.createElement || !document.createTextNode)
return;
// Add an event handler for the number form
var objForm = document.getElementById('numberform');
objForm.onsubmit= function(){return validateNumbers(this);};
}Hier ist die Validierungs-Funktion. Beachten Sie die Benutzung der createElement()-, createTextNode()- und appendChild()-DOM-Funktionen, um die Fehlermeldungs-Elemente zu erstellen.
Code-Beispiel:
function validateNumbers(objForm)
{
// Test whether fields are valid
var bFirst = isNumber(document.getElementById('num1').value);
var bSecond = isNumber(document.getElementById('num2').value);
// If not valid, display errors
if (!bFirst || !bSecond)
{
var objExisting = document.getElementById('validationerrors');
var objNew = document.createElement('div');
var objTitle = document.createElement('h2');
var objParagraph = document.createElement('p');
var objList = document.createElement('ol');
var objAnchor = document.createElement('a');
var strID = 'firsterror';
var strError;
// The heading element will contain a link so that screen readers
// can use it to place focus - the destination for the link is
// the first error contained in a list
objAnchor.appendChild(document.createTextNode('Errors in Submission'));
objAnchor.setAttribute('href', '#firsterror');
objTitle.appendChild(objAnchor);
objParagraph.appendChild(document.createTextNode('Please review the following'));
objNew.setAttribute('id', 'validationerrors');
objNew.appendChild(objTitle);
objNew.appendChild(objParagraph);
// Add each error found to the list of errors
if (!bFirst)
{
strError = 'Please provide a numeric value for the first number';
objList.appendChild(addError(strError, '#num1', objForm, strID));
strID = '';
}
if (!bSecond)
{
strError = 'Please provide a numeric value for the second number';
objList.appendChild(addError(strError, '#num2', objForm, strID));
strID = '';
}
// Add the list to the error information
objNew.appendChild(objList);
// If there were existing errors, replace them with the new lot,
// otherwise add the new errors to the start of the form
if (objExisting)
objExisting.parentNode.replaceChild(objNew, objExisting);
else
{
var objPosition = objForm.firstChild;
objForm.insertBefore(objNew, objPosition);
}
// Place focus on the anchor in the heading to alert
// screen readers that the submission is in error
objAnchor.focus();
// Do not submit the form
objForm.submitAllowed = false;
return false;
}
return true;
}
// Function to validate a number
function isNumber(strValue)
{
return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
} Unten sind die Helfer-Funktionen, um die Fehlermeldung zu erstellen und den Fokus auf das entsprechende Formularfeld zu setzen.
Code-Beispiel:
// Function to create a list item containing a link describing the error
// that points to the appropriate form field
function addError(strError, strFragment, objForm, strID)
{
var objAnchor = document.createElement('a');
var objListItem = document.createElement('li');
objAnchor.appendChild(document.createTextNode(strError));
objAnchor.setAttribute('href', strFragment);
objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
// If strID has a value, this is the first error in the list
if (strID.length > 0)
objAnchor.setAttribute('id', strID);
objListItem.appendChild(objAnchor);
return objListItem;
}
// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
// Allow keyboard navigation over links
if (objEvent && objEvent.type == 'keypress')
if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
return true;
// set focus to the form control
var strFormField = objAnchor.href.match(/[^#]\w*$/);
objForm[strFormField].focus();
return false;
}Hier ist das HTML für das Beispielformular.
Code-Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ECMAScript Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form id="numberform" method="post" action="form.php">
<fieldset>
<legend>Numeric Fields</legend>
<p>
<label for="num1">Enter first number</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>
<label for="num2">Enter second number</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Submit Form">
</p>
</form>
</body>
</html>Dieses Beispiel beschränkt sich auf das client-seitige Scripting und sollte durch eine server-seitige Validierung unterstützt werden. Das Beispiel ist beschränkt auf die Erstellung von Fehlermeldungen, wenn client-seitiges Scripting zur Verfügung steht.
Hier ist ein Link zu einem funktionierenden Beispiel: Form Validation (Formular-Validierung)
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 The Document Object Model, More methods from Webreference.com
(derzeit keine aufgelistet)
Für Seiten, die neue Inhalte dynamisch erstellen:
Überprüfen Sie den Quellcode und prüfen Sie, ob der neue Inhalt nicht erstellt wurde, indem document.write(), innerHTML, outerHTML, innerText oder outerText benutzt wurde.
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.
Techniken, die durch Skript gesteuertes Blinken des Inhalt unterstützen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, das Blinken per Skript zu steuern, so dass es so eingestellt werden kann, dass es durch das Skript in weniger als fünf Sekunden aufhört. Skript wird benutzt, um den Blink-Effekt des Inhalts zu starten, um das Hin- und Herschalten zwischen dem sichtbaren und unsichtbaren Zustand zu steuern und den Effekt außerdem nach fünf Sekunden oder weniger zu stoppen. Die setTimeout()-Funktion kann benutzt werden, um den blinkenden Inhalt zwischen dem sichtbaren und dem unsichtbaren Zustand hin- und herzuschalten und ihn anzuhalten, wenn die Anzahl der Wiederholungen mal der dazwischen liegenden Zeit zusammen nahezu fünf Sekunden ausmachen.
Dieses Beispiel benutzt JavaScript, um das Blinken von einigen HTML- und XHTML-Inhalten zu steuern. JavaScript erstellt den Blink-Effekt, indem der Sichtbarkeitszustand des Inhalts geändert wird. Es steuert den Beginn des Effekts und hält ihn innerhalb von fünf Sekunden an.
Code-Beispiel:
...
<div id="blink1" class="highlight">New item!</div>
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "visible";
}
// blink "off" state
function hide()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "hidden";
}
// toggle "on" and "off" states every 450 ms to achieve a blink effect
// end after 4500 ms (less than five seconds)
for(var i=900; i < 4500; i=i+900)
{
setTimeout("hide()",i);
setTimeout("show()",i+450);
}
-->
</script>
...
Hier ist ein funktionierendes Beispiel dieses Codes: Using script to control blinking (Benutzung von Script, um das Blinken zu steuern).
Für jedes Instanz von blinkendem Inhalt:
Starten Sie einen Kurzzeitmesser für 5 Sekunden zu Beginn des Blink-Effekts.
Stellen Sie fest, ob das Blinken aufgehört hat, wenn der Kurzzeitmesser abläuft.
Für jede Instanz des blinken Inhalts 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.
HTML 4.01 und XHTML 1.0
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Verwirrung zu vermeiden, die durch das Erscheinen neuer Fenster, die nicht vom Benutzer angefordert wurden, auftreten könnte. Das plötzliche Öffnen neuer Fenster kann Benutzer desorientieren oder von ihnen komplett übersehen werden. Wenn der „document type“ das target-Attribut nicht erlaubt (es existiert nicht in HTML 4.01 Strict oder XHTML 1.0 Strict) oder wenn der Entwickler es vorzieht, dies nicht zu benutzen, können neue Fenster mit ECMAScript geöffnet werden. Das unten stehende Beispiel zeigt, wir man neue Fenster per Skript öffnet: es fügt einen Event-Handler zu einem Link (a-Element) hinzu und warnt den Benutzer, dass sich der Inhalt in einem neuen Fenster öffnen wird.
Markup:
Das Skript ist im „head“ des Dokumentes enthalten und der Link hat eine id, die von dem Skript als Aufhänger benutzt werden kann.
Code-Beispiel:
<script type="text/javascript" src="popup.js"></script>
…
<a href="help.html" id="newwin">Show Help</aSkript:
Code-Beispiel:
// Use traditional event model whilst support for event registration
// amongst browsers is poor.
window.onload = addHandlers;
function addHandlers()
{
var objAnchor = document.getElementById('newwin');
if (objAnchor)
{
objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
objAnchor.onclick = function(event){return launchWindow(this, event);}
// UAAG requires that user agents handle events in a device-independent manner
// but only some browsers do this, so add keyboard event to be sure
objAnchor.onkeypress = function(event){return launchWindow(this, event);}
}
}
function launchWindow(objAnchor, objEvent)
{
var iKeyCode, bSuccess=false;
// If the event is from a keyboard, we only want to open the
// new window if the user requested the link (return or space)
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;
// If not carriage return or space, return true so that the user agent
// continues to process the action
if (iKeyCode != 13 && iKeyCode != 32)
return true;
}
bSuccess = window.open(objAnchor.href);
// If the window did not open, allow the browser to continue the default
// action of opening in the same window
if (!bSuccess)
return true;
// The window was opened, so stop the browser processing further
return false;
}Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Aktivieren Sie jeden Link im Dokument um zu prüfen, ob dieser ein neues Fenster öffnet.
Prüfen Sie für jeden Link, der ein neues Fenster öffnet, ob er ein Skript benutzt, um alles Folgende zu erreichen:
es wird darauf hingewiesen, dass sich der Link in einem neuen Fenster öffnet,
es werden geräte-unabhängige Event-Handler benutzt und
es erlaubt es dem Browser, den Inhalt im gleichen Fenster zu öffnen, wenn kein neues Fenster geöffnet wurde.
#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.
HTML und XHTML, Skript
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eingefügte Elemente der Benutzerschnittstelle auf eine solche Art und Weise in dem Document Object Model (DOM) zu platzieren, dass die Tab-Reihenfolge und die Lesereihenfolge des Screenreaders durch das Standardverhalten des Benutzeragenten korrekt festgelegt werden. Diese Technik kann für jedes Element der Benutzerschnittstelle, das versteckt ist oder angezeigt wird, wie zum Beispiel Menüs und Dialoge, benutzt werden.
Die Lesereihenfolge in einem Screenreader basiert auf der Reihenfolge der HTML- oder XHTML-Elemente im Document Object Model, genau wie die Standard-Tabreihenfolge. Diese Technik fügt neuen Inhalt in das DOM unmittelbar nach dem Element, das aktiviert wurde, um das Skript auszulösen, ein. Das auslösende Element muss ein Link oder eine Schaltfläche sein und das Skript muss von seinem onclick-Event aus aufgerufen werden. Diese Elemente sind nativ fokussierbar und ihr onclick-Event ist geräte-unabhängig. Der Fokus bleibt auf dem aktivierten Element und der neue Inhalt, dahinter eingefügt, wird sowohl in der Tabreihenfolge als auch in der Lesereihenfolge der Screenreader der nächste Punkt.
Beachten Sie, dass diese Technik bei synchronen Aktualisierungen funktioniert. Bei asynchronen Aktualisierungen (manchmal AJAX genannt) wird eine zusätzliche Technik benötigt, um die assistierende Technik darüber zu informieren, dass der asynchrone Inahalt eingefügt wurde.
Dieses Beispiel erstellt ein Menü, wenn ein Link angeklickt wird, und fügt dieses nach dem Link ein. Der onclick-Event des Links wird benutzt, um das ShowHide-Skript aufzurufen und er reicht eine ID für das neue Menü als Parameter weiter.
Code-Beispiel:
<a href="#" onclick="ShowHide('foo',this)">Toggle</a>Das ShowHide-Skript erstellt einen div, der das neue Menü enthält und fügt einen Link darin ein. Die letzte Zeile ist das Herzstück des Skripts. Es findet den „parent“ des Elements, der das Skript ausgelöst hat und hängt den von ihm erstellten div als neues „child“ daran an´. Das führt dazu, dass der neue div im DOM nach dem Link kommt.´ Wenn der Benutzer auf Tab drückt, geht der Fokus zum ersten fokussierbaren Punkt in dem Menü, zu dem Link, den wir erstellt haben.
Code-Beispiel:
function ShowHide(id,src)
{
var el = document.getElementById(id);
if (!el)
{
el = document.createElement("div");
el.id = id;
var link = document.createElement("a");
link.href = "javascript:void(0)";
link.appendChild(document.createTextNode("Content"));
el.appendChild(link);
src.parentElement.appendChild(el);
}
else
{
el.style.display = ('none' == el.style.display ? 'block' : 'none');
}
}CSS wird benutzt, damit div und Link wie ein Menü aussehen.
Finden Sie alle Bereiche der Seite, die Dialoge auslösen, bei denen es sich nicht um Pop-up-Fenster handelt.
Prüfen Sie, ob die Dialoge durch das Klick-Ereignis auf eine Schaltfläche oder einen Link ausgelöst werden.
Prüfen Sie, indem Sie ein Werkzeug benutzen, dass es ihnen erlaubt, das vom Skript generierte DOM zu untersuchen ob der Dialog im DOM als nächstes kommt.
#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.
HTML und XHTML, Skript
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, einen Mechanismus zur Neugliederung von Komponenten zur Verfügung zu stellen, der sowohl äußerst einsatzfähig als auch barrierefrei ist. Die zwei gängigsten Mechanismen zur Neugliederung sind, Benutzer zu einer Einstellungsseite zu schicken, auf der sie Komponenten nummerieren können oder es ihnen zu ermöglichen, die Komponenten zu der gewünschten Position zu ziehen und dort loszulassen. Die ziehen-und-loslassen-Methode ist sehr viel brauchbarer, da sie es dem Benutzer erlaubt, die Elemente an Ort und Stelle anzuordnen, eines nach dem anderen, und so ein Gefühl für die Ergebnisse zu bekommen. Leider ist ziehen-und-loslassen auf den Gebrauch einer Maus angewiesen. Diese Technik erlaubt es Benutzern, mit einem Menü auf den Komponenten zu interagieren, um diese an Ort und Stelle auf geräte-unabhängige Weise neu zu gliedern. Sie kann anstelle oder zusammen mit einer ziehen-und-loslassen-Funktion zur Neugliederung benutzt werden.
Das Menü ist eine Liste mit Links, die den geräte-unabhängigen onclick-Event benutzt, um Skripte auszulösen, die den Inhalt neu gliedern. Der Inhalt wird, nicht nur visuell, im Document Object Model (DOM) neu gegliedert, so dass er für alle Geräte in der richtigen Reihenfolge ist.
Dieses Beispiel zeigt eine auf- und absteigende Neugliederung. Diese Vorgehensweise kann auch für eine zweidimensionale Neugliederung benutzt werden, indem man die Optionen links und rechts hinzufügt.
Die Komponenten in diesem Beispiel sind Listenelemente in einer ungeordneten Liste. Ungeordnete Listen sind ein sehr gutes semantisches Modell für Sets mit ähnlichen Elementen, wie diese Komponenten. Die Menü-Vorgehensweise kann auch für andere Arten von Gruppierungen benutzt werden.
Die Module sind Listenelemente und jedes Modul, zusätzlich zu Inhalten in div-Elementen, enthält ein Menü, das als verschachtelte Liste dargestellt wird.
Code-Beispiel:
<ul id="swapper">
<li id="black">
<div class="module">
<div class="module_header">
<!-- menu link -->
<a href="#" onclick="ToggleMenu(event);">menu</a>
<!-- menu -->
<ul class="menu">
<li><a href="#" onclick="OnMenuClick(event)"
onkeypress="OnMenuKeypress(event);">up</a></li>
<li><a href="#" onclick="OnMenuClick(event)"
onkeypress="OnMenuKeypress(event);">down</a></li>
</ul>
</div>
<div class="module_body">
Text in the black module
</div>
</div>
</li>
...
</ul>Da wir das Anzeigen und Verstecken von Menüs in den einfachen Baum-Beispielen behandelt haben, konzentrieren wird uns hier nur auf den Code, der die Module austauscht. Sobald wir die Events harmonisieren und die Standard-Link-Aktion aufheben, machen wir uns an die Arbeit. Zuerst legen wir eine Reihe von lokalen Variablen für die Elemente fest, mit denen wir arbeiten werden: das Menü, die neu zu gliedernden Module, den menuLink. Dann, nachdem wir die Richtung der Neugliederung geprüft haben, versuchen wir den zu tauschenden Knoten zu packen. Wenn wir einen finden, rufen wir dann swapNode() auf, um unsere zwei Module zu tauschen, und PositionElement(), um das absolut positionierte Menü zusammen mit dem Modul zu bewegen und dann setzen wir den Fokus wieder zurück auf den Menüpunkt, der das Ganze in Bewegung gesetzt hat.
Code-Beispiel:
function MoveNode(evt,dir)
{
HarmonizeEvent(evt);
evt.preventDefault();
var src = evt.target;
var menu = src.parentNode.parentNode;
var module = menu.parentNode.parentNode.parentNode;
var menuLink = module.getElementsByTagName("a")[0];
var swap = null;
switch(dir)
{
case 'up':
{
swap = module.previousSibling;
while (swap && swap.nodeType != 1)
{
swap = swap.previousSibling;
}
break;
}
case 'down':
{
swap = module.nextSibling;
while (swap && swap.nodeType != 1)
{
swap = swap.nextSibling;
}
break;
}
}
if (swap && swap.tagName == node.tagName)
{
module.swapNode(swap);
PositionElement(menu,menuLink,false,true);
}
src.focus();
}Das CSS für den Tausch des Knotens ist nicht viel anders als das unserer vorhergehenden Baum-Beispiele, mit ein paar Anpassungen bei der Größe und Farbe für die Module und das kleine Menü.
Code-Beispiel:
ul#swapper { margin:0px; padding:0px; list-item-style:none; }
ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em;
border:1px solid black; }
ul#swapper li a { color:white; text-decoration:none; font-size:90%; }
ul#swapper li div.module_header { text-align:right; padding:0 0.2em; }
ul#swapper li div.module_body { padding:0.2em; }
ul#swapper ul.menu { padding:0; margin:0; list-style:none; background-color:#eeeeee;
height:auto; position:absolute; text-align:left; border:1px solid gray; display:none; }
ul#swapper ul.menu li { height:auto; border:none; margin:0; text-align:left;
font-weight:normal; width:5em; }
ul#swapper ul.menu li a { text-decoration:none; color:black; padding:0 0.1em;
display:block; width:100%; }Finden Sie alle Komponenten in der Web-Einheit, die per ziehen-und-loslassen neu gegliedert werden können.
Prüfen Sie, ob es auch einen Mechanismus gibt, um diese neu zu gliedern, indem man Menüs, die aus Listen mit Links gebildet wurden, benutzt.
Prüfen Sie, ob die Menüs innerhalb der neu gliederbaren Elemente im DOM enthalten sind.
Prüfen Sie, ob Skripte zur Neugliederung nur durch den onclick-Event der Links ausgelöst werden.
Prüfen Sie, ob die Elemente im DOM neu gegliedert wurden und nicht nur visuell.
#2 bis #5 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.
Techniken, die ein client-seitiges Scripting bereitstellen.
Die Technik bezieht sich auf:
Diese Technik erlaubt es Benutzern, sich wiederholendes Material zu überspringen, indem dieses Material in einem Menü platziert wird, das man benutzergesteuert auf- und zuklappen kann. Der Benutzer kann das sich wiederholende Material überspringen, indem er das Menü zuklappt. Der Benutzer ruft ein Steuerelement der Benutzerschnittstelle auf, um die Elemente des Menüs zu verstecken oder zu entfernen. Der Abschnitt Ressourcen listet einige Techniken für Menüs, Funktionsleisten und Bäume auf, von denen jede benutzt werden kann, um einen Mechanismus zur Verfügung zu stellen, um die Navigation zu überspringen.
Anmerkung: Ähnliche Vorgehensweisen können durch die Benutzung von server-seitigem Scripting und dem erneuten Laden einer veränderten Version der Webseite implementiert werden.
Die Navigationslinks oben auf einer Webseite sind alles Einträge in einem Menü, das durch die Benutzung von HTML, CSS und Javascript implementiert wurde. Wenn die Navigationsleiste aufgeklappt ist, stehen die Navigationslinks dem Benutzer zur Verfügung. Wenn die Navigationsleiste zugeklappt ist, stehen die Links nicht zur Verfügung.
Code-Beispiel:
...
<script type="text/javascript">
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
</script>
...
<a href="#" onclick="toggle('navbar')">Toggle Navigation Bar</a>
<ul id="navbar">
<li><a href="http://target1.html">Link 1</a></li>
<li><a href="http://target2.html">Link 2</a></li>
<li><a href="http://target3.html">Link 3</a></li>
<li><a href="http://target4.html">Link 4</a></li>
</ul>
...Hier ist ein funktionierendes Beispiel dieses Codes: Toggle navigation bar with a link (Navigationsleiste mit einem Link auf- und zuklappen).
Das Inhaltsverzeichnis für eine Reihe von Webseiten wird in der Nähe des Beginns jeder Webseite wiederholt. Eine Schaltfläche am Beginn des Inhaltsverzeichnisses lässt den Benutzer dieses entfernen oder es auf der Seite wiederherstellen.
Code-Beispiel:
...
<script type="text/javascript">
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
</script>
...
<button onclick="return toggle('toc');">Toggle Inhaltsverzeichnis</button>
<div id="toc">
...
</div>
...Hier ist ein funktionierendes Beispiel dieses Codes: Toggle Inhaltsverzeichnis with a button (Inhaltsverzeichnis über eine Schaltfläche auf- und zuklappen).
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob es irgendein Steuerelement der Benutzerschnittstelle gibt, das es ermöglicht, den sich wiederholenden Inhalt auf- oder zuzuklappen.
Prüfen Sie, ob, wenn der Inhalt aufgeklappt ist, dieser in dem durch Software bestimmten Inhalt an einem logischen Platz in der Lesereihenfolge enthalten ist.
Prüfen Sie, ob, wenn der Inhalt zugeklappt ist, dieser nicht Teil des durch Software bestimmten Inhalts 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.
HTML und XHTML, Skript
Die Technik bezieht sich auf:
HTML 4.01 definiert nur das tabindex-Attribut für a, area, button, input, object, select und textarea und begrenzt seinen Wert auf den Bereich zwischen 0 und 32767. Die Benutzung von tabindex mit anderen Element-Arten und der tabindex-Wert -1 wird in Internet Explorer 5.01 und höher, in Firefox 1.5 und höher, in Opera 9.5 und höher und in Camino unterstützt. Beachten Sie, dass die Änderung des Fokus durch Skripte ein unvorhersehbares Verhalten in Screenreadern, die einen virtuellen Cursor benutzen, auslösen kann.
Das Ziel dieser Technik ist es zu zeigen, wie man den Zugriff per Tastatur auf ein Steuerelement der Benutzerschnittstelle, das durch eine Einwirkung auf statische HTML-Elemente wie zum Beispiel div oder span implementiert wurde, zur Verfügung stellen kann. Diese Technik stellt sicher, dass das Element fokussierbar ist, indem das tabindex-Attribut festgelegt wird, und sie stellt sicher, dass die Funktion von der Tastatur aus ausgelöst werden kann, indem ein onkeyup- oder ein onkeypress-Handler zusätzlich zum onclick-Handler zur Verfügung gestellt wird.
Wenn das tabindex-Attribut den Wert 0 hat, kann das Element per Tastatur fokussiert werden und es wird in die Tab-Reihenfolge des Dokumentes aufgenommen. Wenn das tabindex-Attribut den Wert -1 hat, kann man nicht per Tab zu dem Element gehen, aber der der Fokus kann durch Software gesetzt werden, indem man element.focus() benutzt.
Da statische HTML-Elemente keine mit ihnen verbundenen Funktionen haben, ist es nicht möglich, eine Backup-Implementierung oder -Erklärung in Umgebungen, in denen Scripting nicht zur Verfügung steht, bereitzustellen. Diese Technik sollte nur in Umgebungen benutzt werden, in denen man sich auf das client-seitige Scripting verlassen kann.
Anmerkung: Solche Steuerelemente der Benutzerschnittstelle müssen nach wie vor das Erfolgskriterium 4.1.2 erfüllen. Die Anwendung dieser Technik ohne die Bereitstellung von role-, name- und state-Informationen zum Steuerelement der Benutzerschnittstelle führt zu Fehler F59, Fehler bei Erfolgskriterium 4.1.2, weil Script benutzt wird, um div oder span zu einem Steuerelement der Benutzerschnittstelle in HTML zu machen.
Das div-Element auf der Seite erhält ein einzigartiges id-Attribut und ein tabindex-Attribut mit dem Wert 0. Ein Skript benutzt das Document Object Model (DOM), um das div-Element durch seine id zu finden und den onclick-Handler und den onkeyup-Handler hinzuzufügen. Der onkeyup-Handler ruft die Funktion auf, wenn die Eingabetaste gedrückt wird. Beachten Sie, dass das div-Element in das DOM geladen sein muss, bevor es gefunden und verändert werden kann. Dies wird normalerweise dadurch erreicht, dass das Skript aus dem onload-Event des body-Elements aufgerufen wird. Das Skript zum Hinzufügen des Event-Handlers wird nur ausgeführt, wenn der Benutzeragent JavaScript unterstützt und dieses aktiviert ist.
Code-Beispiel:
...
<script type="text/javascript">
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
//return false from the function to make certain that the href of the link does not get invoked
return false;
}
// this is the function to perform the action when the Enter key has been pressed.
function doSomethingOnEnter(event) {
var key = 0;
// Determine the key pressed, depending on whether window.event or the event object is in use
if (window.event) {
key = window.event.keyCode;
} else if (event) {
key = event.keyCode;
}
// Was the Enter key pressed?
if (key == 13) {
return doSomething(event);
}
// The event has not been handled, so return true
return true;
}
// This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing
// div element. This function must be called after the div element with id="active" has been loaded into the DOM.
// In this example the setUpActions() function is called from the onload event for the body element.
function setUpActions() {
// get the div object
var active=document.getElementById("active");
// assign the onclick handler to the object.
// It is important to return false from the onclick handler to prevent the href attribute
// from being followed after the function returns.
active.onclick=doSomething;
// assign the onkeyup handler to the object.
active.onkeyup=doSomethingOnEnter;
}
</script>
<body onload="setUpActions();">
<p>Here is the link to modify with a javascript action:</p>
<div>
<span id="active" tabindex="0">Do Something</span>
</div>
<div id="message">Hello, world!</div>
...Hier ist ein funktionierendes Beispiel dieses Codes: Creating Divs with Actions using JavaScript (Erstellung von Divs mit Aktionen durch die Benutzung von JavaScript).
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 Scripts
HTML 4.01 Giving focus to an element
Accessible Rich Internet Applications (WAI-ARIA) Version 1.0 Global States and Properties
WAI-ARIA Primer, Provision of the keyboard or input focus
Firefox support for ARIA: Accessible Rich Internet Applications
Internet Explorer, HTML and DHTML Reference, tabIndex Property
In einem Benutzeragenten, der Scripting unterstützt:
Klicken sie mit der Maus auf das Steuerelement
Prüfen Sie, ob die Scripting-Funktion korrekt ausgeführt wird
Prüfen Sie, ob es möglich ist, per Tastatur zu dem Steuerelement zu navigieren und diesem den Fokus zu geben
Setzen sie den Tastatur-Fokus auf das Steuerelement
Prüfen Sie, ob das Drücken der EINGABETASTE die Scripting-Funktion aufruft.
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.
Client-seitiges Scripting, das mit HTML und XHTML zusammen benutzt wird
Die Technik bezieht sich auf:
Der Zweck dieser Technik ist es, Benutzern zu erlauben zu entscheiden, ob zusätzliche Information zum dem Linktext hinzugefügt werden sollen, so dass die Links auch außerhalb des Kontextes verständlich sind.
Einige Benutzer ziehen es vor, Links zu haben, die autark sind und wo es nicht nötig ist, den Kontext des Links zu erkunden. Andere Benutzer finden, dass das Aufnehmen der Kontextinformationen in jeden Link eine ständige Wiederholung ist und dass es ihre Fähigkeit, eine Site zu benutzen, verringert. Die Benutzer von assistierenden Techniken waren bei ihren Rückmeldungen an die Arbeitsgruppe dazu, was vorzuziehen ist, geteilter Meinung. Diese Technik erlaubt es Benutzern, die Methode zu nehmen, die für sie am besten funktioniert.
Es gibt einen Link nahe am Beginn der Seite, der den Linktext der Links auf der Seite erweitert, so dass kein zusätzlicher Kontext notwendig ist, um den Zweck eines jeden Links zu verstehen. Es muss immer möglich sein, den Zweck des Links zur Erweiterung direkt durch dessen Linktext zu verstehen.
Diese Technik erweitert die Links nur auf der aktuellen Seitenansicht. Es ist auch möglich und wäre in manchen Fällen ratsam, diese Einstellung in einem Cookie oder einem server-seitigen Benutzerprofil zu speichern, so dass Benutzer diese Auswahl nur einmal pro Site treffen müssten.
Dieses Beispiel benutzt Javascript, um Kontextinformationen direkt zu dem Text eines Links hinzuzufügen. Die Link-Klasse wird benutzt um festzulegen, welcher zusätzlicher Text hinzugefügt werden soll. Wenn der Link „Links erweitern“ („Expand Links“) aktiviert wird, wird jeder Link auf der Seite getestet um zu sehen, ob zusätzlicher Text hinzugefügt werden sollte.
Code-Beispiel:
...
<script type="text/javascript">
var expanded = false;
var linkContext = {
"hist":" version of The History of the Web",
"cook":" version of Cooking for Nerds"
};
function doExpand() {
var links = document.links;
for each (link in links) {
var cn = link.className;
if (linkContext[cn]) {
span = link.appendChild(document.createElement("span"));
span.setAttribute("class", "linkexpansion");
span.appendChild(document.createTextNode(linkContext[cn]));
}
}
objUpdate = document.getElementById('expand');
if (objUpdate)
{
objUpdate.childNodes[0].nodeValue = "Collapse links";
}
expanded = true;
}
function doCollapse() {
objUpdate = document.getElementById('expand');
var spans = document.getElementsByTagName("span");
var span;
// go backwards through the set as removing from the front changes indices
// and messes up the process
for (i = spans.length - 1; i >= 0; i--) {
span = spans[i];
if (span.getAttribute("class") == "linkexpansion")
span.parentNode.removeChild(span);
}
if (objUpdate)
{
objUpdate.childNodes[0].nodeValue = "Expand links";
}
expanded = false;
}
function toggle() {
if (expanded) doCollapse();
else doExpand();
}
</script>
...
<h1>Books for download</h1>
<p><button id="expand" onclick="toggle();">Expand Links</button></p>
<ul>
<li>The History of the Web: <a href="history.docx" class="hist">Word</a>, <a href="history.pdf" class="hist">PDF</a>, <a href="history.html" class="hist">HTML</a> </li>
<li>Cooking for Nerds: <a href="history.docx" class="cook">Word</a>, <a href="history.pdf" class="cook">PDF</a>, <a href="history.html" class="cook">HTML</a> </li>
</ul>
...Hier ist ein funktionierendes Beispiel dieses Codes:: Providing link expansions on demand (Bereitstellung von Link-Erweiterungen auf Anfrage).
Prüfen Sie, ob es nahe dem Beginn der Seite einen Link zur Erweiterung von Links gibt
Prüfen Sie, ob der in Schritt 1 ermittelte Link durch den Linktext alleine identifiziert werden kann
Finden Sie alle Links auf der Seite, die nicht vom Linktext alleine identifiziert werden können
Aktivieren Sie das in Schritt 1 ermittelte Steuerelement
Prüfen Sie, ob der Zweck der in Schritt 3 identifizierten Links nun aus dem Linktext alleine bestimmt werden kann
Tests #1, #2 und #5 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.
HTML und XHTML, CSS, Skript
Die Technik bezieht sich auf:
Diese Technik kann bei Benutzeragenten benutzt werden, welche die :focus-Pseudoklasse nicht unterstützen, aber Skript unterstützen, einschließlich Microsoft Internet Explorer.
Der Zweck dieser Technik ist es, dem Autor zu erlauben, JavaScript zu benutzen, um CSS anzuwenden, um den Fokus-Indikator sichtbarer zu machen als er normalerweise sein würde. Wenn ein Element des Fokus erhält, werden Hintergrundfarbe und Rahmen geändert, um diese visuell ausgeprägter zu machen. Wenn das Element den Fokus verliert, kehrt es zu seiner ursprünglichen Formatierung zurück. Diese Technik kann auf allen HTML-Benutzeragenten benutzt werden, die Skript und CSS unterstützen, egal ob diese die die :focus-Pseudoklasse unterstützen.
In diesem Beispiel wird, wenn der Link den Fokus erhält, dessen Hintergrund gelb. Wenn er den Fokus verliert wird das gelb entfernt. Beachten Sie, dass Sie, wenn der Link von Anfang an eine Hintergrundfarbe hätte, im Skript statt "" diese Farbe benutzen würden.
Code-Beispiel:
...
<script>
function toggleFocus(el)
{
el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
}
</script>
...
<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
...Gehen Sie per Tab zu jedem Element auf der Seite
Prüfen Sie, ob der Fokus-Indikator sichtbar ist
Schritt #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.
Skript, das mit HTML oder XHTML benutzt wird.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist die Anzeige einer Fehlermeldung vorzuführen, wenn die client-seitige Validierung eines Formularfeldes fehlgeschlagen ist. Anchor-Elemente werden benutzt, um die Fehlermeldungen in einer Liste anzuzeigen und werden über den zu validierenden Feldern eingefügt. Anchor-Elemente werden in den Fehlermeldungen benutzt, so dass der Fokus auf die Fehlermeldung(en) gesetzt werden kann, um damit die Aufmerksamkeit des Benutzers darauf zu ziehen. Der href der anchor-Elemente enthält einen seiten-internen Link, der die Felder, in denen der/die Fehler gefunden wurden, referenziert.
In einer eingesetzten Anwendung tritt eine client-seitige Validierung nicht auf, wenn Javascript abgeschaltet ist. Daher wäre diese Technik nur in Situationen ausreichend, in denen man für die Konformität auf Scripting angewiesen ist oder wenn auch server-seitige Validierungstechniken benutzt werden, um jegliche Fehler zu erfassen und die Seite mit Informationen über die fehlerhaften Felder zurückzugeben.
Dieses Beispiel validiert sowohl Pflichtfelder als auch Felder, bei denen ein bestimmtes Format vorgeschrieben ist. Wenn ein Fehler erkannt wird, fügt das Skript eine Liste mit Fehlermeldungen in das DOM ein und bewegt den Fokus zu ihnen.
HTML- und Javascript-Code
Hier ist das HTML für das Beispielformular.
Code-Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/validate.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="scripts/validate.js"/>
</head>
<body>
<h1>Form Validation</h1>
<p>The following form is validated before being submitted if scripting is available,
otherwise the form is validated on the server. All fields are required, except those
marked optional. If errors are found in the submission, the form is cancelled and
a list of errors is displayed at the top of the form.</p>
<p> Please enter your details below. </p>
<h2>Validating Form</h2>
<form id="personalform" method="post" action="index.php">
<div class="validationerrors"/>
<fieldset>
<legend>Personal Details</legend>
<p>
<label for="forename">Please enter your forename</label>
<input type="text" size="20" name="forename" id="forename" class="string"
value=""/>
</p>
<p>
<label for="age">Please enter your age</label>
<input type="text" size="20" name="age" id="age" class="number" value=""/>
</p>
<p>
<label for="email">Please enter your email address</label>
<input type="text" size="20" name="email" id="email" class="email" value=""/>
</p>
</fieldset>
<p>
<input type="submit" name="signup" value="Sign up"/>
</p>
</form>
<h2>Second Form</h2>
<form id="secondform" method="post" action="index.php#focuspoint">
<div class="validationerrors"/>
<fieldset>
<legend>Second Form Details</legend>
<p>
<label for="suggestion">Enter a suggestion</label>
<input type="text" size="20" name="suggestion" id="suggestion"
class="string" value=""/>
</p>
<p>
<label for="optemail">Please enter your email address (optional)</label>
<input type="text" size="20" name="optemail" id="optemail"
class="optional email" value=""/>
</p>
<p>
<label for="rating">Please rate this suggestion</label>
<input type="text" size="20" name="rating" id="rating"
class="number" value=""/>
</p>
<p>
<label for="jibberish">Enter some jibberish (optional)</label>
<input type="text" size="20" name="jibberish" id="jibberish" value=""/>
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Add Suggestion"/>
</p>
</form>
</body>
</html> Hier ist das Javascript, das die Validierung ausführt und die Fehlermeldungen einfügt:
Code-Beispiel:
window.onload = initialise;
function initialise()
{
var objForms = document.getElementsByTagName('form');
var iCounter;
// Attach an event handler for each form
for (iCounter=0; iCounter<objForms.length; iCounter++)
{
objForms[iCounter].onsubmit = function(){return validateForm(this);};
}
}
// Event handler for the form
function validateForm(objForm)
{
var arClass = [];
var iErrors = 0;
var objField = objForm.getElementsByTagName('input');
var objLabel = objForm.getElementsByTagName('label');
var objList = document.createElement('ol');
var objError, objExisting, objNew, objTitle, objParagraph, objAnchor, objPosition;
var strLinkID, iFieldCounter, iClassCounter, iCounter;
// Get the id or name of the form, to make a unique
// fragment identifier
if (objForm.id)
{
strLinkID = objForm.id + 'ErrorID';
}
else
{
strLinkID = objForm.name + 'ErrorID';
}
// Iterate through input form controls, looking for validation classes
for (iFieldCounter=0; iFieldCounter<objField.length; iFieldCounter++)
{
// Get the class for the field, and look for the appropriate class
arClass = objField[iFieldCounter].className.split(' ');
for (iClassCounter=0; iClassCounter<arClass.length; iClassCounter++)
{
switch (arClass[iClassCounter])
{
case 'string':
if (!isString(objField[iFieldCounter].value, arClass))
{
if (iErrors === 0)
{
logError(objField[iFieldCounter], objLabel, objList, strLinkID);
}
else
{
logError(objField[iFieldCounter], objLabel, objList, '');
}
iErrors++;
}
break;
case 'number':
if (!isNumber(objField[iFieldCounter].value, arClass))
{
if (iErrors === 0)
{
logError(objField[iFieldCounter], objLabel, objList, strLinkID);
}
else
{
logError(objField[iFieldCounter], objLabel, objList, '');
}
iErrors++;
}
break;
case 'email' :
if (!isEmail(objField[iFieldCounter].value, arClass))
{
if (iErrors === 0)
{
logError(objField[iFieldCounter], objLabel, objList, strLinkID);
}
else
{
logError(objField[iFieldCounter], objLabel, objList, '');
}
iErrors++;
}
break;
}
}
}
if (iErrors > 0)
{
// If not valid, display error messages
objError = objForm.getElementsByTagName('div');
// Look for existing errors
for (iCounter=0; iCounter<objError.length; iCounter++)
{
if (objError[iCounter].className == 'validationerrors')
{
objExisting = objError[iCounter];
}
}
objNew = document.createElement('div');
objTitle = document.createElement('h2');
objParagraph = document.createElement('p');
objAnchor = document.createElement('a');
if (iErrors == 1)
{
objAnchor.appendChild(document.createTextNode('1 Error in Submission'));
}
else
{
objAnchor.appendChild(document.createTextNode(iErrors + ' Errors in Submission'));
}
objAnchor.href = '#' + strLinkID;
objAnchor.className = 'submissionerror';
objTitle.appendChild(objAnchor);
objParagraph.appendChild(document.createTextNode('Please review the following'));
objNew.className = 'validationerrors';
objNew.appendChild(objTitle);
objNew.appendChild(objParagraph);
objNew.appendChild(objList);
// If there were existing error, replace them with the new lot,
// otherwise add the new errors to the start of the form
if (objExisting)
{
objExisting.parentNode.replaceChild(objNew, objExisting);
}
else
{
objPosition = objForm.firstChild;
objForm.insertBefore(objNew, objPosition);
}
// Allow for latency
setTimeout(function() { objAnchor.focus(); }, 50);
// Don't submit the form
objForm.submitAllowed = false;
return false;
}
// Submit the form
return true;
}
// Function to add a link in a list item that points to problematic field control
function addError(objList, strError, strID, strErrorID)
{
var objListItem = document.createElement('li');
var objAnchor = document.createElement('a');
// Fragment identifier to the form control
objAnchor.href='#' + strID;
// Make this the target for the error heading
if (strErrorID.length > 0)
{
objAnchor.id = strErrorID;
}
// Use the label prompt for the error message
objAnchor.appendChild(document.createTextNode(strError));
// Add keyboard and mouse events to set focus to the form control
objAnchor.onclick = function(event){return focusFormField(this, event);};
objAnchor.onkeypress = function(event){return focusFormField(this, event);};
objListItem.appendChild(objAnchor);
objList.appendChild(objListItem);
}
function focusFormField(objAnchor, objEvent)
{
var strFormField, objForm;
// Allow keyboard navigation over links
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
{
return true;
}
}
// set focus to the form control
strFormField = objAnchor.href.match(/[^#]\w*$/);
objForm = getForm(strFormField);
objForm[strFormField].focus();
return false;
}
// Function to return the form element from a given form field name
function getForm(strField)
{
var objElement = document.getElementById(strField);
// Find the appropriate form
do
{
objElement = objElement.parentNode;
} while (!objElement.tagName.match(/form/i) && objElement.parentNode);
return objElement;
}
// Function to log the error in a list
function logError(objField, objLabel, objList, strErrorID)
{
var iCounter, strError;
// Search the label for the error prompt
for (iCounter=0; iCounter<objLabel.length; iCounter++)
{
if (objLabel[iCounter].htmlFor == objField.id)
{
strError = objLabel[iCounter].firstChild.nodeValue;
}
}
addError(objList, strError, objField.id, strErrorID);
}
// Validation routines - add as required
function isString(strValue, arClass)
{
var bValid = (typeof strValue == 'string' && strValue.replace(/^\s*|\s*$/g, '')
!== '' && isNaN(strValue));
return checkOptional(bValid, strValue, arClass);
}
function isEmail(strValue, arClass)
{
var objRE = /^[\w-\.\']{1,}\@([\da-zA-Z\-]{1,}\.){1,}[\da-zA-Z\-]{2,}$/;
var bValid = objRE.test(strValue);
return checkOptional(bValid, strValue, arClass);
}
function isNumber(strValue, arClass)
{
var bValid = (!isNaN(strValue) && strValue.replace(/^\s*|\s*$/g, '') !== '');
return checkOptional(bValid, strValue, arClass);
}
function checkOptional(bValid, strValue, arClass)
{
var bOptional = false;
var iCounter;
// Check if optional
for (iCounter=0; iCounter<arClass.length; iCounter++)
{
if (arClass[iCounter] == 'optional')
{
bOptional = true;
}
}
if (bOptional && strValue.replace(/^\s*|\s*$/g, '') === '')
{
return true;
}
return bValid;
}
Hier ist ein funktionierendes Beispiel dieser Technik, das durch die Benutzung von PHP, Javascript, CSS und XHTML implementiert wurde: Form Validation Example (Beispiel zur Formular-Validierung).
Erstellen Sie Fehlermeldungen, indem Sie anchor-Tags und ein entsprechendes Scripting per oben genannter Technik benutzen.
Laden Sie die Seite.
Geben Sie einen gültigen Wert in das/die Feld(er) ein, die mit einer Fehlermeldung verknüpft sind und verifizieren Sie, dass keine Fehlermeldungen angezeigt werden.
Geben Sie einen ungültigen Wert in das/die Feld(er) ein, die mit einer Fehlermeldung verknüpft sind und verifizieren Sie, dass die korrekte Fehlermeldung für das Feld angezeigt wird.
Verifizieren Sie, dass die Fehlermeldungen den Fokus erhalten.
Geben Sie einen gültigen Wert in das/die Feld(er) ein, die mit einer Fehlermeldung verknüpft sind und verifizieren Sie, dass die Fehlermeldung entfernt wird.
Wiederholen sie dies bei allen Feldern mit verknüpften Fehlermeldungen, die über anchor-Tags erstellt wurden.
Anmerkung: Es wird empfohlen, dass Sie die oben genannte Vorgehensweise auch unter Benutzung einer assistierenden Technik durchführen.
Tests #2, #3, #4 und #5 sind alle 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.
Techniken, die ein skript-gesteuertes Scrollen des Inhalts unterstützen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, Benutzern eines Möglichkeit zu geben, scrollende Inhalte anzuhalten, wenn das Scrollen von einem Skript erstellt wird. Scrollende Inhalte können für Benutzer mit geringem Sehvermögen oder kognitiven Behinderungen schwer oder unmöglich zu lesen sein. Die Bewegung kann auch einige Menschen ablenken, was es schwierig für sie macht, sich auf andere Teile der Webseite zu konzentrieren.
In diesem Beispiel werden CSS und Javascript benutzt, um einen Teil des Textes visuell in einem scrollenden Format darzustellen. Es wurde ein Link eingearbeitet, um die scrollende Bewegung anzuhalten.
Diese Implementierung zeigt den gesamten Text an und lässt den Link weg, wenn Javascript oder CSS nicht unterstützt werden oder inaktiv sind.
Der folgende Code ist eine berichtigte Version des webSemantic's Accessible Scroller (Stand Juli 2008).
Die XHTML-Komponente:
Code-Beispiel:
...
<div id="scroller">
<p id="tag">This text will scroll and a Pause/Scroll link will be present
when Javascript and CSS are supported and active.</p>
</div>
...Die CSS-Komponente :
Code-Beispiel:
...
body {font:1em verdana,sans-serif; color:#000; margin:0}
/* position:relative and overflow:hidden are required */
#scroller { position:relative; overflow:hidden; width:15em; border:1px solid #008080; }
/* add formatting for the scrolling text */
#tag { margin:2px 0; }
/* #testP must also contain all text-sizing properties of #tag */
#testP { visibility:hidden; position:absolute; white-space:nowrap; }
/* used as a page top marker and to limit width */
#top { width:350px; margin:auto; }
...Die JavaScript-Komponente:
Code-Beispiel:
var speed=50 // speed of scroller
var step=3 // smoothness of movement
var StartActionText= "Scroll" // Text for start link
var StopActionText = "Pause" // Text for stop link
var x, scroll, divW, sText=""
function onclickIE(idAttr,handler,call){
if ((document.all)&&(document.getElementById)){idAttr[handler]="Javascript:"+call}
}
function addLink(id,call,txt){
var e=document.createElement('a')
e.setAttribute('href',call)
var linktext=document.createTextNode(txt)
e.appendChild(linktext)
document.getElementById(id).appendChild(e)
}
function getElementStyle() {
var elem = document.getElementById('scroller');
if (elem.currentStyle) {
return elem.currentStyle.overflow;
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, '');
return compStyle.getPropertyValue("overflow");
}
return "";
}
function addControls(){
// test for CSS support first
// test for the overlow property value set in style element or external file
if (getElementStyle()=="hidden") {
var f=document.createElement('div');
f.setAttribute('id','controls');
document.getElementById('scroller').parentNode.appendChild(f);
addLink('controls','Javascript:clickAction(0)',StopActionText);
onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
document.getElementById('controls').style.display='block';
}
}
function stopScroller(){clearTimeout(scroll)}
function setAction(callvalue,txt){
var c=document.getElementById('controls')
c.childNodes[0].setAttribute('href','Javascript:clickAction('+callvalue+')')
onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction
('+callvalue+')')
c.childNodes[0].firstChild.nodeValue=txt
}
function clickAction(no){
switch(no) {
case 0:
stopScroller();
setAction(1,StartActionText);
break;
case 1:
startScroller();
setAction(0,StopActionText);
}
}
function startScroller(){
document.getElementById('tag').style.whiteSpace='nowrap'
var p=document.createElement('p')
p.id='testP'
p.style.fontSize='25%' //fix for mozilla. multiply by 4 before using
x-=step
if (document.getElementById('tag').className) p.className=document.getElementById
('tag').className
p.appendChild(document.createTextNode(sText))
document.body.appendChild(p)
pw=p.offsetWidth
document.body.removeChild(p)
if (x<(pw*4)*-1){x=divW}
document.getElementById('tag').style.left=x+'px'
scroll=setTimeout('startScroller()',speed)
}
function initScroller(){
if (document.getElementById && document.createElement && document.body.appendChild) {
addControls();
divW=document.getElementById('scroller').offsetWidth;
x=divW;
document.getElementById('tag').style.position='relative';
document.getElementById('tag').style.left=divW+'px';
var ss=document.getElementById('tag').childNodes;
for (i=0;i<ss.length;i++) {sText+=ss[i].nodeValue+" "};
scroll=setTimeout('startScroller()',speed);
}
}
function addLoadEvent(func) {
if (!document.getElementById | !document.getElementsByTagName) return
var oldonload = window.onload
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload()
func()
}
}
}
addLoadEvent(initScroller)Es gibt ein funktionierendes Beispiel dieses Codes: Example of using script to scroll content and providing a mechanism to pause it (Beispiel für die Benutzung von Script, um Inhalte zu scrollen und Bereitstellung eines Mechanismus, um dies anzuhalten).
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob ein Mechanismus zum Anhalten des scrollenden Inhalts zur Verfügung stehr.
Benutzen Sie den Anhalt-Mechanismus, um den scrollenden Inhalt anzuhalten.
Prüfen Sie, ob das Scrollen aufgehört hat und auch nicht von alleine wieder anfängt.
Prüfen Sie, ob es einen Mechanismus zum erneuten Starten des angehaltenen Inhalts gibt.
Benutzern Sie den Neustart-Mechanismus, um den scrollenden Inhalt erneut zu starten.
Prüfen Sie, ob das Scrollen an dem Punkt, an dem es angehalten wurde, wieder aufgenommen wird.
Tests #3 bis #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.
Client-seitiges Scripting.
Die Technik bezieht sich auf:
Die Berechnung von Größe und Position kann komplex sein und unterschiedliche Browser können unterschiedliche Ergebnisse hervorbringen. Dies kann vorkommen, wenn die CSS-Formatierung Innenabstand (padding), Ränder und Breiten für ein Objekt mischt oder wenn sie einen offset-Wert und einen einfachen Wert mischt, z.B. offsetWidth und width. Einige davon verhalten sich als Reaktion auf das Zoomen unterschiedlich. Lesen Sie dazu MSDN: Fix the Box Instead of Thinking Outside It für eine Erklärung der Art und Weise, wie Internet Explorer 6 und später sich von früheren Versionen des Internet Explorers unterscheiden.
Das Ziel dieser Technik ist es, die Größe und Position von Elementen auf eine Art und Weise zu berechnen, die angemessen skaliert, wenn die Textgröße skaliert wird.
Es gibt in JavaScript vier Eigenschaften, die dabei helfen, die Größe und Position von Elementen zu bestimmen:
offsetHeight (die Höhe des Elements in Pixeln)
offsetWidth (die Breite des des Elements in Pixeln)
offsetLeft (die Entfernung des Elements links von seinem parent (offsetParent) in Pixeln)
offsetTop (die Entfernung des Elements oben von seinem parent (offsetParent) in Pixeln)
Die Berechnung der Größe und Breite durch die Benutzung von offsetHeight und offsetWidth ist unkompliziert, aber wenn man die linke und rechte Position eines Objekts als absolute Werte berechnet, dann muss man das parent-Element berücksichtigen. Die calculatePosition-Funktion unten geht schrittweise durch alle parent-Knoten eines Elements, um diesem einen finalen Wert zu geben. Die Funktion benötigt zwei Parameter; objElement (der Name des betreffenden Elements) und das offset property (offsetLeft oder offsetTop):
Die Javascript-Funktion:
Code-Beispiel:
function calculatePosition(objElement, strOffset)
{
var iOffset = 0;
if (objElement.offsetParent)
{
do
{
iOffset += objElement[strOffset];
objElement = objElement.offsetParent;
} while (objElement);
}
return iOffset;
}
Das folgende Beispiel illustriert die Benutzung der oben genannten Funktion, indem ein Objekt unterhalb eines Referenz-Objekts ausgerichtet wird, mit dem gleichen Abstand von links:
Code-Beispiel:
// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Öffnen Sie eine Seite, die so gestaltet ist, dass sie Container-Größen anpasst, wenn sich die Textgröße ändert.
Vergrößern Sie die Textgröße bis auf 200%, indem sie die Textgrößenanpassung des Browsers benutzen (nicht die Zoom-Funktion).
Untersuchen sie den Text um sicherzustellen, dass die Größe des Textcontainers so angepasst wird, dass die Größe des Textes aufgenommen werden kann.
Stellen sie sicher, dass kein Text in Folge der Vergrößerung des Textes „abgeschnitten“ wurde oder verschwunden ist.
Tests #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.
Skript, das mit HTML oder XHTML benutzt wird.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es zu zeigen, wie man eine Sckripting-Funktion auf eine Art aufruft, die per Tastatur zugänglich ist, indem man diese an ein per Tastatur zugängliches Steuerelement anhängt. Um sicherzustellen, dass Skript-Funktionen (scripted actions) von der Tastatur aus aufgerufen werden können, sind diese mit „nativ ausführbaren (natively actionable)“ HTML-Elementen (Links und Schaltflächen) verknüpft. Der onclick-Event dieser Elemente ist geräte-unabhängig. Auch wenn „onclick“ danach klingt, als wäre dies an die Maus gebunden, wird dem onclick-Event tatsächlich der Standard-Prozess eines Links oder einer Schaltfläche zugewiesen. Der Standard-Prozess findet statt, wenn der Benutzer mit einer Maus auf das Element klickt, aber er findet ebenfalls statt, wenn der Benutzer den Fokus auf das Element setzt und die Eingabe- oder Leerschritt-Taste drückt und wenn das Element über das Barrierefreiheits-API ausgelöst wird.
Diese Technik ist auf client-seitiges Scripting angewiesen. Es ist allerdings nützlich, eine Backup-Implementierung oder -Erklärung für Umgebungen, in denen Scripting nicht zur Verfügung steht, bereitzustellen. Wenn Sie anchor-Elemente benutzen, um einen JavaScript-Prozess aufzurufen, wird die Backup-Implementierung oder -Erklärung über das href-Attribut bereitgestellt. Wenn Sie Schaltflächen benutzen, dann wird dies über die Formular-Funktion „Post“ bereitgestellt.
Link, der ein Skript ausführt und keinen Alternativprozess für „non-scripted“ Browser hat. Diese Methode sollte nur benutzt werden, wenn man auf das Skript als eine die Barrierefreiheit unterstützende Technik angewiesen ist.
Auch wenn wir nicht von dem Link aus navigieren wollen, müssen wir das href-Attribut auf dem a-Element benutzen, um daraus einen echten Link zu machen und das passende Ereignis zu erhalten. In diesem Fall benutzen wir „#“ als Linkziel, aber sie könnten irgendetwas benutzen. Dieser Link wird niemals navigiert.
Das „return false;“ am Ende der doStuff() event handling-Funktion sagt dem Browser, dass zu diesem URI nicht navigiert wird. Ohne dies würde die Seite aktualisiert werden, nachdem das Skript ausgeführt wurde.
Code-Beispiel:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a>Link, der Script ausführt, aber zu einer anderen Seite navigiert, wenn Script nicht zur Verfügung steht. Diese Methode kann benutzt werden, um Sites zu erstellen, die nicht auf Script angewiesen sind, dann und nur dann, wenn das Navigationsziel die gleiche Funktion bereitstellt wie das Script. Dieses Beispiel ist identisch mit Beispiel 1, mit der Ausnahme, dass sein href nun auf eine reale Seite, dostuff.htm, gesetzt ist. Dostuff.htm muss die gleiche Funktionalität bereitstellen wie das Script. Das „return false;“ am Ende der doStuff() event handling-Funktion sagt dem Browser, dass zu diesem URI nicht navigiert wird. Ohne dies würde der Browser zu dostuff.htm navigieren, nachdem das Skript ausgeführt wurde.
Code-Beispiel:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="dostuff.htm" onclick="return doStuff();">do stuff</a>Ein funktionierendes Beispiel dieses Codes steht zur Verfügung. Beachten Sie dazu Creating Action Links using JavaScript.
Schaltfläche, die ein Skript ausführt und bei Benutzern ohne Script auf die Formular-Funktion „Post“ zurückgreift. Diese Methode kann von Sites verwendet werden, die nicht auf Script angewiesen sind, dann und nur dann, wenn die Formular-Funktion „Post“ die gleiche Funktion bereitstellt wie das Script. Das onsubmit="return false;" verhindert, dass das Formular abgesendet wird.
Code-Beispiel:
<script>
function doStuff()
{
//do stuff
}
</script>
<form action="doStuff.aspx" onsubmit="return false;">
<input type="submit" value="Do Stuff" onclick="doStuff();" />
</form>Ein funktionierendes Beispiel dieses Codes steht zur Verfügung. Beachten Sie dazu Creating Action Buttons using JavaScript.
Schaltfläche, die ein Script ausführt, implementiert mit input type="image". Beachten Sie, dass ein alt-Attribut zum input hinzugefügt werden muss, um ein Text-Äquivalent für das Bild bereitzustellen. Diese Methode sollte nur benutzt werden, wenn man auf Script angewiesen ist.
Code-Beispiel:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<input type="image" src="stuff.gif" alt="Do stuff" onclick="return doStuff();" />Schaltfläche, die ein Script ausführt, implementiert mit input type="submit", input type="reset" oder input type="button". Diese Methode sollte nur benutzt werden, wenn man auf Script angewiesen ist.
Code-Beispiel:
<input type="submit" onclick="return doStuff();" value=”Do Stuff” />Schaltfläche, die ein Script ausführt, implementiert mit button…/button. Dies ist nützlich, wenn Sie mehr Kontrolle über das Aussehen Ihrer Schaltfläche haben wollen. In diesem bestimmten Beispiel enthält die Schaltfläche sowohl ein Symbol als auch etwas Text. Diese Methode sollte nur benutzt werden, wenn man auf Script angewiesen ist.
Code-Beispiel:
<button onclick="return doStuff();">
<img src="stuff.gif" alt="stuff icon">
Do Stuff
</button>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für alle Script-Aktionen, die mit a-, button- oder input-Elementen verknüpft sind:
In einem Benutzeragenten, der Scripting unterstützt:
Klicken sie mit der Maus auf das Steuerelement
Prüfen Sie, ob die Scripting-Funktion korrekt ausgeführt wird
Wenn es sich bei dem Steuerelement um ein anchor-Element handelt, prüfen Sie, ob der URI in dem href-Attribut des anchor-Elements nicht aufgerufen wird.
Prüfen Sie, ob es möglich ist, per Tastatur zu dem Steuerelement zu navigieren und diesem den Fokus zu geben
Setzen sie den Tastatur-Fokus auf das Steuerelement
Prüfen Sie, ob das Drücken der EINGABETASTE die Scripting-Funktion aufruft.
Wenn es sich bei dem Steuerelement um ein anchor-Element handelt, prüfen Sie, ob der URI in dem href-Attribut des anchor-Elements nicht aufgerufen wird.
In einem Benutzeragenten, der Scripting nicht unterstützt
Klicken sie mit der Maus auf das Steuerelement
Wenn es sich bei dem Steuerelement um ein anchor-Element handelt, prüfen Sie, ob der URI in dem href-Attribut des anchor-Elements aufgerufen wird.
Prüfen Sie, ob es möglich ist, per Tastatur zu dem Steuerelement zu navigieren und diesem den Fokus zu geben
Setzen sie den Tastatur-Fokus auf das Steuerelement
Wenn es sich bei dem Steuerelement um ein anchor-Element handelt, prüfen Sie, ob das Drücken der EINGABETASTE den URI des href-Attributs des anchor-Elements aufruft.
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 Text bewegen, blinken lassen oder aktualisieren und die einen statischen Textblock erstellen können.
Die Technik bezieht sich auf:
Einige Webseiten zeigen scrollenden Text an, weil nur begrenzt Platz zur Verfügung steht. Das Scrollen des Textes in einem kleinen Fenster stellt den Inhalt für Benutzer bereit, die schnell genug lesen können, führt aber bei Benutzern, die langsamer lesen oder assistierende Techniken benutzen, zu Problemen. Diese Technik stellt einen Mechanismus bereit, um die Bewegung zu stoppen und den gesamten Textblock statisch bereitzustellen. Der Text kann in einem separaten Fenster oder in einem (größeren) Abschnitt der Seite bereitgestellt werden. Benutzer können den Text dann in ihrer eigenen Geschwindigkeit lesen.
Diese Technik passt nicht, wenn der sich bewegende Text nicht auf einmal auf dem Bildschirm (z.B. eine lange Chat-Unterhaltung) angezeigt werden kann.
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 beachten Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen (CSS) und Konforme Alternativversionen verstehen.
Ein großer Textblock wird durch einen kleinen marquee-Bereich auf der Seite gescrollt. Eine Schaltfläche ermöglicht es dem Benutzer, das Scrollen anzuhalten und den gesamten Textblock anzeigen zu lassen.
Anmerkung: Dieses Code-Beispiel setzt voraus, dass sowohl CSS als auch JavaScript angeschaltet sind und zur Verfügung stehen.
Die CSS-Komponente :
Code-Beispiel:
#scrollContainer {
visibility: visible;
overflow: hidden;
top: 50px; left: 10px;
background-color: darkblue;
}
.scrolling {
position: absolute;
width: 200px;
height: 50px;
}
.notscrolling {
width: 500px;
margin:10px;
}
#scrollingText {
top: 0px;
color: white;
}
.scrolling #scrollingText {
position: absolute;
}
</a> Der Script- und HTML-Inhalt:
Code-Beispiel:
<script type="text/javascript">
var tid;
function init() {
var st = document.getElementById('scrollingText');
st.style.top = '0px';
initScrolling();
}
function initScrolling () {
tid = setInterval('scrollText()', 300);
}
function scrollText () {
var st = document.getElementById('scrollingText');
if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
st.style.top = (parseInt(st.style.top) - 5) + 'px';
} else {
var sc = document.getElementById('scrollContainer');
st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
}
}
function toggle() {
var scr = document.getElementById('scrollContainer');
if (scr.className == 'scrolling') {
scr.className = 'notscrolling';
clearInterval(tid);
document.getElementById('scrollButton').value="Shrink";
} else {
scr.className = 'scrolling';
initScrolling();
document.getElementById('scrollButton').value="Expand";
}
}
<input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
<div id="scrollContainer" class="scrolling">
<div id="scrollingText" class="on">
.... Text to be scrolled ...
</div>
</div>
...Hier ist ein funktionierendes Beispiel dieses Codes: Expanding Scrolling Text in Place (Ausklappen des scrollenden Textes an Ort und Stelle).
Für diese Technik gibt es keine Tests.
HTML und XHTML, das mit Script benutzt wird.
Die Technik bezieht sich auf:
Site-Designer wollen häufig Dialoge erstellen, die nicht die vom Browser bereitgestellten Pop-up-Fenster benutzen. Dies wird typischerweise erreicht, indem man den Dialoginhalt in einem div einschließt und den div über dem Seiteninhalt positioniert, indem man z-order und absolute Positionierung in CSS benutzt.
Damit sie barrierefrei sind, müssen die Dialoge einigen wenigen einfachen Regeln folgen.
Das Script, das den Dialog von dem onclick-Event eines Links oder einer Schaltfläche startet, auslösen.
Den Dialog-div im Document Object Model (DOM) direkt nach dem Element, das diesen ausgelöst hat, positionieren. Das auslösende Element behält den Fokus und das Einfügen des Dialoginhalts nach dem Element sorgt dafür, dass der Inhalt innerhalb des Dialogs als nächstes in der Lesereihenfolge der Screenreader und in der Tab-Reihenfolge kommt. Der Dialog kann absolut positioniert sein, um visuell irgendwo anders auf der Seite zu erscheinen. Dies kann man machen, indem man entweder den Dialog im HTML erstellt und ihn per CSS versteckt, wie im unten stehenden Beispiel, oder indem man ihn direkt hinter dem auslösenden Element per Script einfügt.
Stellen Sie sicher, dass das HTML innerhalb des Dialog-div den gleichen Barrierefreiheit-Standard erfüllt wie der andere Inhalt.
Es ist ebenfalls nett aber nicht immer notwendig, den Start-Link so zu machen, dass er zwischen geöffnetem und geschlossenem Dialog hin- und herschaltet, und den Dialog schließt, wenn der Tastaturfokus ihn verlässt.
Das HTML für dieses Beispiel beinhaltet ein auslösendes Element, in diesem Fall eine Schaltfläche, und einen div, der als Rahmen für den Dialog agiert.
Das auslösende Element ist eine Schaltfläche und das Script wird durch den onclick-Event ausgelöst. Dies sendet die entsprechenden Events an das Betriebssystem, so dass assistierende Techniken die Änderung im DOM wahrnehmen.
In diesem Beispiel verstecken die Schaltflächen Absenden (Submit) und Zurücksetzen (Reset) innerhalb des Dialogs einfach nur den div.
Code-Beispiel:
...
<button onclick="TogglePopup(event,true)"
name="pop0001">Options</button>
<div class="popover" id="pop0001">
<h3>Edit Sort Information</h3>
<form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
<fieldset>
<legend>Sort Order</legend>
<input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
<input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
</fieldset>
<div class="buttons">
<input type="submit" value="OK" />
<input type="reset" value="Cancel" />
</div>
</form>
</div>
...Die div-, Überschriften- und Formular-Elemente werden mit CSS formatiert, damit sie wie ein Dialog aussehen.
Code-Beispiel:
...
a { color:blue; }
a.clickPopup img { border:none; width:0; }
div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...Das Script schaltet zwischen der Anzeige des Popup-div hin und her, und zeigt und versteckt es damit.
Code-Beispiel:
...
function TogglePopup(evt,show)
{
HarmonizeEvent(evt);
var src = evt.target;
if ("click" == evt.type)
{
evt.returnValue = false;
}
var popID = src.getAttribute("name");
if (popID)
{
var popup = document.getElementById(popID);
if (popup)
{
if (true == show)
{
popup.style.display = "block";
}
else if (false == show)
{
popup.style.display = "none";
}
else
{
popup.style.display = "block" == popup.style.display ? "none" : "block";
}
if ("block" == popup.style.display)
{
//window.alert(document.documentElement.scrollHeight);
popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
}
}
}
}
function SubmitForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
function ResetForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
...Es gibt ein funktionierendes Beispiel: An options button that opens a dialog (Eine Options-Schaltfläche, die einen Dialog öffnet).
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
W4A Paper: Accessibility for Simple to Moderate-Complexity DHTML Web Sites by Cynthia C. Shelly and George Young, Microsoft Corporation. (PDF Format)
Microsoft Developer Network Whitepaper: Writing Accessible Web Applications von Cynthia C. Shelly und George Young. (Microsoft Word Format)
Microsoft Active Accessibility 2.0 SDK. Enthält Inspect32.exe und andere MSAA-Werkzeuge.
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.
Finden Sie alle Bereiche der Seite, die Dialoge auslösen, bei denen es sich nicht um Pop-up-Fenster handelt.
Prüfen Sie, ob die Dialoge geöffnet werden können, indem man per Tab zu dem Bereich geht und die Eingabetaste drückt.
Prüfen Sie ob der Dialog, wenn er einmal geöffnet ist, in der Tab-Reihenfolge als nächstes kommt.
Prüfen Sie, ob die Dialoge durch das Klick-Ereignis auf eine Schaltfläche oder einen Link ausgelöst werden.
Prüfen Sie, indem Sie ein Werkzeug benutzen, dass es ihnen erlaubt, das vom Skript generierte DOM zu untersuchen ob der Dialog im DOM als nächstes kommt.
Tests #2, #3, #4 und #5 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.