HTML 语义 - 按钮充当锚点

Question

我主要对方面感兴趣a11y

因此，您可能知道，有时您可能希望有一个按钮作为锚点。
这些是（我能想到的）解决这个问题的4 种方法：

1. 锚元素内的按钮

<a href="//redirection"><button>Button</button></a>

2. 内嵌按钮元素

<button><a href="//redirection">Button</a></button>
<!-- Also should it be a href or button onclick (?) -->

3.锚定样式为按钮（没有按钮元素）

<a class="buttonLike" href="//redirection">Button</a>

4. 按钮作为重定向（没有锚元素）：

const button = document.getElementById('button')
button.addEventListener('click', () => {
  window.location.href = "//redirection"
})

<button id="button">Button</button>

---

我试图自己找到答案。我能找到的最接近的是这段摘录：
根据MDN 锚规范，其中说明如下：

锚元素经常被滥用为假按钮，方法是将它们的 href 设置为#或javascript:void(0)以防止页面刷新，然后监听它们的点击事件。

这些虚假的 href 值会在复制/拖动链接、在新选项卡/窗口中打开链接、添加书签或 JavaScript 加载、错误或禁用时导致意外行为。它们还会向辅助技术（如屏幕阅读器）传达不正确的语义。

使用 a<button>代替。通常，您应该只使用超链接导航到真实的 URL。

不幸的是，这对我帮助不大。基本上它说明的是，如果您不想提供指向它的真实链接，则不应使用第三种方法（锚样式为按钮），这不是这个问题的内容。

是否有任何关于此主题的官方WCAG我无法找到或？

Answer 1

选项 1 不是有效的 HTML。

选项 2 不是有效的 HTML。

选项 3 是这里的正确选择。

选项 4 在语义上是不正确的。

语义是可访问性的最重要方面之一。

有两件事在起作用，决定了选项 3。

第一个是锚应该只用于跳转到部分和页面之间导航。

第二个是按钮应该在同一页面上执行操作。

现在，如果您想将号召性用语链接的样式设置为看起来像一个很好的按钮，但要确保使用正确的语义，但要确保 CTA 指向一个新页面，否则在语义上不正确。

虽然它在 StackOverflow 上发誓提到 SEO，但超链接而不是 JavaScript 重定向会好得多。