我应该更喜欢 <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?

问题描述

通常，在书籍、教程和一些实际网页中，我看到导航栏在

元素中标记为
• 元素一个
  元素，像这样:

  Often, in books, tutorials, and some actual webpage, I see navigation bars marked up as <li>s elements in a <ul> element in a <nav> element, like this:

  .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>

  但是，为什么我不喜欢下面这样的解决方案，其中

  直接包含来自

  的所有内容上面的例子?

  However, why shouldn't I prefer a solution like the following, where the <nav> contains directly all the contents of the <li>s from the example above?

  .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>

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

  One advantage I see is the lower specificity needed to target the <a> links (or whatever I'd put in their place, e.g. <button>s), but I still know too little about HTML to understand the implications of one or the other solution, especially as far as accessibility is concerned.

  推荐答案

  答案很简单，语义和可访问性.

  The answer is straight forward, semantics and accessibility.

  如果我使用屏幕阅读器在没有 <ul> 的情况下到达您的第二个示例，那么我不知道有多少个链接.

  If I arrive at your second example without the <ul> with a screen reader then I have no idea how many links there are.

  如果我到达第一个使用屏幕阅读器正确标记的示例，我会听到类似于导航地标，3 个项目列表"的内容.

  If I arrive at the first, correctly marked up example with a screen reader I will hear something similar to "navigation landmark, list of 3 items".

  这让我知道列表中有 3 个链接，因此当我在它们之间移动时，我可以想象我在导航中的位置.

  This lets me know that there are 3 links in the list so I can visualise where I am in the navigation as I move between them.

  这篇关于我应该更喜欢 <nav><ul><li><a-or-other-tag>从可访问性的角度来看，还是<nav><a-or-other-tag>?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！