我应该为 Svelte 中的 `<a on:click>` 元素的 href 属性选择什么？

Question

假设我想<a>在 Svelte/SvelteKit 中使用切换链接。例如：

<a on:click|preventDefault={_=>collapsed=!collapsed}>Toggle</a>

我从 VS Code 插件收到此警告：

A11y: <a> element should have an href attributesvelte(a11y-missing-attribute)

A11y: '#' is not a valid href attributesvelte(a11y-invalid-attribute)

Answer 1

这个问题并不是 Svelte 特有的。只是 Svelte 编译器会提示您使用了错误的元素。

链接应该引导您到另一个资源。您的“链接”会更改同一页面中的某些内容，因此应该是一个按钮。所以当你写的时候

<button on:click={_=>collapsed=!collapsed}>Toggle</button>

不会出现可访问性警告。如果按钮看起来不像您喜欢的那样，请使用 CSS 更改其外观 - 当然保持可访问性（例如焦点轮廓）。

一般来说，当您有一个链接并想要使用“空”href 属性时，您可能使用了错误的元素。这就是为什么链接问题的大多数答案都是错误的。（令人遗憾的是，它们没有被标记为这样，而且许多赞成票更具有误导性。）

还值得注意的是，当您在此处使用 div 时，您将收到可访问性警告：

<div on:click={_=>collapsed=!collapsed}>Toggle</div> (DO NOT DO THIS)

编译器的警告是：

A11y：具有 on:click 事件的可见非交互式元素必须伴随 on:keydown、on:keyup 或 on:keypress 事件。svelte（a11y-click-events-have-key-events）

但无需实现这些事件，只需使用一个内置了所有必需的辅助功能的按钮即可。

建议资源：

我应该为 Svelte 中的 `&lt;a on:click&gt;` 元素的 href 属性选择什么？