Hinzufügen von :focus zu Listenelementen im Dropdown-Menü

Question

Ich möchte die Listenelemente im folgenden Beispiel idealerweise mit CSS fokussierbar machen, um das Menü für Personen, die Tastaturen verwenden, zugänglich zu machen. Ist das möglich?

http://jsfiddle.net/Etr4F/612/

CSS (der Rest des CSS befindet sich im obigen Link):

div { 
    margin: 10px;
    padding: 10px; 
    border: 2px solid purple; 
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }

HTML:

Answer 1

Probieren Sie das aus: http://jsfiddle.net/peterjmag/EnVCf/6/

Um dies zum Laufen zu bringen, muss das übergeordnete Listenelement fokussierbar sein. Eine Möglichkeit dies zu tun ist, es einfach zu einem Link zu machen, wie ich es für dieses Beispiel getan habe, aber wenn Sie nicht möchten, dass es ein Link ist, können Sie es auch fokussierbar machen, indem Sie ein tabindex-Attribut hinzufügen. (Hier ist ein Beispiel mit tabindex: http://jsfiddle.net/peterjmag/EnVCf/8/.)

HTML

Klicken Sie zuerst hier und versuchen Sie dann, über die unten stehenden Menüpunkte zu tabben, ohne mit dem Cursor auf das lila Feld zu klicken. Wie kann ich das mit CSS erreichen?

        Auswählen

            Element 1
            Element 2
            Element 3

CSS

.nav {
    margin: 10px;
    padding: 10px;
    border: 2px solid purple;
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.nav > li > .dropdown {
    display: none;
}

.nav > li:hover > .dropdown,
.nav > li.hover > .dropdown {
    display: block;
    background: #f9f9f9;
    border-top: 1px solid purple;
}

.dropdown > li {
    padding: 5px;
    border-bottom: 1px solid #4f4f4f;
}

.dropdown > li:hover,
.dropdown > li.hover {
    background: white;
}

.dropdown > li:hover > a,
.dropdown > li.hover > a {
    color: red;
}

(Beachten Sie hier die zusätzlichen li.hover Selektoren, die erforderlich sind, um den Hover-Zustand bei Tastaturfokus zu simulieren.)

jQuery

$.fn.accessibleDropDown = function () {
    var el = $(this);

    /* Dropdown-Menüs tastaturzugänglich machen */

    $("a", el).on("focus", function() {
        $(this).parents("li").addClass("hover");
    }).blur(function() {
        $(this).parents("li").removeClass("hover");
    });
}

$(".nav").accessibleDropDown();

Ich habe jQuery 1.9 für dieses Beispiel verwendet (und den Event-Handler aktualisiert), aber es sollte bis zurück zu 1.7 funktionieren. Ich habe es von diesem Blog-Beitrag adaptiert: http://uablogs.missouri.edu/interface/2011/08/keyboard-accessible/