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

Question

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

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

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

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

样式按钮看起来像链接是否存在可访问性问题？将这些按钮的样式设置为按钮会更有意义吗？如果它们应该看起来像按钮，那么应该优先考虑什么？用 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

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

Answer 2

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

下面的 fiddle 显示了这一点。尝试使用 Tab 来聚焦 links。

您显然可以添加 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> 进行导航。

您应该考虑以下几点：

当显示每个部分时，您应该通过 JavaScript.
更新网站上的 URL
如果您的站点也有服务器端呈现 (SSR)，并且可以在没有 JavaScript 的情况下以有限的方式运行（推荐，因为 JavaScript 确实比您认为的更频繁地失败网络错误，你错过的某些场景的 JS 错误等）然后锚点的 href 应该指向正确的 URL.
在 SPA 导航中，建议在加载新页面后以编程方式将焦点设置在该页面上 <h1>。您可以通过将 tabindex="-1" 添加到 <h1> （这允许它以编程方式接收焦点而不被添加到页面的焦点顺序）然后使用 header1.focus()
来做到这一点
为了让使用屏幕的人获得更好的体验 reader，向页面添加值为 [=21] 的 aria-live 部分也可能会有所帮助=] 会在单击 link 时宣布“正在加载”。 <div aria-live="assertive"></div>

我有一个合理的解释了原因。

终于回答原题了！

您可以将按钮样式设置为看起来像 link。然而，跨站点的一致性是关键。

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

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

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

然而，对于 link 样式类似按钮的建议并不完全相同。如果 links 是号召性用语，则可以将其设置为类似按钮的样式，这已成为可以接受的做法。不过，再次强调，站点间的一致性是良好用户体验的关键。

Answer 3

任何看起来像其他东西的东西都会愚弄用户。这适用于看起来像按钮的 link、看起来像纯文本的 link、看起来像 h2 的 h1、看起来像 ol 的 ul 等。当用户被愚弄时，用户可以感到困惑或误入歧途。例如，对于一个看起来像按钮的 link，用户可能会按 Space 来激活它，但会惊讶地发现它没有被激活，而是滚动了页面。

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

Is it accessible to style button tags to look like links?

html

css

accessibility

web-accessibility

终于回答原题了！