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

如何解决是否可以将按钮标签样式设置为链接？

我在互联网上看到很多关于看起来像按钮的 <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 的其他页面替换，这些页面将包含网站的主要内容。

解决方法

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

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

以下小提琴显示了这一点。尝试使用 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> 进行导航。

您应该考虑以下几点：

当显示每个部分时，您应该通过 JavaScript 更新站点上的 URL。
如果您的站点也有服务器端渲染 (SSR) 并且可以在没有 JavaScript 的情况下以有限的方式运行（推荐，因为 JavaScript 由于网络错误而失败的频率比您想象的要高，您错过了某些场景的 JS 错误等. 等）然后锚点的 href 应该指向正确的 URL。
在 SPA 导航中，建议您在加载新页面后以编程方式将焦点设置在该页面上 <h1>。您可以通过将 tabindex="-1" 添加到 <h1>（允许它以编程方式接收焦点而不添加到页面的焦点顺序）然后使用 header1.focus()
为了让使用屏幕阅读器的人获得更好的体验，向页面添加一个 aria-live 部分，其值为 assertive 以宣布“正在加载”一次也可能是有益的单击链接。 <div aria-live="assertive"></div>

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

终于回答原来的问题了！

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

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

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

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

然而，对于按钮样式的链接，建议并不完全相同。例如，如果链接是号召性用语，那么链接的样式就可以像按钮一样变得可以接受。不过，再次强调，跨网站的一致性是出色用户体验的关键。

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

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

如何解决是否可以将按钮标签样式设置为链接？

解决方法

终于回答原来的问题了！

相关推荐