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.