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

Question

通常，在书籍、教程和一些实际网页中，我会看到导航栏在元素中的元素中标记为<li>s 元素，如下所示：<ul><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>

但是，为什么我不应该更喜欢像下面这样的解决方案，其中直接包含上面示例中 s<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 个链接，这样当我在它们之间移动时，我就可以直观地看到我在导航中的位置。