CODEWITHSUNDEEP
htmlnavigationaccessibility
Andrea Verde
Andrea Verde

Reputation: 167

What's the right HTML tag for a subnav item that doesn't link to anything?

I'm thinking about a navigation menu where some item are just label for the subnav. For example:

    <ul>
      <li><a href="#">Item 1</a>
        <ul>
          <li><a href="/subitem1.html">Subitem 1</a></li>
          <li><a href="/subitem2.html">Subitem 2</a></li>
          <li><a href="/subitem3.html">Subitem 3</a></li>
        </ul>
       </ul>
      </li>
      ...
    </ul>

In this case "Item 1" is just a trigger that, on hover, shows the subnav list, but it actually does not link to any page. I see this kind of structure very often (usually with e.preventDefault() applied to click event).

Is it right to use an anchor tag here? Or would it be more correct to use another tag, like, for example, a span tag? Or something else?

An anchor tag can be focused pressing tab key, but it actually wouldn't link to a page. On the other side, a span tag is not focused on tab key, so it doesn't give context to subnav anchors.

Upvotes: 1

Views: 1422

Answers (3)

JeffG01
JeffG01

Reputation: 11

I think that, in your situation, using a <button> element provides the best semantics and keyboard navigation.

However, after a lot of experimentation, I've concluded that the best screen reader support comes from the types of structures shown by the Open Ajax folks and Terril Thompson. Their examples get the best speech feedback from ARIA. You will notice that they do not use <a> or <button> to toggle the subnav list. See Terrell's sample.

Notice the “About” <li>:

<ul id="nav" class="menubar root-level" role="menubar">
   <li class="menu-parent" role="menuitem" tabindex="0" aria-haspopup="true" title="About Menu">
      About
        <ul id="about" role="menu" class="menu" aria-hidden="true">
           <li role="menuitem" class="menu-item" tabindex="-1">
// etc. //

The <li> is made focusable and clickable with the tabindex attribute and JavaScript event listeners.

The advantage that I see is that the ARIA works best when the focus is on an element that is the parent of the sublist.

Upvotes: 0

Adam
Adam

Reputation: 18875

You should note that "#" is not a valid URL: https://www.webaccessibility.com/best_practices.php?best_practice_id=946

But you can perfectly use an anchor to the submenu as it reflects your navigation

<ul>
  <li><a href="#subnav1">Item 1</a>
    <ul id="subnav1" tabindex="-1">
      <li><a href="/subitem1.html">Subitem 1</a></li>
      <li><a href="/subitem2.html">Subitem 2</a></li>
      <li><a href="/subitem3.html">Subitem 3</a></li>
    </ul>
   </ul>
  </li>
  ...
</ul>

EDIT: As pointed out by a comment, the tabindex=-1 attribute should be set on an ul element in order to be keyboard accessible.

Upvotes: 1

souravb
souravb

Reputation: 121

Its good practice to follow uniform html structure as you have posted in the question. In case "Item 1" is not a link, you can use tabindex=-1 attr anchor tag to avoid focus on the tab button press.

<a class="yourclassname" href="#" tabindex=-1 rel="nofollow">Item 1</a>

In javascript, you can have this small piece of code to avoid hash from appearing in the browser address bar.

addEventListener('click', function (e) {
    if (e.target.classList.contains('yourclassname')) {
        e.preventDefault();
    }   
});

Upvotes: 0

Related Questions