Adding 'skip links' to Nice Menus
mjpg - September 22, 2009 - 20:23
| Project: | Nice Menus |
| Version: | 6.x-1.3 |
| Component: | Miscellaneous |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
To improve accessibility of Nice Menus, I'd like to add 'skip links' to each top level menu so that people tabbing through with the keyboard don't have the visit every link.
I'm asking either for some hints as to where to start and how to approach this, or if it might qualify as a future feature.
How this would work (extra class, title etc removed) - this is not complete code:
<ul>
<li id="menu-1"><a href="/node/1">About us</a>
<ul>
<li class="skip"><a href="#menu-5">Skip to Services</a></li>
<li id="menu-2"><a href="/node/2">Our organisation</a></li>
<li id="menu-3"><a href="/node/3">How to find us</a></li>
<li id="menu-4"><a href="/node/4">Newsletters</a></li>
</ul>
</li>
<li id="menu-5"><a href="/node/5">Services</a>
<ul>
<li class="skip"><a href="#menu-9">Skip to Contact us</a></li>
<li id="menu-6"><a href="/node/6">Plumbing</a></li>
<li id="menu-7"><a href="/node/7">Building</a></li>
<li id="menu-8"><a href="/node/8">Roofing</a></li>
</ul>
</li>
<li id="menu-9"><a href="/node/5">Contact us</a></li>
</ul>In practice, CSS could hide the skip links until they get focus. You may also choose to mark-up the main, top-level, links into headings - again for accessibility.
Thanks in advance for any help.