There are times when I, a custom theme, a contributed module or library, prevents the default action of an
<a> tag. This is not uncommon and needed when implemented.
Now when you hover over the link, browsers will still show the innate link
href value, even though the click event is intercepted. Same for bots, scrapers, scripts, anything that reads the DOM.
- Change title attribute ('account-menu-list-activator')
- Add aria-label(s)
- Or otherwise, alter the link to match it's new UX role.
Does this matter?
A menu link to a user profile exists in a menu. A new theme/module alters that menu link and adds a
caret for the dropdown menu. This theme/module looks for this
caret and alters the behavior of the link via jQuery by intercepting the click event. Now the link no longer redirects to the user profile but toggles the dropdown menu.
This assumes (as is usual) that the
caret does not have its own click area, and that the
<a> tag itself is intercepted because of it.
Code Example (Drupal - Bootstrap Theme):
<ul> <li> <a href="/user" class="dropdown-toggle" data-toggle="dropdown">Link Text <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="first last"> <a href="/">Sub Link Text</a> </li> </ul> </li> <li class="last"> <a href="/">Link Text</a> </li> </ul>
caret refers to
This link uses classes and data attributes for functionality/behavior, but does not contain aria labels or replace the href (It's a link, not a button).
<button>element. It can be easily styled to visually look like a link if needed, but in terms of accessibility and usability, it will behave and be announced like a button. If the link has a fallback (if you open it in a new window, does it still work?) then keep it as a link.
caretin this instance, but if that new link toggles a dropdown menu then it should definitely be changed to a button instead. Can you provide a screenshot perhaps? If it opens a dropdown menu, you may also want to consider using
aria-expandedto let screen reader users know that it's expandable, and whether it is currently expanded or not.