HTML 语义 - 充当锚点的按钮
HTML Semantics - Button acting as an anchor
我主要对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 anchor spec，其中规定如下：
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.
不幸的是，这对我帮助不大。基本上它说的是你不应该使用第三种方法 (anchor styled as a button) 如果你不想提供一个真正的 link 给它，那不是这个问题是关于什么的。
是否有关于此主题的任何官方 WCAG 我无法找到或？
选项 1 无效 HTML。
选项 2 无效 HTML。
此处选项 3 是正确的选择。
选项 4 在语义上不正确。
语义是最重要的可访问性方面之一。
有两件事决定了选项 3。
首先，锚点应该只用于跳转到部分和在页面之间导航。
第二个是按钮应该在同一页面上执行操作。
现在，如果您想将号召性用语 link 的样式设置为 看起来像一个按钮，那很好，但请确保使用正确的语义，但要确保 CTA 指向一个新页面，否则它在语义上是不正确的。
虽然在 Whosebug 上发誓要提到 SEO，但 hyperlink 而不是 JavaScript 重定向会好得多。
我认为您可能混淆了引用您的第 4 个示例的“伪造”阶段。
根据我对辅助功能和语义的一点经验，没有“一刀切”的方法。这实际上取决于您的优先级和您的目标用户体验。
A <button> 自动从浏览器获取所有辅助功能：使用选项卡或 spacebar/enter 键选择或按下。
一个 <a> 元素是一个 link，link 旨在用作页面中的 link 或锚点。
与页面中的按钮相比，锚点没有那么重要。从用户体验的角度；人们使用按钮与 UI 进行交互，以确认或让 UI 做某事。与 link 相比，按下按钮会提供不同的反馈。另一方面，锚 link 可帮助用户在页面中查找内容。
同样，这实际上取决于您要做什么：
- 这是条款页面还是文章？然后列出没有任何 button-like 样式
的锚 link
- 这 link 是否必须看起来像一个按钮，以便用户更容易发现或互动？然后将其设置为按钮，而不是真正的
<button>.
ARIA的第一条和第二条规则说：
像a和按钮这样的交互元素不能包含其他交互元素：
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
所以，由于您想做的是链接到一个页面，您的第三个解决方案显然是唯一正确的。
我主要对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 anchor spec，其中规定如下：
Anchor elements are often abused as fake buttons by setting their href to
#orjavascript:void(0)to prevent the page from refreshing, then listening for their click events .These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a
<button>instead. In general, you should only use a hyperlink for navigation to a real URL.
不幸的是，这对我帮助不大。基本上它说的是你不应该使用第三种方法 (anchor styled as a button) 如果你不想提供一个真正的 link 给它，那不是这个问题是关于什么的。
是否有关于此主题的任何官方 WCAG 我无法找到或？
选项 1 无效 HTML。
选项 2 无效 HTML。
此处选项 3 是正确的选择。
选项 4 在语义上不正确。
语义是最重要的可访问性方面之一。
有两件事决定了选项 3。
首先，锚点应该只用于跳转到部分和在页面之间导航。
第二个是按钮应该在同一页面上执行操作。
现在，如果您想将号召性用语 link 的样式设置为 看起来像一个按钮，那很好，但请确保使用正确的语义，但要确保 CTA 指向一个新页面，否则它在语义上是不正确的。
虽然在 Whosebug 上发誓要提到 SEO，但 hyperlink 而不是 JavaScript 重定向会好得多。
我认为您可能混淆了引用您的第 4 个示例的“伪造”阶段。
根据我对辅助功能和语义的一点经验，没有“一刀切”的方法。这实际上取决于您的优先级和您的目标用户体验。
A <button> 自动从浏览器获取所有辅助功能：使用选项卡或 spacebar/enter 键选择或按下。
一个 <a> 元素是一个 link，link 旨在用作页面中的 link 或锚点。
与页面中的按钮相比，锚点没有那么重要。从用户体验的角度；人们使用按钮与 UI 进行交互，以确认或让 UI 做某事。与 link 相比，按下按钮会提供不同的反馈。另一方面，锚 link 可帮助用户在页面中查找内容。
同样，这实际上取决于您要做什么：
- 这是条款页面还是文章？然后列出没有任何 button-like 样式 的锚 link
- 这 link 是否必须看起来像一个按钮，以便用户更容易发现或互动？然后将其设置为按钮，而不是真正的
<button>.
ARIA的第一条和第二条规则说：
像a和按钮这样的交互元素不能包含其他交互元素：
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
所以，由于您想做的是链接到一个页面，您的第三个解决方案显然是唯一正确的。