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.
Something like e.preventDefault()
.
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.
Examples:
- Change
href
to'#'
- 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?
Example:
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 the usual) that the caret
does not have it'sits 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 <span class="caret"></span>
.
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).