Techniken für WCAG 2.0

Zum Inhalt

-

F42: Fehler bei Erfolgskriterium 1.3.1 und 2.1.1, weil Scripting Events benutzt werden, um Links auf eine Art zu emulieren, die nicht durch Software bestimmbar ist

Anwendbarkeit

HTML und XHTML mit Scripting.

Dieser Fehler bezieht sich auf:

Beschreibung

Dieser Fehler tritt auf, wenn JavaScript-Event-Handler an ein Element angehängt werden, um 'Links zu emulieren''. Man kann nicht per Tastatur mit der Tabulatortaste zu einem Steuerelement oder einem Link gehen, der auf diese Art erstellt wurde, und diese erhalten nicht den Tastaturfokus wie andere Steuerelemente und/oder Links. Wenn Scripting-Events benutzt werden, um Links zu emulieren, dann sind Benutzeragenten einschließlich assistierender Techniken möglicherweise nicht dazu in der Lage, die Links im Inhalt als Links zu identifizieren. Es kann sein, dass sie von assistierenden Techniken nicht als interaktive Steuerelemente erkannt werden oder sie werden möglicherweise zwar als interaktive Steuerelemente erkannt, werden aber nach wie vor nicht als Link erkannt. Solche Elemente erscheinen nicht in der Linkliste, die von Benutzeragenten oder assistierenden Techniken generiert wird.

Die <a href>- und <area>-Elemente sind dazu gedacht, Links auszuzeichnen.

Das Anhängen von Event-Handlern an Elemente, die normalerweise nicht interaktiv sind, wie beispielsweise span und div kann für Benutzer ziemlich verwirrend sein. Auch wenn man darauf achtet, einen Zugriff per Tastatur auf diese Elemente zur Verfügung zu stellen, kann es für Benutzer schwierig sein herauszufinden, dass es interaktive Steuerelemente im Inhalt gibt oder zu verstehen, welche Art von Verhalten sie von ihnen erwarten können. Zum Beispiel kann es sein, dass Benutzer nicht wissen, welche Tastenanschläge zur Aktivierung des Elementes vom Script unterstützt werden. Des Weiteren generieren diese Elemente nicht die gleichen Betriebssystem-Ereignisse wie interaktive Elemente, somit kann es sein, dass assistierende Techniken nicht darüber informiert werden, wenn Benutzer diese aktivieren.

Beispiele

Fehlerbeispiel 1: Scripting eines <span>-Elements

Scripted-Event-Handling wird zu einem span-Element hinzugefügt, so dass es als Link fungiert, wenn es mit der Maus angeklickt wird. Assistierende Techniken erkennen dieses Element nicht als Link.

Code-Beispiel:

				<span onclick="this.location.href='newpage.html'">
    Fake link
</span>

Fehlerbeispiel 2: Scripting eines <img>-Elements

Scripted-Event-Handling wird zu einem img-Element hinzugefügt, so dass es als Link fungiert, wenn es mit der Maus angeklickt wird. Assistierende Techniken erkennen dieses Element nicht als Link.

Code-Beispiel:

				   src="go.gif" 
   alt="go to the new page" 
   onclick="this.location.href='newpage.html'"

Fehlerbeispiel 3: Scripting eines <img>-Elements, mit Tastatur-Unterstützung

Scripted-Event-Handling wird zu einem img-Element hinzugefügt, so dass es als Link fungiert. In diesem Beispiel kann die Link-Funktionalität mit der Maus oder über die Eingabetaste aufgerufen werden, wenn der Benutzeragent dieses Element in die Tab-Kette eingefügt hat. Dennoch wird dieses Element nicht als Link erkannt.

Code-Beispiel:

				function doNav(url)
{
   window.location.href = url;
}

function doKeyPress(url)
{
   //if the enter key was pressed
   if (window.event.type == "keypress" &&
       window.event.keyCode == 13)
   {
      doNav(url);
   }
}

Das Markup für das Bild lautet:

Code-Beispiel:

				<p>
	<img src="bargain.jpg"
		tabindex="0" 
		alt="View Bargains"
		onclick="doNav('viewbargains.html');"
		onkeypress="doKeyPress('viewbargains.html');"
	>
</p>

Fehlerbeispiel 4: Scripting eines <div>-Elements

Dieses Beispiel benutzt Script, um dafür zu sorgen, dass sich ein div-Element wie ein Link verhält. Obwohl der Autor einen vollständigen Zugriff per Tastatur zur Verfügung gestellt hat und die Event-Handler vom Markup getrennt hat, um die Nutzung des des Inhalts zu einem neuen Zweck zu ermöglichen, wird das div-Element von assistierenden Techniken nicht als Link erkannt.

Code-Beispiel:

				window.onload = init;

function init()
{
	var objAnchor = document.getElementById('linklike');

	objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
	objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}

function changeLocation(objEvent, strLocation)
{
	var iKeyCode;

	if (objEvent && objEvent.type == 'keypress')
	{
		if (objEvent.keyCode)
			iKeyCode = objEvent.keyCode;
		else if (objEvent.which)
			iKeyCode = objEvent.which;

		if (iKeyCode != 13 && iKeyCode != 32)
			return true;
	}

	window.location.href = strLocation;
}

Das Markup für das div-Element lautet:

Code-Beispiel:

				<div id="linklike">
View the results of the survey.
</div>

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob es JavaScript Event-Handler auf einem Element gibt, das einen Link emuliert.

  2. Prüfen Sie, ob die durch Software bestimmte Rolle des Elements link ist.

Erwartete Ergebnisse