Techniken für WCAG 2.0

Zum Inhalt

-

SCR35: Interaktionen per Tastatur zugänglich machen, indem die onclick-Events von Anchors und Schaltflächen benutzt werden

Anwendbarkeit

Skript, das mit HTML oder XHTML benutzt wird.

Die Technik bezieht sich auf:

Beschreibung

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.

Beispiele

Beispiel 1

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>

Beispiel 2

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.

Beispiel 3

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.

Beispiel 4

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();" />

Beispiel 5

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” />

Beispiel 6

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

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für alle Script-Aktionen, die mit a-, button- oder input-Elementen verknüpft sind:

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

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

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.