Elements must only use allowed ARIA attributes

Question

What's the appropriate ARIA attribute to use for an anchor tag without href?

    <a class="no-underline h-100" aria-label="Fund Balance" id="card0">
    ......
    </a>

This is getting flagged when running against axe DevTools but w3.org suggests I should be able to use any aria attributes.

Global aria-* attributes and any aria-* attributes applicable to the allowed roles.

https://www.w3.org/TR/html-aria/#docconformance

Any help with this would be greatly appreciated.

Thanks.

Answer 1

It depends on what you're trying to do with the anchor tag.

If the anchor tag is missing a valid href attribute, the screen reader doesn't interpret it as an anchor tag. It also isn't included in the page tab order, so it's not keyboard accessible.

If you want a screen reader to interpret your element as an anchor tag without using an href, then you can explicitly add role="link" as well as a tab stop using tabindex="0". But, as others have pointed out, it's not clear why you'd want to use an anchor tag if it doesn't link to anything - perhaps you should consider using a different element.

Otherwise, just add a valid href attribute such as href="#" which will make the link visible to screen readers and will make the link keyboard accessible.