< Die Webkrauts kapern Technikwürze - Arrrrr | Der ultimative Life Stream mit Yahoo! Pipes >

2007-10-16 Barrierearmes jQuery Dropdown Menü

Letzte Woche erhielt ich eine schriftliche Einladung vom MAIN_blogs-Team an der Accessibility Blog Parade teilzunehmen.

Wenn man schon so nett eingeladen wird, und es auch noch um ein so engagiertes und sinnvolles Projekt handelt, kann man natürlich unmöglich nein sagen :-)

Mein Beitrag zur Blog Parade und zur verbesserten Barrierefreiheit ist (m)ein:

Barrierearmes jQuery Dropdown Menü

Das jQuery Plugin basiert auf dem "accessible onchange select menu" von The Man in Blue.

Dieses Script besticht durch die intuitiven Auswahlmöglichkeiten eines Menüpunktes, in einem Select-Formular-Element, rein über die Tastatur. Bestätigt wird die Auswahl durch die Enter-Taste oder über das Verlassen des Elements mit der Tabulator-Taste. Die Auswahl kann durch die Escape-Taste abgebrochen werden.

Das einzige, aber leider sehr große, Problem dieses Scripts ist die fehlende Funktionalität ohne Javascript (damit büßt das Script, meiner Meinung nach, leider auch vollständig die Bezeichnung "Accesible" ein). Ohne Javascript hat der Nutzer nämlich leider überhaupt keine Möglichkeit das Formular abzuschicken.

Für ein kommunales Projekt, das leider erst in 6-7 Monaten online gehen wird, habe ich also ein Dropdown Menü entwickelt, dass auf die gleiche einfache Art bedienbar ist, aber bei nicht vorhandenem Javascript einen ordentlichen Absenden-Button anbietet.

jQuery-typisch kann das Script sehr einfach eingebaut werden. Dieser simple jQuery Aufruf fügt dem darauf folgendem HTML die notwendige Funktionalität hinzu:


$(function() {
        $('form').dropdownmenu();
});
 

<form action="http://blog.ginader.de/" name="dropdownmenu1" method="get">
        <fieldset>
                <legend>
                        An example form
                </legend>
                <label for="selector">
                        An example select menu
                </label>
                <select id="selector" name="selector">
                        <option value="0">Select Option</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                </select>
                <input type="submit" name="submit" value="go" />
        </fieldset>
</form><p>
 

Hier gibt es eine funktionierende Demo,
hier kann man das Script gezippt herunterladen,
und hier kann man das Script in Subversion anschauen, auschecken oder Bugs melden.

Trackbacks
No Trackbacks

Comments

micha149Zu dem "Accessable" Problem hätte ich evtl eine Lösung. Diese habe ich mir ausgedacht, da ich in meinem kommenden blog die Suchfunktion über AJAX realisieren möchte. Das geht leider auch nur wenn JS aktiviert ist.
Ich bin hin gegangen und habe in die form einen noscript-tag gesetzt, welcher dann den zubmitbutton enthält. So zeigt der Browser den Button an, wenn kein Javascript aktviert ist:



Alternativ könnte man es auch wieder einmal mit jQuery machenn... Dazu setzt man den button ins Formular und entfernt ihn mit Javascript. Also kein Script kein entfernen.

$(function() {
$("form input[@type = 'submit']").remove();
});

Gruß Micha
#1 micha149 (Homepage) on 2007-11-21 12:58 (Reply)
Dirk Ginader... und das ist genau das was das Script bereits tut ;-)
Danke trotzdem fuer deinen Beitrag :-)
#1.1 Dirk Ginader (Homepage) on 2007-11-21 16:14 (Reply)
JörgIch verwende 2 Selectboxen für Monat und Jahr in einem Formular. Die zweite Selectbox verhält sich nicht korrekt. Da schickt es mir das Formular bereits bei Klick auf das Formularelement ab. Wie mir scheint, funktioniert das Script momentan »nur« für Formulare mit einer einzigen Selectbox. Wäre dein Script in irgend einer Form erweiterbar, so das es auch mit einem Filterform mit 2 und mehr Selectboxen funktioniert?

Viele Grüße

Jörg
#2 Jörg on 2008-10-01 14:01 (Reply)
Dirk GinaderSollen die Selectboxen von einander abhängige Optionen anzeigen? (entweder nach reload oder mit Ajax) oder soll jedes davon das Formular abschicken?
#2.1 Dirk Ginader (Homepage) on 2008-10-01 15:01 (Reply)
JörgDie beiden Selectboxen befinden sich im gleichen Formular. Jedes einzelne schickt das Formular bei onchange ab.
#2.1.1 Jörg on 2008-10-07 11:28 (Reply)
HaschekDirks Skript funktioniert nur mit einer Select-Auswahl pro Formular, allerdings ist die Lösung für dein Problem ca. drei Zeilen dick, die es ins Skript einzufügen gilt. Da ich genau diese Möglichkeit mehrerer Selects pro Form just gerade auch gebraucht habe, liegt der Code hier vor: http://eye48.com/downloads/jquery.navform.js

PS@Dirk: stell mal die SQL-Fehlermeldungen in deinem Blog ab, nicht dass jemand Lust bekommt, noch mehr in die Richtung auszutesten :-)
#2.1.1.1 Haschek (Homepage) on 2008-10-07 19:44 (Reply)
Dirk GinaderHi Michael, danke fuer deinen Beitrag! :-)
Ich hatte vor das Script in kuerze mit nochmals reduzierten Barrieren neu aufzulegen. Deine Anpassung wird da auch mit einfliessen :-) (und wegen den SQL Meldungen muss ich wirklich mal schauen - die waren schonmal ausgeschalten...)
#2.1.1.1.1 Dirk Ginader (Homepage) on 2008-10-08 08:50 (Reply)
JörgDankefein … geht.
#2.1.1.1.2 Jörg on 2008-10-08 09:00 (Reply)
JörgWenn ich das Script "packe" und/oder mit anderen Javascript-Files zu einer einzigen zusammenfasse, um alles noch ein wenig für den Livebetrieb zu optimieren, funktioniert dies leider nicht mehr. Der Plan sieht vor, jedesmal wenn auf dem Zielsystem installiert wird, CSS minimiert abzulegen und die Menge an Javascript-Files "automatisiert" zu einer zusammen zu fassen.
#3 Jörg on 2009-03-26 11:50 (Reply)
Dirk GinaderDanke für den Bug report Jörg :-)
Es fehlten ein paar Semicolons. Das macht unkomprimiert nichts aus, da Zeilenumbrüche das gleiche machen wie Semincolons. Wenn die Zeilenumbrüche aber zum komprimieren entfernt werden, klappt das aber leider nicht mehr.
Ich habe das script eben schnell im SVN gefixt. Die neue Version 1.1 kannst Du Dir hier runterladen:
http://cli.gs/jquery.dropdownmenu
#3.1 Dirk Ginader (Homepage) on 2009-03-26 13:57 (Reply)
JörgDumme Frage … ist in dem Release auch die Erweiterung von Haschek (http://eye48.com/downloads/jquery.navform.js) enthalten?
#3.1.1 Jörg on 2009-03-26 14:20 (Reply)
JörgGeht … vielen Dank! Selbst mit Support für mehr als eine SelectBox in einem Formular. V 1.2 :-)
#3.1.2 Jörg on 2009-03-26 14:49 (Reply)
Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Gravatar/Favatar/Pavatar/MyBlogLog author images supported.
You can use [geshi lang=javascript/css/html4strict/php]your code[/geshi] tags to embed source code snippets