Techniken für WCAG 2.0

Zum Inhalt

-

SCR29: Hinzufügen von per Tastatur zugänglichen Interaktionen zu statischen HTML-Elementen

Anwendbarkeit

HTML und XHTML, Skript

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

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.

Beschreibung

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.

Beispiele

Beispiel 1: Hinzufügen einer JavaScript-Funktion zu einem div-Element

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>
...

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

In einem Benutzeragenten, der Scripting unterstützt:

  1. Klicken sie mit der Maus auf das Steuerelement

  2. Prüfen Sie, ob die Scripting-Funktion korrekt ausgeführt wird

  3. Prüfen Sie, ob es möglich ist, per Tastatur zu dem Steuerelement zu navigieren und diesem den Fokus zu geben

  4. Setzen sie den Tastatur-Fokus auf das Steuerelement

  5. Prüfen Sie, ob das Drücken der EINGABETASTE die Scripting-Funktion aufruft.

Erwartete Ergebnisse

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.