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.
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.
In my case, the solution was to add a span with a bootstrap class of "visually hidden."
<a data-src="https://www.youtube.com/watch?v=FKZ9GpogY7k"
class="btn btn-video btn-icon btn-xl stretched-link"
data-bs-toggle="video">
<span class="visually-hidden">Play video</span>
</a>
<a>if it has no href ? My guess with the very few information you are giving here is that<a>is fundamentally not the appropriate element to use. If you give more context, we can certainly tell you what could be a good replacement. Remember that the first rule of ARIA is to don't use it unless you really need to.hrefattribute has no implicit role (meaning that it does not get theroleof"link". Also, from the linked W3C ARIA draft: "If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using thebuttonrole instead of thelinkrole." Long story short-- a<button/>may be a better element to use in this case...<a>without anhrefdoes not have a role. It's like having a<span>. A<span>is allowed to have anaria-label(although it'll most likely be ignored, see the third last bullet point on w3.org/TR/using-aria/#label-support). So an<a>without anhrefis allowed to have anaria-label, but it might be ignored like the<span>. If you want to shut axe up, you can addrole="link"to your<a>. (You probably need to addtabindex="0"too if you want the user to TAB to your link.)<a>without an href would be a list of links which includes 'locked' content - i.e. you must first visit link A and B before link C gets itshrefvalue, thereby gaining the link role. I understand that a null href is preferable to usingdisabledoraria-disabledin this case because the link is simply waiting to be unlocked or made available, rather than actually disabled. Perhaps this distinction is too small to be important, but the use case is real enough.