(!) Plugin svelte: A11y: '#' is not a valid href attribute about svelte-spa-router HOT 11 CLOSED

<a href={'#'}></a> also removes the warning.

from svelte-spa-router.

You can also prevent the warning with a comment:

    <!-- svelte-ignore a11y-missing-attribute -->
    <a>...</a>

from svelte-spa-router.

<a href={'#'}></a> also removes the warning.

This is awesome I found it super helpful

from svelte-spa-router.

This is not an issue with the router. It’s Svelte telling you that links to # are bad for accessibility.

If you want to link to the home page, use #/ for href. If you want a link that does nothing, use “javascript:void(0)” for href. Or just don’t use an anchor tag and use any other kind of tag :)

from svelte-spa-router.

In most cases where this is an issue, it is intercepted with on:click handler to perform some action.
There is an accessibility issue with providing a link, if a screen-reader can't read where it is going - so links must always be clear in what they're attempting to link to.

When you intercept an on:click action like that though, you're most likely not trying to really create a link, you're just using it because it is a convenient click-able to trigger your action.

The real solution here is to use a button. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role :

The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information. Adding role="button" tells assistive technology that the element is a button but provides no button functionality. Use or input(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) with type="button" instead.

from svelte-spa-router.

<a href={'#'}> also removes the warning.

This indeed does remove the warning, but does not solve the problem of an invalid href for a11y purposes.

I would suggest using <a href="#top"></a>, clearly stating where the link leads.

from svelte-spa-router.

without href attribute you don't get the proper cursor.

from svelte-spa-router.

If you want a link that does nothing, use “javascript:void(0)” for href.

The problem with this is that with strict content security policy (which is recommended) it will generate CSP warnings and send CSP audit reports for no reason.

from svelte-spa-router.

Cursor can be changed with CSS cursor rule

from svelte-spa-router.

<a href={'#'}></a> also removes the warning.

Worked awesome !

from svelte-spa-router.

use “javascript:void(0)”

don't. that would break most content security policies

from svelte-spa-router.