Techniken für WCAG 2.0

Zum Inhalt

-

SCR2: Benutzung von redundanten Tastatur- und Maus-Event-Handlers

Anwendbarkeit

HTML und XHTML mit Scripting-Unterstützung.

Die Technik bezieht sich auf:

Beschreibung

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.

Beispiele

Beispiel 1

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>

Tests

Vorgehensweise

Laden Sie die Webseite und testen Sie die Events per Tastatur und indem Sie eine Maus benutzen.

  1. Prüfen Sie, ob das „Standard“-Bild wie erwartet angezeigt wird, wenn die Webseite geladen wird.

  2. Benutzung der Maus

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

    2. Bewegen Sie die Maus von dem Element weg. Prüfen Sie, ob sich das Bild zurück zu dem „Standard“-Bild ändert.

  3. Benutzung der Tastatur

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

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

  4. Verifizieren Sie, dass das Layout der anderen Elemente auf der Seite nicht tangiert wird, wenn das Bild geändert wird.

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.