关闭按钮的诸多糟糕（以及优秀！）模式

Manuel Matuzović 在其文章 详情 中详细介绍了 10 种糟糕的关闭按钮 HTML 模式。您知道，比如这样的：

<a class="close" onclick="close()">×</a>

为什么这不好？这里没有 href 属性，所以它实际上并不是一个链接（关闭按钮不是链接）。更不用说缺少的 href 使这个“占位符链接”无法聚焦。此外，该符号会被读取为“乘法”或“乘以”，这没有帮助（“x”也不行）。

您应该用什么代替？

也有很多好的模式。如果您更喜欢 × 的视觉效果，那么…

<button aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
<!-- You should probably wire up the ESC key to trigger this too -->

…确保您已 无障碍隐藏 该关闭按钮。

直接链接 →