Reputation: 167
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
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
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
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