时间戳

首页 > 解决方案 > 是否可以将按钮标签设置为看起来像链接？

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

问题描述

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

标签： htmlcssaccessibilityweb-accessibility

解决方案

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

推荐阅读