Es fehlt eine Überschrift!
Grafische Schaltflächen in Formularen
Eingabebehandlungen von grafischen Schaltflächen in Formularen (type="image") entsprechen der Eingabebehandlung von Schaltflächen in einer serverseitigen Image-Map. Entscheidend ist zu beachten:
- Es darf nur eine auszuführende Aktion geben, bzw.:
- Es dürfen keinesfalls mehrere Aktionen durch eine einzelne Schaltfläche ausgelöst werden.
Beispiel: einfache Aktion mit grafischer Schaltfläche
Im folgenden Beispiel ist die Bedienbarkeit mit der Tastatur möglich und der Alternativtext ist richtig gesetzt.
Quelltext
<form action="#" method="post">
<p><input name="waehlen" type="image" src="waehlen.gif" alt="Wählen" /></p>
</form>
Realisierung
Beispiele: mehrfache Aktionen mit grafischen Schaltflächen
Es folgen Beispiele zum Umgang mit mehreren ausführbaren Aktionen durch grafische Schaltflächen.
Beispiel 1: keine Tastaturbedienung möglich.
Sobald in einer einzelnen Grafik mehrere Optionen zur Verfügung gestellt werden, gibt es folgende Probleme:
- Für die einzelnen Bereiche kann kein Alternativtext vergeben werden.
- Es kann keine Bedienung mit der Tastatur erfolgen.
Das folgende, nicht barrierefreie Beispiel verdeutlicht die Problematik: In der Grafik sind zwei Optionen "Auswahl 1" und "Auswahl 2" durch einen integrierten Text visualisiert:
Quelltext
<form action="#" method="post">
<p><input type="image" src="auswahl.gif" alt="Auswahl 1 und Auswahl 2" /></p>
</form>
Realisierung
Für Tastaturnutzer sind die unterschiedlichen Optionen gesperrt, nur mit dem Mauszeiger können die alternativen Aktionen ausgewählt werden.
Beispiel 2: mit der Tastatur bedienbare grafische Schaltflächen
Die einzelnen Aktionen, die mit dem Formular ausgelöst werden können, müssen mittels einzelner Schaltflächen angeboten werden – auf diesem Wege ist auch die Vergabe eindeutiger Alternativtexte für die einzelnen Aktionen möglich:
Quelltext
<form action="#" method="post">
<p>
<input name="auswahl1" type="image" src="auswahl1.gif" alt="Auswahl 1" />
<input name="auswahl2" type="image" src="auswahl2.gif" alt="Auswahl 2" />
</p>
</form>
Realisierung
Die einzelnen Schaltflächen können nun sowohl mit der Maus als auch per Tastatur separat angesteuert werden.
Fatal error: Uncaught TypeError: array_filter(): Argument #2 ($callback) must be a valid callback or null, function "subnav_filter_3" not found or invalid function name in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/artikeluebersicht.php:68 Stack trace: #0 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/artikeluebersicht.php(68): array_filter() #1 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/_ENDE.php(5): include_once('/home/lfqdu6ah4...') #2 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/knowhow/image-maps/grafische-schaltflaechen.php(76): include_once('/home/lfqdu6ah4...') #3 {main} thrown in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/artikeluebersicht.php on line 68