ARIA Links demonstration

Published: March 12, 2017

Last updated: December 11, 2021

See source on GitHub

Making fake ARIA links is generally not a good idea. But, if you're going to do it anyway, then this here script is one way you could make them.

Pattern Demos

There are two markup pattern options for using this script, with a sub-option to open links in a new window.

Mark-up Option 1:

This approach will fallback to static text if JavaScript is unavailable. For instance, if viewed in a browser's reader mode.

Google
<span data-aria-link
  data-href="https://www.google.com">
  Google
</span>

Mark-up Option 2:

Use this mark-up to display a URL if JavaScript is unavailable.

Bing https://www.bing.com
<span data-aria-link>
  Bing
  <span data-link>
    https://www.bing.com
  </span>
</span>

Open in a new window:

The data-blank attribute will make the faux link open in a new window. It will add a title attribute with help text "opens in a new window".

Duck Duck Go
<span data-aria-link
  data-href="https://duckduckgo.com"
  data-blank>
        Duck Duck Go
</span>