Please help make the menu control with the keyboard
http://www.w3.org/TR/wai-aria-practices/#menu
http://heydonworks.com/practical_aria_e ... bar-widget
Code: Select all
<nav id="touch_nav">
<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" class="menulevel1" role="menubar" aria-label="Menu page">
<li class="doc" role="presentation">
<a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="-1">
<span itemprop="name">Page</span></a>
</li>
<li class="sdoc" role="presentation">
<a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="0">// Active!
<span itemprop="name">Page2</span></a>
</li>
<li class="doc" role="presentation">
<a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="-1">
<span itemprop="name">Page3</span></a>
</li>
<li class="doc" role="presentation" aria-haspopup="true">
<a href="/?" itemprop="url" role="menuitem" tabindex="-1">
<span itemprop="name">Page_Submenu</span></a>
<ul itemscope="itemscope" class="menulevel2" role="menu" aria-hidden="true" aria-expanded="false" aria-label="Menu subpage" tabindex="0">
<li class="doc" role="presentation">
<a href="/?" itemprop="url" role="menuitem" tabindex="-1">
<span itemprop="name">Subpage1</span></a></li>
<li class="doc" role="presentation">
<a href="/?" itemprop="url" role="menuitem" tabindex="-1">
<span itemprop="name">Subpage2</span></a>
</li>
</ul>
</li>
<li class="doc" role="presentation">
<a href="/?" itemprop="url" role="menuitem" aria-haspopup="true" tabindex="-1">
<span itemprop="name">Other Page</span></a>
</li>
</ul>
</nav>
Left arrow: Previous menubar item