James Donnelly James Donnelly - 1 month ago 17
HTML Question

Can the WAI-ARIA link role be used to turn any element into a hyperlink?

I'm creating a navigation list which links to various different articles. In the past I've defined navigation lists as

nav
elements containing a single
ul
element which contains multiple
li
elements, all with their own individual
a
elements.

I'm wondering, can the
a
elements be avoided with the WAI-ARIA link
role
attribute?

Naturally,
li
elements aren't allowed
href
attributes, so the following will not be converted into anything understandable by the browser:

<nav role=listbox>
<ul>
<li role=link href=#foo>
Foo
</li>
</ul>
</nav>


The WAI-ARIA Recommendation describes the link role as:


An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.


It continues with:


If this is a native link in the host language (such as an HTML anchor with an href value), activating the link causes the user agent to navigate to that resource. If this is a simulated link, the web application author is responsible for managing navigation.


Of course, I could add in a simple JavaScript click handler, but this prevents the browser from acknowledging where the link points to. In Chrome, Edge and Firefox, for instance, a grey box appears in the bottom left of the screen whilst a link is activated to let the user know what the link does. Hovering over the link I've included above in this post, the user will see this displayed:

Browser Link Location Hint

Is it possible to get the browser to include this functionality without implementing any additional elements?

Answer

No, the WAI-ARIA link role is merely descriptive and intended to help devices like screen readers. It will not introduce any functionality. It is especially helpful when the link in question is not an a element but a simulated link with javascript.

To answer the second question you have, the link preview when you hover over an anchor tag is part of the browser's status bar. By default, browsers do not let you manipulate this via javascript because that would be considered a major security flaw. Otherwise you could essentially never trust that the preview was accurate and it would be easy to trick people into clicking malicious links.

That being said, some browsers will let you manipulate this by either changing settings in the browser or installing add-ons. This has no real practical purpose as the majority of users will not experience the changes, but it seems to be the only way. I found the most documentation for Firefox with the window.status page. You can set window.status = 'www.fakeurl.com', however you need to set the dom.disable_window_status_change preference to false in about:config before that would work.

If displaying text in the status bar is absolutely necessary the only way you will accomplish that is with an a element. As a rule of thumb, if your app allows you to use an a element for navigation, then you should always use an a element for navigation. And with CSS3 it's hard to imagine too many scenarios where you wouldn't be able to do so, as you could style that anchor tag to look like just about anything you wanted.