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

Question

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

.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> 和屏幕 reader 的情况下得出你的第二个示例，那么我不知道有多少链接。

如果我到达第一个正确标记的屏幕示例reader，我会听到类似“导航地标，3 项列表”的声音。

这让我知道列表中有 3 个链接，因此当我在它们之间移动时，我可以直观地看到我在导航中的位置。

Answer 2

HTML 标签具有（除了 div 和 span 等例外）语义。你需要检查它们的存在或不存在会产生什么影响。

在spec.whatwg.org: 4.3.4 The nav element

你有这个例子：

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered.
 …

所以您在 nav 元素中有完整的文本。对于盲人，屏幕 reader 将读取此文本，以便 You are on my home page. To the north lies <a href="/blog">my blog</a> 可以理解为 You are on my home page. To the north lies my blog. 以及 my blog 是 link 指向的信息博客。

最后一个例子：

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

你认为屏幕阅读应该如何向人呈现 nav 的内容，如句子 first second third 以及该“句子”的每个单词都是 link?这没有多大意义吧？

这就是为什么您使用 ul 或 ol 元素对 link 进行分组的原因。赋予它 first second third 不是句子而是项目列表的语义。

您可能会假设特定屏幕 reader 足够智能，可以确定您的第二个示例不包含句子。但是当网站没有引入足够的语义时，你依赖屏幕 reader 可能引入的可选行为来解决问题。

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

Shoud I prefer <nav><ul><li><a-or-other-tag> or <nav><a-or-other-tag>, from an accessibility standpoint?

html

css

accessibility

nav

navbar