Adding 'skip links' to Nice Menus

Created on 22 September 2009, almost 15 years ago
Updated 2 May 2024, about 2 months ago

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.

✨ Feature request
Status

Closed: outdated

Version

3.0

Component

Miscellaneous

Created by

πŸ‡¬πŸ‡§United Kingdom mjpg

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024