2016-03-26 4 views
1

Ich bin dabei, die Zugänglichkeit auf meiner Website zu verbessern. Ich möchte die Tab-Navigation so gut wie möglich zulassen, aber ich habe ein Problem mit Drop-Down-Menüs festgestellt. Das Dropdown würde öffnen, wenn der <li> ist in: Hover-Status, fügte ich css, um es auch zu öffnen, wenn: Fokus-Status, so dass es mit Tab-Navigation geöffnet wird. Das Problem ist, sobald die Dropdown-Liste geöffnet ist, schließt die nächste Registerkarte es .. (da es auf den Link innerhalb der <li> geht, und die <li> selbst verliert den Fokus).Wie kann die Tab-Navigation im Dropdown-Menü zugelassen werden?

Irgendwelche Ratschläge?

Hier ist eine kleine Geige zum spielen, es ist etwas, das ich bei Google gefunden und es verbessert habe, um das Problem zu demonstrieren. Versuchen Sie, tab zu drücken, bis das Dropdown geöffnet ist, und Sie werden sehen, dass in der nächsten Registerkarte geschlossen wird.

https://jsfiddle.net/xt3Lcvpy/

+0

Ich bin mit Bootstrap nicht allzu vertraut, aber das könnte Ihnen helfen, in die richtige Richtung zu weisen, sollte niemand Ihnen eine echte Antwort geben. [Tabs mit Dropdown] (http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp) – lovermanthing

+0

@Alvarez - Haben Sie eine Lösung dafür gefunden? Ich stehe mit einem ähnlichen Problem fest. –

Antwort

0

Verwenden Sie das tabindex-Attribut für diese. In dem Beispiel, das Sie freigegeben haben, werden alle übergeordneten Menüelemente mit dem Tabindex auf 0 gesetzt. Setzen Sie ähnliche Tabindex-Attribute (tabindex = "1, 2, 3 ... und so weiter") für die Untermenüpunkte und sie werden folgen.

Verwandte Themen