Question

我正在编写一个Web应用程序，并且正在尝试确定在以下示例中使用按钮或锚点是否在语义上更正确：

<ul id="parent-list">
    <li id="parent-1" class="parent-list-item" value="1">
        <ul class="child-list">
            <li value="OPTION1" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION1</a>
            </li>
            <li value="OPTION2" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION2</a>
            </li>
            <li value="OPTION3" class="selected-child-list-item">
                <a href="javascript:void(0);" class="no-style-a">OPTION3</a>
                <span class="selected-child-span">✓</span>
            </li>
        </ul>
    </li>
    <li id="parent-2" class="parent-list-item" value="2">
        <ul class="child-list">
            <li value="OPTION4" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION4</a>
            </li>
        </ul>
    </li>

    ...etc

</ul>

每次按下锚点时，都会调用onClick处理程序，并向后端发出查询以检索与相应过滤器匹配的所有数据。查询返回后，前端会更新以显示此新信息。页面不重新加载，前端动态更新（使用react / redux来处理状态更改）。

我有什么理由在这里使用锚而不是按钮吗？

Answer 1

由于您没有在任何地方进行链接，因此不应使用链接。

也就是说，如果您正在编写unobtrusive JavaScript，那么当JS失败时，您将链接到服务器端回退，在这种情况下您应该使用链接。

Answer 2

根据您的描述，应使用按钮。屏幕阅读器用户在听到＆＃34;按钮＆＃34;时，会认为将要执行某些操作。当他们听到＆＃34;链接＆＃34;时，将执行某种导航。这听起来像是在执行动作而不是导航。

如果您打算在role="button"代码上使用<a>，请记住添加键盘处理程序，以便用户可以按链接上的Space键激活它，因为＆＃34;按钮＆＃ 34; element表示Space和Enter键都可以使用。如果可能，请使用原生<button>，因为它会为您处理。

Answer 3

前端动态更新

我有什么理由在这里使用锚而不是按钮吗？

焦点会移动到其他地方吗？

是：它是一个链接
不是：它是一个按钮

如果您使用javascript来模拟页面更改，那么只要用户感知页面更改或在页面内移动，您就可以使用锚点。

我应该在以下代码块中使用锚点或按钮吗？

3 个答案: