Techniken für WCAG 2.0

Zum Inhalt

-

H84: Benutzung einer Schaltfläche mit einem select-Element, um eine Handlung auszuführen

Anwendbarkeit

HTML und XHTML

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, den Benutzer steuern zu lassen, wann eine Handlung ausgeführt wird statt dass die Handlung als Nebeneffekt auftritt, wenn man einen Wert des select-Elements auswählt. Der Benutzer könnte die verschiedenen Werte des select-Elements genau betrachten oder versehentlich den falschen Wert auswählen, ohne dass dies dazu führt, dass die Handlung ausgeführt wird. Wenn der Benutzer mit seiner Wahl zufrieden ist, dann wählt er die Schaltfläche, um die Handlung auszuführen.

Dies ist besonders wichtig für Benutzer, die den Wert des select-Elements per Tastatur auswählen, da das navigieren durch die Optionen des select-Eelements den Wert des Steuerelements ändert.

Beispiele

Beispiel 1: Ein Kalender

Eine Webseite lässt den Benutzer jeden beliebigen Monat eines Jahres auswählen und zeigt den Kalender für diesen Monat an. Nachdem der Benutzer Monat und Jahr festgelegt hat lässt er eich den Kalender anzeigen, indem er die Schaltfläche „zeigen“ („show“) drückt. Dieses Beispiel ist auf client-seitiges Scripting zur Implementierung der Handlung angewiesen.

Code-Beispiel:

			<label for="month">Month:</label>
<select name="month" id="month">
  <option value="1">January</option>
  <option value="2"> February</option>
  ...
  <option value="12">December</option>
</select> 
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">

Beispiel 2: Auswahl einer Handlung

Ein select-Element enthält eine Liste mit möglichen Handlungen. Die Handlung wird nicht ausgeführt, bevor der Benutzer die Schaltfläche „Do it“ drückt.

Code-Beispiel:

			<form action="http://somesite.com/action" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  </select> 
  <button type="submit" name="submit" value="submit">Do It </button>
</form>              

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für jede select-Element/Button-Element-Kombination:

  1. Prüfen Sie, ob der Fokus (einschließlich Tastatur-Fokus) auf einer Option im select-Element nicht zu irgendwelchen Handlungen führt

  2. Prüfen Sie, ob das Auswählen der Schaltfläche die Handlung, die mit dem aktuellen select-Wert verbunden ist, ausführt

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.