Demo Multilevel-Dropdown-Menu

Warum eine Keyboard Steuerung?

Bei Dropdown-Menus wird die Keyboard-Steuerung meist vernachlässigt. Sobald aber CSS aktiviert ist, wird eine ganze Gruppe von Menschen vernachlässigt: Leute mit Sichtbehinderungen und Leute, welche die Maus nicht bedienen können. Die fehlende Implementierung von Keyboardsteuerung für Dropdown-Menus ist typisch, da für den Laien nicht ohne weiteres machbar. Accessibility-Puristen vermeiden deshalb solche Menus.
Doch das muss nicht so bleiben, denn die hiessige Steuerung funktioniert doch recht gut. Sie darf als akzeptable Zwischenlösung gelten, bis mit dem CSS die neuen Eigenschaften für die Navigation implementiert werden.

Die vorliegende Lösung restauriert die für normale Linklisten verfügbare Funktionalität der TAB-Taste. Sie restauriert damit ein Stück Konvention oder Erwartung. Sie möchte allerdings keinen Freibrief für wild verschachtelte Menulisten schreiben. Auch wenn hier eine Tastaturlösung vorliegt, sollte man dem Mausbenutzer nie mehr als zwei Klapplevel abverlangen.

Demo

Testlink ohne Tabindex

Testlink Tabindex 1

Testlink ohne Tabindex

Testlink Tabindex 1

Leistung und Beschränkungen.

Kompatibilität

Anleitung

Zum Code

Beispiel

<ul id="your_nav_id">
   <li>
      <a class="current dir">Label (in Path to current page)</a>
      <ul class="level1">
         <li>
            <ul class="level2">
               <li><a href="#">Link</a></li>
               <li><a class="current page">Current Page</a></li>
            </ul>
         </li>
         <li><a>Label</a>
            ...
         </li>
      </ul>
   </li>
</ul>

Zum Scriptaufruf

Sie können das Script pro Navigation aufrufen. Sie übergeben:

  1. Die Id der Navigation.
  2. Einen Integerwert für den Tabindex