Skip to main content
added 640 characters in body
Source Link

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. 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).

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. 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's own click area, and that the <a> tag itself is intercepted because of it.

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. 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 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 <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).

added 267 characters in body
Source Link

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. 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's own click area, and that the <a> tag itself is intercepted because of it.

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. Or otherwise, alter the link to match it's new UX role.

Does this matter?

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. 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's own click area, and that the <a> tag itself is intercepted because of it.

Source Link

Should We Replace Link Attributes/Values When We Prevent Default Link Action?

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:

  1. Change href to '#'
  2. Change title attribute ('account-menu-list-activator')
  3. Add aria-label(s)
  4. Or otherwise, alter the link to match it's new UX role.

Does this matter?