Techniken für WCAG 2.0

Zum Inhalt

-

F59: Fehler bei Erfolgskriterium 4.1.2, weil Script benutzt wird, um div oder span zu einem Steuerelement der Benutzerschnittstelle in HTML zu machen

Anwendbarkeit

HTML und XHTML mit Scripting.

Dieser Fehler bezieht sich auf:

Beschreibung

Dieser Fehler zeigt, wie die Benutzung von generischen HTML-Elementen zur Erstellung von Steuerelementen der Benutzerschnittstelle dazu führen kann, dass die Steuerelemente für assistierende Techniken unzugänglich sind. Assistierende Techniken sind darauf angewiesen, Kenntnis über die Rolle und den aktuellen Status einer Komponente zu haben, um diese Information an den Benutzer weiterzugeben. Viele HTML-Elemente haben gut definierte rollen, wie beispielsweise Links, Schaltflächen, Textfelder usw. Generische Elemente wie beispielsweise div und span haben keinerlei vorgegebenen Rollen. Wenn diese generischen Elemente benutzt werden, um in HTML Steuerelemente der Benutzerschnittstelle zu erstellen, dann ist es möglich, dass die assistierende Technik nicht die notwendigen Informationen hat, um das Steuerelement zu beschreiben und damit zu interagieren.

Lesen Sie unten im Abschnitt Ressourcen etwas über Links zu Spezifikationen, die Mechanismen beschreiben, um die notwendigen Informationen zu Rolle und Status zur Verfügung zu stellen, um komplett barrierefreie Steuerelemente der Benutzerschnittstelle zu erstellen.

Beispiele

Beispiel 1

Das folgende Beispiel ist ein Fehler, weil es ein Kontrollkästchen erstellt, indem span und ein Bild benutzt wird.

Code-Beispiel:

			  <p> 
  <span  onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> Include Signature 
  </span> 
  </p>

Beispiel 2

Hier ist der Scripting-Code, der die Bildquelle ändert, wenn man mit der Maus auf span klickt.

Code-Beispiel:

			
  var CHECKED = "check.gif"; 
  var UNCHECKED = "unchecked.gif"; 
  function toggleCheckbox(imgId) { 
  var theImg = document.getElementById(imgId); 
  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
  theImg.src = UNCHECKED; 
  // additional code to implement unchecked action 
  } 
  else { 
  theImg.src = CHECKED; 
  // additional code to implement checked action 
  } 
  } 

Ein auf diese Art erstelltes Kontrollkästchen wird mit assistierenden Techniken nicht funktionieren, da es keine Informationen gibt, die dieses als Kontrollkästchen identifizieren. Darüber hinaus ist dieses Beispiel auch nicht von der Tastatur aus bedienbar und würde an Richtlinie 2.1 scheitern.

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Durchsuchen Sie den Quellcode nach Elementen, denen Event-Handler innerhalb des Markups oder via Scripting zugewiesen wurden.

  2. Wenn diese Elemente als Steuerelemente der Benutzerschnittstelle fungieren, prüfen Sie, ob die Rolle des Steuerelements definiert wurde.

Erwartete Ergebnisse

Wenn Tests #2 falsch ist und das erstellte Steuerelement der Benutzerschnittstelle keine Information zur Rolle hat, dann trifft diese Fehlersituation zu.