使用跨度作为“按钮”是不好的做法吗？ W3Schools 正在这样做答案

【问题标题】：Is it bad practice to use spans as "buttons"? W3Schools is doing that使用跨度作为“按钮”是不好的做法吗？ W3Schools 正在这样做
【发布时间】：2023-10-22 12:47:02
【问题描述】：

考虑这个模态示例（以及其中的许多其他示例）：https://www.w3schools.com/howto/howto_css_modals.asp

他们使用span 标记，充当模式的关闭按钮。这在语义上是不正确的吗？还是有一些合法性可以这样做？

“网络标准化联盟”提出这样的例子有点奇怪。但也许我在这里遗漏了一些东西。

【问题讨论】：

w3schools 不是来自 w3c。
确实是不好的做法。将<button> 用于触发非锚链接的动作

标签： html semantics w3c semantic-markup

【解决方案1】：

将跨度用作“按钮”是不好的做法吗？

是的。默认情况下，它们是：

屏幕阅读器未宣布为交互式
不在 Tab 键顺序中，因此键盘用户无法访问

使用tabindex 和ARIA 可以解决这个问题，但使用真正的<button> 更简单且支持更好。

您可以从Inclusive Components by Heydon Pickering 更深入地了解这个主题。

W3C 正在这样做

不，他们不是。

W3Schools 是一个低质量的广告充斥的教程网站，恰好有很好的 SEO，因为它们一直存在。

他们选择了一个让他们与 W3 联盟混淆的名称。但是请注意，“Consortium”和“Schools”不是同一个词！

【讨论】：

哇，我还以为这是官方平台。 :D 你是对的，他们的排名通常比 MDN 还要高。

【解决方案2】：

如果您至少添加tabindex 属性，这不是一个坏习惯。用户也应该通过键盘到达按钮：

<span tabindex="0">Button</span>

另外一个好的做法是添加ARIA - attributes:

<span tabindex="0" role="button" aria-pressed="false">Button</span>

【讨论】：

但这看起来像一个非常愚蠢的“解决方法，所以我不必使用按钮”场景，我找不到理由证明这一点。但是为了添加一个有效且有助于开放的答案，请接受我的投票。 :)
是的，我同意更好的做法是使用<button>。