他们……就是……学不会🤦‍♂️——按钮就是按钮！[系列：无障碍指南]

前言：现在我们再次对无障碍设施发表我愤怒的咆哮。

如果您以前没有见过这些，那么愤怒只是为了好玩，但信息很重要，我实际上并不生气😋。

如果您不确定我哪里愚蠢，请直接询问，我知道讽刺在书面文字中并不总是能很好地表达出来！

我为什么要用 a <button>？A<div>有效！

有什么用处？当然可以用鼠标，但很多残障人士依赖键盘，而键盘<div>无法获得焦点。

你们不关心残疾人吗？

你沒有心肝嗎？

即使像我这样愤怒的人也会关心，所以你的借口是什么？

显然，您可以添加tabindex="0"到<div>以使其可聚焦，但随后您还需要为Enter和Space键添加键盘处理程序（是的，这两个按钮都可以与空格和回车键一起使用！）。

您还需要添加焦点指示器。

对我来说，这一切似乎都是很多工作。

所有这些都可以通过 来解决<button>。

作为额外的奖励，它甚至会解释为Enter，Space因此click您只需附加一个点击处理程序！

更特别的是，它还能立即获得焦点！这样，您就无需再为tabindex精美的 HTML 添加额外的属性了。

但等等...还有更多！

除了开箱即用之外，它还默认具有焦点指示器以及悬停状态！（尽管我可能会添加您自己的版本，因为它们开箱即用效果不佳！）

因此，即使您忘记添加它们，其他人也已经为您完成了工作。

我知道这些，但是原生<button>元素很丑陋，这就是我使用的原因<div>。

让我带你进入21世纪。

您可以使用 CSS 这个神奇的东西从本机按钮元素中删除所有样式。

然后你就可以随心所欲地调整它的外观了！是不是很棒！

我知道 CSS 很复杂而且可怕（我的意思是，你不会写 HTML，所以你没有机会使用 CSS）所以让我通过一个快速<button>重置示例来帮助你。

一个简单的例子

除非您支持 IE9，否则您甚至不需要我在下面添加的几个 CSS 属性，但是为了节省 20 个字节，您最好还是使用它们。

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

一个 jsfiddle 来展示您的新“无样式”按钮！

在下面的 jsfiddle 中，你会看到<button>和<div>看起来相同，但你仍然可以按下Tab并聚焦按钮，尽管它没有tabindex="0"......令人震惊！

小提琴上的按钮本质上就是<div>现在，但却具有神奇的力量！

然后，您可以应用与...大奖相同的所有样式<div>！

显然，如果你一直在用 代替 ，<div>你<button>可能需要提醒一下，确保也为:focus和:hover状态设置了样式。我刚刚提醒过你，现在就去做吧！

是的，不用担心，我知道不要使用<div>，而是使用，<a href="#"这样它就有焦点状态！

我可以用一个简单的表情符号来概括我对这句话的反应：

🤦‍♂️

从某种程度上来说，这甚至更糟，你明明知道 a 的<div>语义不正确，而且无法获得键盘焦点，为什么还会想到“我要用超链接”。我觉得这真该再揍你一顿……🤦‍♀️

这个图案是2008年的！在那个我们不得不与IE7和IE8抗衡的黑暗年代，它是必不可少的，那时我们只有HTML 4，按钮的样式无法正确设置。那些日子已经过去了！尽情享受HTML5的精彩世界吧！

但是我怎么知道什么时候该用锚点，什么时候该用按钮呢？我听到你问了！

如果您记得一件事，请记住这一点：“超链接（<a>）会改变 URL”。

本质上就是这么简单，我应该在这里使用超链接还是按钮？

只需问自己“它会改变 URL 吗”？

• 是的- 使用有效的锚点href-<a href="an-actual-url-not-javascript-void-and-not-a-lone-hash">
• 否— 使用<button>。

不要忘记，您仍然可以在更改 URL 之前运行一些 JavaScript，甚至可以使用 AJAX 加载新页面，但导航（URL 更改）意味着锚点，否则使用<button>.

我知道很多人现在会说“但是 X 场景怎么样”......你错了（可能，我能想到一个用例......）。

但这条规则现在并不总是有效，不是吗？

噢，你很聪明不是吗？

您知道我的论点中的致命弱点...您问“没有 JavaScript 后备怎么办？”

是的，你说得对，这种情况虽然少见，但确实有效。不过请注意，在任何一种情况下，它href="#"都是无效的，因为它不会回退到任何状态！

例如，以下是一个可接受的模式，例如在移动设备上打开画布外菜单的按钮，但当 JS 失败时，有一个站点地图作为后备：

<a href="https://yoursite.com/sitemap" role="button" class="button">Menu</a>

但您应该使用 JavaScript 添加role="button"。

这样，如果没有 JavaScript（例如，当 JS 文件请求失败时），就屏幕阅读器而言，它仍然只是一个有效的超链接。

当 JS 工作时（99％ 的时间），它将接收role="button"并应被视为一个按钮，一切再次变得有意义。

我再重复一遍：要使此模式起作用，URL 应该是一个有效的后备 URL。

哦，别忘了，您还应该添加一个事件处理程序，Space因为按钮可以与一起使用Space ， Enter如果您这样做（超链接只能与一起使用Enter）！

如果您不明白这些，请不要担心，我将来会就此写一篇真正的（非愤怒男人的咆哮）完整文章，对这一切进行正确的解释。

为什么我们仍然存在这个问题？

旧教程基于旧教程的新教程和库以及基于更旧教程的过时教程。

我的订阅源中目前至少有 3 篇文章存在同样的问题（你认为是什么让我如此暴躁？！）

因此，如果您正在编写教程...学习 HTML...这真的很容易！

如果你学不会 HTML...那就找其他职业吧！

是的，即使不生气的我也这么认为，如果你学不会 HTML，你就无法构建任何前端网站。

这是前端 Web 开发中最容易学习的东西。

如果您是代码新手并想要为网络构建东西，请先学习 HTML，只需几天，您就会在竞争中领先数光年！

让我们开始呼唤人们吧！

是的，我提倡欺凌。但这是一种好的欺凌！

每当您看到有人使用<a href="#"as a时<button>，告诉他们他们是菜鸟并向他们展示光明。（不要告诉他们他们是菜鸟，那是愤怒的人在说话！只需将他们带入语义 HTML 的怀抱）。

无论何时看到<div class="button"，都请畏缩、深呼吸并告诉他们他们的错误。

好吧，但我能说什么呢？

你知道吗，我会让它变得简单，只需将其复制粘贴到他们文章下的评论部分即可：

很棒的文章，但是您可以使用元素<button>作为按钮吗？

它使依赖辅助技术的人（通常是残疾人）更容易访问该页面。

作为额外的好处，它可以让您作为开发人员的生活变得更轻松！

每篇不使用语义 HTML 的文章都意味着代码新手会养成坏习惯（因为我们都从“复制粘贴”阶段开始，这是学习/完成任务的最佳方式！），然后他们创建的网站会导致更多的人被排除在这个世界之外。

一旦这些代码新手开始学习可访问性，他们就必须改掉你教给他们的坏习惯。你让他们的事情变得更加困难。

97.4% 的网站存在可访问性错误。

我确信，鉴于这篇文章的其余部分如此精彩，你不会想加剧这个问题。”

针对严重违规者或屡犯者，可选附加段落和 GIF

哦，如果你不修复这篇文章，那个愤怒的无障碍评论员@InHuOfficial可能会访问你的网站。你肯定不想看到这样的结果……

（在你问之前，我肯定不够酷，不足以拿自己和约翰·威克相比！但这是我的文章，所以让我有我的小幻想吧，它们可以缓解愤怒男人综合症，你知道的！）

结束咆哮

再次强调，这主要是为了好玩，但信息很重要，使用语义元素，让网络成为每个人的更好的地方！

如果您在 dev.to 或其他网站上写作，请特别小心您发布的任何标记（这并不意味着“只是为了好玩”），其影响比您想象的要大得多！

说真的，如果你觉得某个场景需要用锚点作为按钮，请在评论区留言。这可能是一个我还没遇到过的有效用例，也可能是其他地方的决定“迫使”你使用了错误的元素。我们一起探讨一下，一定会很愉快！

为了算法！

我的新签字实验！

如果您喜欢这篇文章，请给它一个❤，如果您认为它很特别，请给它一个🦄，最重要的是，不要忘记：

给算法留言吧！（哪怕只是告诉我别这么生气也好😉！）