ARIA Links demonstration
Published: March 12, 2017
Last updated: December 11, 2021
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".
<span data-aria-link
data-href="https://duckduckgo.com"
data-blank>
Duck Duck Go
</span>