为什么HTML5中的导航栏会作为列表？

时间：2016-04-23 13:05:23

标签： html5 navigation html-lists accessibility semantic-markup

自从我开始使用HTML，CSS等以来，我一直注意到的一个一致的事情是导航条似乎几乎总是以列表形式呈现，在某些变体中：

HTML： 

<ul>
 <li><a href="link1.html">link 1</a></li>
 <li><a href="link2.html">link 2</a></li>
 <li><a href="link3.html">link 3</a></li>
 <li><a href="link4.html">link 4</a></li>
</ul>

<li>

内还有<a>

CSS： 

ul{list-style-type:none;}
li{display:inline-block;}

现在HTML5基本上是相同的，但是在<nav>标签或任何说“这是浏览器/屏幕阅读器的某些导航内容”中的任何内容都会被推到。

我的问题是他们是否需要具有现代HTML5语义和ARIA可访问性角色的列表，还有哪些好处？当然是一个链接列表，但还有其他任何实际原因吗？

我找到的原因：

  • 语义，屏幕阅读器和辅助功能：意见各不相同，特别是它如何使屏幕阅读器变得更好（或更糟糕......）。但是不应该在链接周围使用HTML5的<nav>和/或相关的ARIA角色吗？是否还需要专门显示为链接列表（无序或其他）？

  • 美学：在带有默认项目符号的垂直列表中，或者没有CSS ，是的。但是，否则替代标记（例如<a>中的<nav>）而不是<li>中的<ul>将根据需要轻松或更容易地进行样式化。

  • 现有使用：它在现有网站中被大量使用（例如StackExchange网站，MDN，还有更多......）。

  • W3C <nav>规范：说链接不必在列表中，但也可以。但它也将<nav>的内容指定为“链接的一部分”，是否还需要是“链接列表”？

  • 向后兼容性：它经常被使用，因此应得到广泛支持，旧版浏览器/屏幕阅读器可能无法使用HTML5和ARIA。

各种帖子提到：

我可能会继续使用列表，因为这似乎是当前的现状，并希望将向后（和向前？）兼容，我将使用现代屏幕阅读器*自己尝试使用自己的代码进行更多研究。但是有理由在导航中使用更新的HTML5语义列表吗？

另外，除了JAWS之外，我应该尝试哪些屏幕阅读器？

2 个答案:

答案 0 :(得分：7)

层次！

许多导航菜单包含多个级别（通常用于下拉菜单），即层次结构：

  
      
  • 主页
    •   
  • 产品      
        
    • 实物产品
      •   
    • 数码产品
      •   
    •   
  • 联系
    •   

不使用ul（嵌套ul），您无法在标记中表示此层次结构（除非导航是复杂/长的，在这种情况下您可以使用子部分标题元素）。

您的导航（当前）没有多个级别？这并没有突然改变它的语义，它仍然是相同的信息结构，只有一个级别而不是两个或更多。

列表的更多好处。

通过使用ul，用户代理（如屏幕阅读器）有机会提供利用该结构的功能。例如，屏幕阅读器可以宣布列表中有多少项，并提供导航该列表的其他方式（例如，跳转到第一个/最后一个项目）。

如果仅使用div，则很容易发生用户＆＃34;标签输出＆＃34;导航没有注意到导航已经结束。通过使用ul，非常清楚开头和结尾的位置，这对导航菜单尤其重要，因为导航条目通常只有与其他菜单相比才有意义（找到适合您的链接）目标通常只能通过检查所有可用的导航链接并排除它们来实现。

所有这些与nav无关。

nav元素只表示此部分包含导航链接。如果没有nav（即HTML5之前的版本），用户代理只知道有一个列表。使用nav，用户代理知道有一个列表+用于导航。

此外，nav当然不应始终包含ul，因为并非所有导航都是链接列表。见nav example in the HTML5 spec：

  

nav元素不必包含列表，它也可以包含其他类型的内容。在此导航栏中，链接以散文形式提供：

<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. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

答案 1 :(得分：3)

为什么导航栏被实现为html列表（ul）的问题不如在没有使用列表的情况下实现它们那么重要。

HTML菜单就像食物菜单，它们本质上是无序列表。您可以浏览并选择所需元素的东西。人们不会选择将菜单显示为列表，这是一个事实：菜单是一个列表。那么为什么要使用除ul和li之外的其他元素？

某些浏览器实现的默认CSS定义带有子弹的事实与表示相关，但不会单独更改标记的含义。

例如，根据W3C，这里是div的定义：

  

div元素是流内容的通用容器，它本身不代表任何内容。

现在，table：

的定义
  

table元素表示一个表;也就是说，具有多个维度的数据。

这是ul：

的定义
  

ul元素表示无序的项目列表;也就是说，更改项目顺序的列表不会改变列表的含义。

在3个定义中，更合适的标签是ul。

此外，它还为屏幕阅读器提供导航机制，例如宣布层次结构，转到下一个/上一个元素，......

关于屏幕阅读器，您还可以尝试使用NVDA，Chromevox和画外音。

相关问题
最新问题