A11y: Warning on missing href on anchor tag when role="button"

[char]

At the moment, svelte will warn if an <a role="button" {...}>{...}</a> tag is missing an href attribute, but, changing these tags to span (and thus, getting rid of the warning) is a detriment to accessibility.

Should svelte warn if an href attribute is missing on an anchor whose role is button?

[mrkishi]

An anchor tag isn't a button. I vote it should warn on missing hrefs.

[char]

Please consider these examples:

• Bootstrap:

<a role="button" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropdown
</a>

• Bulma:

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

[furstenberg]

YES! Svelte should warn in that case.

As far as I know you can’t emit the href attribute from an anchor tag.

It’s simple: use button element for “actions” and anchor element for navigation. With a valid href of course.

Those are bad examples when it comes to accessibility. They should both be a button with type=“button” to prevent it from “submitting”.

Try those examples in a screen reader and compare it to using a button element instead.

[Rich-Harris]

Responded over on #1763. My inclination is to close this issue — just use a <button>, that's what it's for! — but I'm curious about what you mean when you say that it hinders a11y in #1763 (comment)?

[RedHatter]

Just noting here that the specs say its valid to have an a tag without a href.

The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

I tend to omit the href when the a tag becomes disabled and therefore shouldn't be navigable.

[Conduitry]

I just checked, and neither Chrome nor Firefox let you tab to an <a role='button'> with no href - so I agree this should remain a warning, and am closing this.

[spiffytech]

Is there an option for disabling these warnings? I'm trying to use Bulma, which depends on un-anchored <a> tags a lot and doesn't give the option of using <button>. Right now with Svelte I'm stuck with a bunch of warnings I cannot fix without wholesale abandoning popular frameworks.

[Conduitry]

If you are using rollup-plugin-svelte, there's an onwarn option you can use. If you are using svelte-loader, there's a similar option, but it's currently broken because of a bug which has a pending PR.

Edit: The svelte-loader fix has been published.

[ps23Rick]

By the way.. I ran into the same thing.. What I found worked w/ Bulma was the following :

<label class="navbar-link">About</label>

instead of

<a class="navbar-link">About-Us</a>

Using doesn't alter the appearance on the loaded page like using did for me -- it worked but the rendered font label was really small.. Using seems to work just fine -- no warnings, no issues.

[igbanam]

a11y-label-has-associated-control: A11y: A form label must be associated with a control.

Gotta use that button @ps23Rick 🙂

[igbanam]

I found this workaround though

<a href={null}>Silences Compiler</a>

[jarecsni]

The null workaround by @igbanam doesnt seem to render the link properly (no anchor like styling on hover).

For me this worked fine:

<a href={'#'}>Click me</a>