html - 从可访问性的 Angular 来看，我应该更喜欢 <nav><ul><li><a-or-other-tag> 还是 <nav><a-or-other-tag> ？

Question

这个问题在这里已经有了答案:





HTML5 nav element vs. role="navigation"

(6 个回答)


5 天前关闭。
社区在5天前审核了是否重新打开这个问题并关闭了它:

重复 这个问题已经回答了，不是唯一的，也没有区别于另一个问题。





通常，在书籍、教程和一些实际网页中，我会看到标记为 <li> 的导航栏。 <ul> 中的 s 个元素<nav> 中的元素元素，像这样:

.site-nav {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding-left: 0;
}

.site-nav > li > a {
  border: 1px solid black;
  padding: 1em;
  text-decoration: none;
}

li { padding: 1em; } /* just for better appearance here on SO */

<nav>
  <ul class="site-nav">
    <li><a href="x">first</a></li>
    <li><a href="y">second</a></li>
    <li><a href="z">third</a></li>
  </ul>
</nav>

但是，为什么我不喜欢以下解决方案，其中 <nav>直接包含<li>的所有内容来自上面的例子？

.site-nav {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.site-nav > a {
  border: 1px solid black;
  padding: 1em;
  text-decoration: none;
}

<nav class="site-nav">
  <a href="x">first</a>
  <a href="y">second</a>
  <a href="z">third</a>
</nav>

我看到的一个优势是靶向 <a> 所需的特异性较低。链接(或我在它们位置放置的任何内容，例如 <button> s)，但我对 HTML 仍然知之甚少，无法理解一种或另一种解决方案的含义，尤其是就可访问性而言。

Answer 1

答案很简单，语义和可访问性。
如果我在没有 <ul> 的情况下到达您的第二个示例用屏幕阅读器然后我不知道有多少链接。
如果我到达第一个使用屏幕阅读器正确标记的示例，我会听到类似于“导航地标，3 个元素列表”的内容。
这让我知道列表中有 3 个链接，因此当我在它们之间移动时，我可以想象我在导航中的位置。