Using empty links as top menu items

  • Sometimes designer or users want “empty” top level links in menus. In this case we normally use create custom link with URL # and Link text can be anything. Then user would add sub items for that link.

    This would create markup like this:

    <li>
<a href="#">Some text</a>
  <ul class="sub-menu">
    <li><a href="https://example.com/page-1">Page 1</a></li>
    </li><a href="https://example.com/page-2">Page 2</a></li>
    <li><a href="https://example.com/page-3">Page 3</a></li>
  </ul>
</li>

    Now the question is, would this be bad for accessibility point of view?

    We can argue if that’s good user experience or not but I’m mostly wondering how <a href="#">Some text</a> would be for accessibility.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    One thing to keep note is to use elements as what they were intended for. A link is meant to lead to information, either on the same page or on another page. So already you can see that it’s not the prettiest method.

    You can make it somewhat screenreader friendly by using good link text, some ARIA and ensuring that behaviour used for mouse users (like hover states) is also available for keyboard users, e.g.:

    <li>
<a aria-expanded="false" href="#" role="button">Open submenu for X subject</a>
  <ul aria-hidden="true" class="sub-menu">
    <li><a href="https://example.com/page-1">Page 1</a></li>
    </li><a href="https://example.com/page-2">Page 2</a></li>
    <li><a href="https://example.com/page-3">Page 3</a></li>
  </ul>
</li>

    You’ll be able to find a more definitive source of ARIA via Google.

    `

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Or maybe you’re wondering about using anchor tags just for keyboard focus? You can apply keyboard focus using ‘tabindex’ if the link is completely redundant, e.g.:

    <li tabindex="0">

    Thread Starter Sami Keijonen

    (@samikeijonen)

    The first answer is pretty much what I was wondering, thanks!

    <a href="#">Link</a> can be bad for accessibility. Particularly in a navigation menu.

    Consider when I visit a menu like the one you provided using NVDA/Firefox. Every link is announced as a link, but no indication is given that one of those links is just an anchor to the current page (it doesn’t announce the URL).

    When I activate that link, NVDA simply says “visited.” It gives me no further context, but it does put a page into my browser history (this is a bad thing if you consider the value of browser history).

    In my opinion, that is a bad experience for screen reader users.

    Now, consider a keyboard-only user. Typically that user can at least see in the browser status bar that the URL is an anchor link. For those who don’t see it, you are again putting a page into the browser history. Depending on the browser, you may also end up putting focus away from the selected item (since page may reload or jump), so the user has to navigate all the way back.

    In short, from an accessibility perspective, you should avoid it.

    However, just because the designer does not want that to be clickable doesn’t mean it should be an empty link. Unless the designer is writing the code, you can simply use other elements as appropriate based on need.

    I agree with everything here with regard to accessibility. Using NVDA and FF, if I see a link in a menu, I will definitely try clicking it. If it doesn’t take me anywhere, I’ll view source, see it’s a hash reference, and then move on. Most users aren’t going to take the time to view source. They’ll just get frustrated.

    The easiest way, without code, to have accessible non-clickable submenu items is to add through the custom link UI of the WordPress menu manager, and, once you’ve saved the custom link, go back in and remove the hash and then re-save.

    Hope that helps.

    When I built my “drop and drag” menu I used ( was suggested) the # to create a non clickable sub-menu. But now I am finding that all those sub-menus are clickable and goto a page that doesn’t exist.

    I have tried a couple of browsers. I have added the “#” to a couple of the menu items to see that was the problem and nothing changed. I have purged cache. no changes.
    Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Using empty links as top menu items’ is closed to new replies.