javascript - 我所有的可点击内容都应该包含在 <a> 或 <button> 标签中吗？

Question

我想对此进行更多说明:我有一个网站使用大量使用 CSS 样式化的 JavaScript 按钮，如下所示:

nav ul { font-size:150%; text-align:center; margin:0; padding:0 }
nav li {
  width:150px; height:150px; list-style:none; float:left; margin:5px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  user-select:none
}
nav li:hover { background:#022; color:#eee; cursor:pointer; } 
nav li:active { background:#066; color:#fff }
nav span {
  display:block; position:relative; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%)
}

<nav>
  <ul>
    <li><span>one</span></li>
    <li><span>two</span></li>
    <li><span>three</span></li>
  </ul>
</nav>

像这样使用 anchor 标记在语义、功能等方面是否更好，为什么？:

nav ul { font-size:150%; text-align:center; margin:0; padding:0 }
nav li {
  width:150px; height:150px; list-style:none; float:left; margin:5px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  user-select:none
}
nav li:hover { background:#022; color:#eee; } 
nav li:active { background:#066; color:#fff }
nav span {
  display:block; position:relative; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%)
}
nav a{ text-decoration:none; color:#222 }/* anchor styling added */

<nav>
  <ul>
    <a href="#"><li><span>one</span></li></a><!-- anchor tags added -->
    <a href="#"><li><span>two</span></li></a>
    <a href="#"><li><span>three</span></li></a>
  </ul>
</nav>

使用 button 元素而不是其他方式怎么样？有区别吗？

Answer 1

最好使用 anchor 标记，因为它在语义上是正确的方法。它对可访问性更好，因为屏幕阅读器知道它是一个可点击的元素，并且用户可以通过 Tab 键将焦点放在它上面。

将 a 标签作为 li 标签的子标签。

<nav>
  <ul>
    <li><a href="#"><span>one</span></a></li>
    ...
  </ul>
</nav>

通常，您使用 a 链接到应用程序的其他文档或部分，并使用 button 执行某种操作。