Entries tagged as accessibilityblogparade

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.