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.