是否可以将按钮标签设置为看起来像链接？

Question

我在互联网上看到很多关于 <a> 看起来像按钮的标签的讨论，以及所有链接必须遵守的规则。但是，我对 <button> 样式看起来像链接的标签感到困惑。

我正在创建一个单页应用程序，我的导航组件负责呈现/隐藏网站的不同部分。一次只能看到一个部分，因此我将每个部分视为一个具有自己路线的独特页面。

我的导航控件是按钮，而不是链接。我这样做是因为我知道没有任何有效的内容，我可以将其放在 href 中（假设隐藏的内容不存在于 DOM 中）。

我在互联网上读到，出于可访问性原因，按钮必须具有样式来识别按钮的优先级。理想情况下，我希望按钮看起来像链接，因为它们的行为与链接相似（尽管不相同）。

样式按钮看起来像链接是否存在任何可访问性问题？将这些按钮设置为按钮更有意义吗？如果它们看起来像按钮，那么优先级应该是什么？用css隐藏隐藏的“页面”是否更有意义，这样我就可以将按钮变成<a>标签并添加一个href？

这是单页应用程序的典型标记

<div>
    <nav>
        <ul>
            <li>
                <button data-name="Skills">Skills</button>
            </li>
            <li>
                <button data-name="Projects">Projects</button>
            </li>
            <li>
                <button data-name="History">History</button>
            </li>
            <li>
                <button data-name="Employment">Employment</button>
            </li>
            <li>
                <button data-name="Contact">Contact</button>
            </li>
        </ul>
    </nav>

    <div id="content-panel">
        Home
    </div>

</div>

底部div#content-panel 代表主页。它将被使用 JavaScript 的其他页面替换，其中包含网站的主要内容。

Answer 1

对于那些偶然发现这一点的人，请不要在没有href 的情况下使用<a>，这会导致元素无法再通过键盘聚焦。

下面的小提琴展示了这一点。尝试使用 Tab 来聚焦链接。

您显然可以添加 tabindex="0" 以将它们添加回焦点顺序，但这是一种反模式，如果您发现自己这样做，则表明您的 HTML 出现了错误。

<div>
    <nav>
        <ul>
            <li>
                <a data-name="Skills">Skills</a>
            </li>
            <li>
                <a data-name="Projects">Projects</a>
            </li>
            <li>
                <a data-name="History">History</a>
            </li>
            <li>
                <a data-name="Employment">Employment</a>
            </li>
            <li>
                <a data-name="Contact">Contact</a>
            </li>
        </ul>
    </nav>

    <div id="content-panel">
        Home
    </div>

</div>

如果您正在以类似于 OP 描述的方式构建 SPA，您仍应使用锚点 <a> 进行导航。

您应该考虑以下几点：

1. 当显示每个部分时，您应该通过 JavaScript 更新网站上的 URL。

2. 如果您的网站也有服务器端渲染 (SSR) 并且可以在没有 JavaScript 的情况下以有限的方式运行（推荐因为由于网络错误、您错过的某些场景的 JS 错误等原因导致 JavaScript 失败的频率比您想象的要高）。 ) 那么锚点的href 应该指向正确的URL。

3. 在 SPA 导航中，建议在加载新页面后以编程方式将焦点设置在该页面 <h1>。您可以通过将tabindex="-1" 添加到<h1> 来做到这一点（这允许它以编程方式接收焦点而不添加到页面的焦点顺序），然​​后使用header1.focus()

4. 为了让使用屏幕阅读器的用户获得更好的体验，将aria-live 部分添加到页面中，其值为assertive，一旦点击链接就会宣布“加载”。 <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>

我有一个合理的long answer with a bit more detail of this technique here 来解释原因。

最后回答原来的问题！

您可以设置一个按钮的样式，使其看起来像一个链接。然而，跨网站的一致性是关键。

因此，如果这是您用于按钮的样式，请确保大多数按钮看起来相同。

此外，如果您让按钮看起来像标准链接，那么实际上您应该让链接看起来与链接样式的按钮不同。

这避免了混淆，因为按钮期望更改当前页面上的某些内容或提交表单，链接期望更改页面/URL/导航。

但是，对于按钮样式的链接，建议并不完全相同。例如，如果链接是号召性用语，则可以将链接设置为按钮的样式已成为可接受的。不过，网站之间的一致性仍然是出色用户体验的关键。

Answer 2

正如MDN 中所述，导航 期望将a 链接作为子链接。因此，如果您想防止任何可访问性问题，我建议您坚持使用它们，只需删除href 属性并将type="button" 添加到您的a 标签。

Answer 3

任何看起来像其他东西的东西都会愚弄用户。这适用于看起来像按钮的链接、看起来像纯文本的链接、看起来像 h2 的 h1、看起来像 ol 的 ul 等。当用户被愚弄时，用户可能会感到困惑或被误导为错误。例如，对于一个看起来像按钮的链接，用户可能会按下空格键来激活它，然后惊讶地发现它没有被激活，而是页面被滚动了。