可点击的Div - Wrap锚链接还是使用JS？

Question

我有一个相当复杂的动态Div类列表，它包含各种nexted div来显示商店内容 - 整个事物需要有一个悬停状态并且可以点击（它目前有应用悬停样式）并且可以访问。

我想我可以接近这个 -

1 - 使包含Div成为Anchor链接并相应地设置样式

2 - 在div类中嵌套锚标记并编写JS函数以在单击包含div时触发锚点击。

什么是正确方法的想法是什么？

Answer 1

我肯定会使用包装<a>在这种情况下你不必考虑设置tabIndex=0 ， role=link ，你也可以跳过添加额外的JavaScript来使按钮可以点击并绑定输入键为同样的行动。

或者，如果“链接”没有将用户带到另一个位置，只显示一个模态窗口或其他一些奇特的功能，你应该用<button>包装<div> ，在这种情况下你也可以跳过将空格键绑定到动作因为它是遗传的。 （但如果你真的不能这样做，你应该在包装<a>添加role=button ）

现在，您可以专注于样式并记住同时使用:hover和:focus

Answer 2

通过添加“onclick”处理程序使<div>可单击是可以的。 但是，您应指定ARIA“角色”属性（例如role =“button”或role =“link”）以及指定“tabindex”属性（tabindex =“0”）以使元素成为可能使用键盘上的标签按钮时聚焦。