'How do I make links with no href attribute accessible?

A third party script is being used on a site I work on that replaces a few instances of <a href=""> with <a>. The links still work thanks to another part of the script, but they are no longer treated as links by user agents.

I can restore them to the tabbed navigation order by adding tabindex="0" but how can I make assistive technologies announce them as links or include them in a list of all links on a page?

Would adding role="link" help at all?

I am pushing the third party to improve their script so that the href is left intact. But in the meantime how do I best repair the damage that's being done?

I can't add either the original href or something like href="#" back to the links as the third party code will no longer do what it does. I hope that they improve their code so that I can, but for now I need to make the link accessible without the 'href'.

javascripthtmlaccessibilityanchorwai-aria


Solution 1:[1]

Whilst it's not very pretty, you can get at all anchors without a href attribute like so, using jQuery;

$("a:not([href])")

You can then just set the href attribute on those links to "#" and that should make them work again as regular links.

Here's a working JSFiddle

Sorry to reply with a jQuery solution...but doing this in regular JavaScript would be much more verbose.

Another way would be to give the anchors a role and then select them that way:

$("a[role='link']")

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jack Franklin

Related Questions